productApplicationEdit.vue 11.2 KB
<template>
  <div class="container_wrap full" v-loading="fullscreenLoading">
    <div class="content_main">
      <ContentWrap id="id-baseInfo" title="数据申请信息" description="" :expand-swicth="false">
        <Form ref="baseInfoFormRef" :itemList="baseInfoFormItems" formId="base-info-form" :rules="baseInfoFormRules"
          col="col3" />
      </ContentWrap>
      <!-- 数据申请是数据使用方向提供方发起的申请,没有流程审批 -->
      <!-- <ContentWrap id="id-approveInfo" title="流程审批" expandSwicth style="margin-top: 15px" :isExpand="expandApprove"
        @expand="(v) => expandApprove = v">
        <ApprovalProcess ref="approvalProcessRef" v-if="deploymentId" :deploymentId="deploymentId"
          :processInstanceId="processInstanceId">
        </ApprovalProcess>
      </ContentWrap> -->
    </div>
    <div class="bottom_tool_wrap">
      <el-button @click="cancel">取消</el-button>
      <el-button @click="save" v-preReClick>保存</el-button>
      <el-button type="primary" @click="submit" v-preReClick>提交审批</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup name="productApplicationEdit">
import {
  getTdsRegisterCatalogDetail,
  updateDataApply
} from "@/api/modules/dataAsset";
import useUserStore from "@/store/modules/user";
import useDataProductApplicationStore from "@/store/modules/productApplication";
import { saveDataApply, getDataApplyDetail } from "@/api/modules/dataAsset";
import { useValidator } from '@/hooks/useValidator';
const { required } = useValidator();

const { proxy } = getCurrentInstance() as any;

const userStore = useUserStore();
const productApplicationStore = useDataProductApplicationStore();
const route = useRoute();
const router = useRouter();
const userData = JSON.parse(localStorage.userData);
const fullPath = route.fullPath;

const fullscreenLoading = ref(false);

const baseInfoFormRef = ref();

const baseInfoFormItems = ref([{
  label: '产品名称',
  type: 'label',
  field: 'damName',
  col: 'link',
  default: '-',
  click: () => {
    router.push({
      name: 'productSortCatalogDetail',
      query: {
        guid: route.query.damGuid, // 产品GUID
        type: 'detail', // 查看类型
        foundMode: 'tdsUse', // 发现模式
        name: route.query.damName, // 产品名称
      }
    });
  }
},
{
  label: '产品编码',
  type: 'input',
  placeholder: '请输入',
  field: 'productCode',
  default: '-',
  disabled: true
},
{
  label: '产品类型',
  type: 'input',
  placeholder: '请输入',
  field: 'damTypeName',
  default: '-',
  disabled: true
},
{
  label: "预计使用期限",
  type: "date-picker",
  format: 'YYYY-MM-DD',
  valueFormat: 'YYYY-MM-DD',
  field: "expirationRange",
  default: null,
  placeholder: "开始时间~结束时间",
  clearable: true,
  disabledDate: (date) => {
    const today = new Date();
    // 将 today 设置为 00:00:00,只比较日期部分(本地时间)
    const todayStart = new Date(
      today.getFullYear(),
      today.getMonth(),
      today.getDate()
    );

    // 将 date 也转换为本地日期的开始时间(避免 UTC 问题)
    const dateStart = new Date(
      date.getFullYear(),
      date.getMonth(),
      date.getDate()
    );

    // 禁用 dateStart < todayStart 的日期(即今天之前)
    return dateStart.getTime() < todayStart.getTime();
  },
  required: true,
},
{
  label: "数据范围",
  type: "date-picker",
  format: 'YYYY-MM-DD',
  valueFormat: 'YYYY-MM-DD',
  field: "dataRange",
  default: null,
  placeholder: "开始时间~结束时间",
  clearable: true,
  required: true,
},
{
  label: '产品发布机构',
  type: 'input',
  placeholder: '请输入',
  field: 'issuingName',
  default: '',
  disabled: true
},
{
  label: '数据粒度说明',
  type: 'textarea',
  placeholder: '请输入需要的需求字段',
  field: 'dataGranularityDescription',
  default: '',
  block: true,
  maxlength: 500,
  clearable: true,
  required: true,
},
{
  label: '使用场景描述',
  type: 'textarea',
  placeholder: '请输入使用该数据产品的场景描述信息',
  field: 'useScenarioDescription',
  default: '',
  block: true,
  maxlength: 500,
  clearable: true,
  required: true,
},
])

const baseInfoFormRules = ref({
  expirationRange: [{
    type: 'array', required: true, message: '请选择预计使用期限', trigger: 'change',
  }],
  dataRange: [{
    type: 'array', required: true, message: '请选择数据范围', trigger: 'change',
  }],
  dataGranularityDescription: [required('请输入数据粒度说明')],
  useScenarioDescription: [required('请输入使用场景描述')]
})

const cancel = () => {
  proxy.$openMessageBox("当前页面尚未保存,确定放弃修改吗?", () => {
    userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
    router.push({
      name: 'productApplicationManage'
    });
  }, () => {
    proxy.$ElMessage.info("已取消");
  });
}

const getSubmitParams = (isSubmit = false) => {
  let formInline = baseInfoFormRef.value.formInline;
  let params: any = {
    ...formInline,
    isSubmit: isSubmit ? 'Y' : 'N',
    damGuid: route.query.damGuid || detailInfo.value.damGuid,
    damName: route.query.damName || detailInfo.value.damName,
    productCode: productDetail.value.productCode || detailInfo.value.productCode,
    damType: productDetail.value.damType || detailInfo.value.damType,
    issuingGuid: productDetail.value.rightMain || detailInfo.value.issuingGuid,
  }
  if (params.expirationRange?.length) {
    params.expirationStartDate = params.expirationRange[0];
    params.expirationEndDate = params.expirationRange[1];
  }
  delete params.expirationRange;
  if (params.dataRange?.length) {
    params.startDataRange = params.dataRange[0];
    params.endDataRange = params.dataRange[1];
  }
  delete params.dataRange;
  return params;
}

const save = () => {
  // 保存不检验。
  let submitParams = getSubmitParams(false);
  if (route.query.guid) {
    fullscreenLoading.value = true;
    submitParams.guid = route.query.guid;
    updateDataApply(submitParams).then((res: any) => {
      fullscreenLoading.value = false;
      if (res?.code == proxy.$passCode) {
        proxy.$ElMessage.success('编辑保存成功');
        userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
        productApplicationStore.setIsRefresh(true);
        router.push({
          name: "productApplicationManage",
        });
      } else {
        res?.msg && proxy.$ElMessage.error(res.msg);
      }
    })
  } else {
    fullscreenLoading.value = true;
    saveDataApply(submitParams).then((res: any) => {
      fullscreenLoading.value = false;
      if (res?.code == proxy.$passCode) {
        proxy.$ElMessage.success('保存成功');
        userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
        productApplicationStore.setIsRefresh(true);
        router.push({
          name: "productApplicationManage",
        });
      } else {
        res?.msg && proxy.$ElMessage.error(res.msg);
      }
    })
  }
}

const submit = () => {
  baseInfoFormRef.value?.ruleFormRef?.validate().then((valid, errorItem) => {
    if (valid) {
      let submitParams = getSubmitParams(true);
      if (route.query.guid) {
        fullscreenLoading.value = true;
        submitParams.guid = route.query.guid;
        updateDataApply(submitParams).then((res: any) => {
          fullscreenLoading.value = false;
          if (res?.code == proxy.$passCode) {
            proxy.$ElMessage.success('编辑提交审批成功');
            userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
            productApplicationStore.setIsRefresh(true);
            router.push({
              name: "productApplicationManage",
            });
          } else {
            res?.msg && proxy.$ElMessage.error(res.msg);
          }
        })
      } else {
        fullscreenLoading.value = true;
        saveDataApply(submitParams).then((res: any) => {
          fullscreenLoading.value = false;
          if (res?.code == proxy.$passCode) {
            proxy.$ElMessage.success('提交审批成功');
            userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
            productApplicationStore.setIsRefresh(true);
            router.push({
              name: "productApplicationManage",
            });
          } else {
            res?.msg && proxy.$ElMessage.error(res.msg);
          }
        })
      }
    } else {
      var obj = Object.keys(errorItem);
      baseInfoFormRef.value.ruleFormRef.scrollToField(obj[0]);
    }
  })
}

onMounted(() => {
})

onActivated(() => {
  let tab: any = userStore.tabbar.find((tab: any) => tab.fullPath == fullPath);
  let name = route.query.damName;
  if (route.query.guid) {
    tab.meta.title = `数据申请编辑-${name}`;
  } else {
    tab.meta.title = `新增数据申请-${name}`;
  }
  document.title = tab.meta.title;
})

/** 产品详情 */
const productDetail: any = ref({});

/** 数据申请详情 */
const detailInfo: any = ref({});

onBeforeMount(() => {
  if (route.query.guid) {
    fullscreenLoading.value = true;
    getDataApplyDetail(route.query.guid).then((res: any) => {
      fullscreenLoading.value = false;
      if (res?.code == proxy.$passCode) {
        detailInfo.value = res.data || {};
        baseInfoFormItems.value.forEach((item: any) => {
          item.default = detailInfo.value[item.field];
          if (item.field == 'expirationRange') {
            item.default = detailInfo.value.expirationStartDate ? [detailInfo.value.expirationStartDate, detailInfo.value.expirationEndDate] : null;
          } else if (item.field == 'dataRange') {
            item.default = detailInfo.value.startDataRange ? [detailInfo.value.startDataRange, detailInfo.value.endDataRange] : null;
          }
        })
        nextTick(() => {
          const body = document.body;
          const clickEvent = new MouseEvent('click', {
            bubbles: true,
            cancelable: true,
            view: window
          });
          body.dispatchEvent(clickEvent);
        })
      } else {
        res?.msg && proxy.$ElMessage.error(res.msg);
      }
    })
  } else {
    fullscreenLoading.value = true;
    getTdsRegisterCatalogDetail(route.query.damGuid).then((res: any) => {
      fullscreenLoading.value = false;
      if (res?.code == proxy.$passCode) {
        let detail = productDetail.value = res.data || {};
        baseInfoFormItems.value[0].default = <string>route.query.damName;
        baseInfoFormItems.value[1].default = detail.productCode;
        baseInfoFormItems.value[2].default = detail.damTypeName;
        let issuingNameItem = baseInfoFormItems.value.find(item => item.field == 'issuingName');
        issuingNameItem && (issuingNameItem.default = detail.rightMainName || '--');
      } else {
        res?.msg && proxy.$ElMessage.error(res.msg);
      }
    })
  }
})

</script>

<style lang="scss" scoped>
.content_main {
  height: calc(100% - 40px);
  padding: 16px;
  overflow: hidden auto;
  position: sticky;
}

.bottom_tool_wrap {
  height: 40px;
  padding: 0 16px;
  border-top: 1px solid #d9d9d9;
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.el-form) {
  .link {
    color: var(--el-color-primary);
    cursor: pointer;
    line-height: 32px;
  }
}
</style>