吉安感知网项目-前端
shuishen
2026-02-03 89380e6260a75d1d3b94de687ebcc2f50d50659d
applications/task-work-order/src/views/orderView/orderDataManage/supplyAdd/FormDiaLog.vue
@@ -5,9 +5,10 @@
      :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>
@@ -52,7 +53,7 @@
               <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>
@@ -66,7 +67,7 @@
         :model="formData"
         :rules="rules"
         :disabled="dialogReadonly"
         label-width="120px"
         :label-width="pxToRem(190)"
      >
         <el-row>
            <el-col :span="12">
@@ -172,13 +173,11 @@
                  <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
                  />
@@ -186,19 +185,54 @@
            </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>
@@ -211,6 +245,7 @@
   gdSupplyDemandDetailApi,
   gdSupplyDemandSubmitApi,
} from '@/views/orderView/orderDataManage/supplyAdd/supplyAddApi'
import { pxToRem } from '@/utils/rem'
// 初始化表单数据
const initForm = () => ({
@@ -226,6 +261,7 @@
   responsibleDeptId: '',
   dataSource: '',
   demandInfo: '',
   demandStatus: '0'
})
const dictObj = inject('dictObj')
@@ -240,6 +276,14 @@
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),
@@ -256,12 +300,42 @@
   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
@@ -271,11 +345,50 @@
   }
}
// 申请弹框关闭处理
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
}
// 打开弹框
@@ -289,3 +402,10 @@
defineExpose({ open })
</script>
<style scoped lang="scss">
.supplyAddLabel {
   .label {
      width: 120px !important;
   }
}
</style>