| | |
| | | :title="titleEnum[dialogMode]" |
| | | @closed="visible = false" |
| | | destroy-on-close |
| | | :close-on-click-modal="false" |
| | | > |
| | | <div class="detail-container" v-if="dialogReadonly"> |
| | | <el-row> |
| | | <el-row class="detail-row-view supplyAddLabel"> |
| | | <el-col :span="12"> |
| | | <div class="label">需求名称</div> |
| | | <div class="val">{{ formData.demandName }}</div> |
| | |
| | | <div class="label">数据来源依据</div> |
| | | <div class="val">{{ formData.dataSource }}</div> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <el-col :span="12"> |
| | | <div class="label">需求信息项</div> |
| | | <div class="val">{{ formData.demandInfo }}</div> |
| | | </el-col> |
| | |
| | | :model="formData" |
| | | :rules="rules" |
| | | :disabled="dialogReadonly" |
| | | label-width="120px" |
| | | :label-width="pxToRem(190)" |
| | | > |
| | | <el-row> |
| | | <el-col :span="12"> |
| | |
| | | <el-input class="gd-input" v-model="formData.dataSource" placeholder="请输入" clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="需求信息项" prop="demandInfo"> |
| | | <el-input |
| | | class="gd-input" |
| | | v-model="formData.demandInfo" |
| | | type="textarea" |
| | | :rows="4" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <template #footer> |
| | | <el-button color="#F2F3F5" @click="visible = false">{{ dialogReadonly ? '关闭' : '取消' }}</el-button> |
| | | <template #footer v-if="!dialogReadonly"> |
| | | <el-button |
| | | class="save-btn" |
| | | color="#4C34FF" |
| | | v-if="!dialogReadonly" |
| | | color="#F2F3F5" |
| | | :loading="submitting" |
| | | :disabled="submitting" |
| | | @click="handleSubmit" |
| | | > |
| | | 保存 |
| | | </el-button> |
| | | <el-button color="#4C34FF" :loading="submitting" :disabled="submitting" @click="handleApply" >申请</el-button> |
| | | |
| | | </template> |
| | | |
| | | <!-- 申请弹框 --> |
| | | <el-dialog |
| | | class="gd-dialog" |
| | | v-model="showApplyDialog" |
| | | title="申请" |
| | | @closed="handleApplyDialogClosed" |
| | | width="500px" |
| | | destroy-on-close |
| | | :close-on-click-modal="false" |
| | | > |
| | | <el-form class="gd-dialog-form" ref="applyFormRef" :model="applyFormData" :rules="applyRules"> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item label="申请对象部门" prop="applyTargetDeptId"> |
| | | <el-tree-select |
| | | class="gd-select" |
| | | popper-class="gd-tree-select-popper" |
| | | v-model="applyFormData.applyTargetDeptId" |
| | | node-key="id" |
| | | :data="deptTree" |
| | | :props="treeProps" |
| | | check-strictly |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <template #footer> |
| | | <el-button color="#F2F3F5" @click="showApplyDialog = false">取消</el-button> |
| | | <el-button class="" color="#4C34FF" :loading="applying" :disabled="applying" @click="handleApplySubmit"> |
| | | 确认 |
| | | </el-button> |
| | | </template> |
| | | </el-dialog> |
| | | </el-dialog> |
| | | </template> |
| | | |
| | |
| | | gdSupplyDemandDetailApi, |
| | | gdSupplyDemandSubmitApi, |
| | | } from '@/views/orderView/orderDataManage/supplyAdd/supplyAddApi' |
| | | import { pxToRem } from '@/utils/rem' |
| | | |
| | | // 初始化表单数据 |
| | | const initForm = () => ({ |
| | |
| | | responsibleDeptId: '', |
| | | dataSource: '', |
| | | demandInfo: '', |
| | | demandStatus: '0' |
| | | }) |
| | | |
| | | const dictObj = inject('dictObj') |
| | |
| | | const submitting = ref(false) // 提交中 |
| | | const dialogReadonly = computed(() => dialogMode.value === 'view') |
| | | const titleEnum = ref({ edit: '编辑', view: '查看', add: '新增' }) |
| | | |
| | | // 申请弹框相关 |
| | | const showApplyDialog = ref(false) |
| | | const applyFormRef = ref(null) |
| | | const applying = ref(false) |
| | | const applyFormData = ref({ |
| | | applyTargetDeptId: '' |
| | | }) |
| | | |
| | | const rules = { |
| | | demandName: fieldRules(true), |
| | |
| | | demandInfo: fieldRules(true), |
| | | } |
| | | |
| | | // 申请弹框校验规则 |
| | | const applyRules = { |
| | | applyTargetDeptId: fieldRules(true), |
| | | } |
| | | // 根据部门ID获取部门名称 |
| | | function getDeptNameById(deptId, deptList) { |
| | | // 处理类型转换,确保比较的是相同类型 |
| | | const targetId = String(deptId) |
| | | |
| | | // 递归遍历部门树 |
| | | function findDept(deptList) { |
| | | for (const dept of deptList) { |
| | | if (String(dept.id) === targetId) { |
| | | return dept.name |
| | | } |
| | | if (Array.isArray(dept.children) && dept.children.length > 0) { |
| | | const name = findDept(dept.children) |
| | | if (name) return name |
| | | } |
| | | } |
| | | return '' |
| | | } |
| | | |
| | | if (!targetId || !Array.isArray(deptList) || deptList.length === 0) { |
| | | return '' |
| | | } |
| | | |
| | | return findDept(deptList) |
| | | } |
| | | // 提交新增/编辑 |
| | | async function handleSubmit() { |
| | | const isValid = await formRef.value?.validate().catch(() => false) |
| | | if (!isValid) return |
| | | submitting.value = true |
| | | try { |
| | | formData.value.demandStatus = '0' |
| | | await gdSupplyDemandSubmitApi(formData.value) |
| | | ElMessage.success(dialogMode.value === 'add' ? '新增成功' : '更新成功') |
| | | visible.value = false |
| | |
| | | } |
| | | } |
| | | |
| | | // 申请弹框关闭处理 |
| | | function handleApplyDialogClosed() { |
| | | applyFormData.value.applyTargetDeptId = '' |
| | | } |
| | | // 申请 |
| | | async function handleApply() { |
| | | // 先验证主表单 |
| | | const mainFormValid = await formRef.value?.validate().catch(() => false) |
| | | if (!mainFormValid) return |
| | | |
| | | showApplyDialog.value = true |
| | | } |
| | | // 申请提交 |
| | | async function handleApplySubmit() { |
| | | const isValid = await applyFormRef.value?.validate().catch(() => false) |
| | | if (!isValid) return |
| | | applying.value = true |
| | | try { |
| | | // 构建申请数据 |
| | | const applyData = { |
| | | ...formData.value, |
| | | demandStatus: '1', |
| | | applyTargetDeptId: applyFormData.value.applyTargetDeptId |
| | | } |
| | | await gdSupplyDemandSubmitApi(applyData) |
| | | ElMessage.success('申请成功') |
| | | showApplyDialog.value = false |
| | | visible.value = false |
| | | emit('success') |
| | | } finally { |
| | | applying.value = false |
| | | } |
| | | } |
| | | |
| | | // 加载详情 |
| | | async function loadDetail() { |
| | | if (!formData.value.id) return |
| | | const res = await gdSupplyDemandDetailApi({ id: formData.value.id }) |
| | | formData.value = res?.data?.data ?? {} |
| | | const data = res?.data?.data ?? {} |
| | | // 如果没有部门名称,根据部门ID从部门树中获取 |
| | | if (data.responsibleDeptId && !data.responsibleDeptName) { |
| | | data.responsibleDeptName = getDeptNameById(data.responsibleDeptId, deptTree.value) |
| | | } |
| | | formData.value = data |
| | | } |
| | | |
| | | // 打开弹框 |
| | |
| | | |
| | | defineExpose({ open }) |
| | | </script> |
| | | <style scoped lang="scss"> |
| | | .supplyAddLabel { |
| | | .label { |
| | | width: 120px !important; |
| | | } |
| | | } |
| | | </style> |