zouyu
17 小时以前 32f10392ab00b07e85c0b4229037c30af7c3f28e
src/views/collaborativeApproval/approvalProcess/components/approvalDia.vue
@@ -1,78 +1,78 @@
<template>
  <div>
    <el-dialog
      v-model="dialogFormVisible"
      :title="operationType === 'add' ? '新增审批流程' : '编辑审批流程'"
      width="700px"
      @close="closeDia"
        v-model="dialogFormVisible"
        :title="operationType === 'add' ? '新增审批流程' : '编辑审批流程'"
        width="700px"
        @close="closeDia"
    >
         <el-form :model="form" label-width="140px" label-position="top" ref="formRef">
            <el-row>
               <el-col :span="24">
                  <el-form-item label="流程编号:" prop="approveId">
                     <el-input v-model="form.approveId" placeholder="自动编号" clearable disabled/>
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row>
               <el-col :span="24">
                  <el-form-item label="申请部门:" prop="approveDeptId">
                     <el-select
                        disabled
                        v-model="form.approveDeptId"
                        placeholder="选择部门"
                     >
                        <el-option
                           v-for="user in productOptions"
                           :key="user.deptId"
                           :label="user.deptName"
                           :value="user.deptId"
                        />
                     </el-select>
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row v-if="!isQuotationApproval">
               <el-col :span="24">
                  <el-form-item label="审批事由:" prop="approveReason">
                     <el-input v-model="form.approveReason" placeholder="请输入" clearable type="textarea" disabled/>
                  </el-form-item>
               </el-col>
            </el-row>
            <!-- 审批人选择(动态节点) -->
            <el-row :gutter="30">
               <el-col :span="12">
                  <el-form-item label="申请人:" prop="approveUser">
                     <el-select
                        v-model="form.approveUser"
                        placeholder="选择人员"
                        disabled
                     >
                        <el-option
                           v-for="user in userList"
                           :key="user.userId"
                           :label="user.nickName"
                           :value="user.userId"
                        />
                     </el-select>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="申请日期:" prop="approveTime">
                     <el-date-picker
                        v-model="form.approveTime"
                        type="date"
                        placeholder="请选择日期"
                        value-format="YYYY-MM-DD"
                        format="YYYY-MM-DD"
                        clearable
                        style="width: 100%"
                        disabled
                     />
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>
      <el-form :model="form" :rules="rules" label-width="140px" label-position="top" ref="formRef">
        <el-row>
          <el-col :span="24">
            <el-form-item label="流程编号:" prop="approveId">
              <el-input v-model="form.approveId" placeholder="自动编号" clearable disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="申请部门:" prop="approveDeptId">
              <el-select
                  disabled
                  v-model="form.approveDeptId"
                  placeholder="选择部门"
              >
                <el-option
                    v-for="user in productOptions"
                    :key="user.deptId"
                    :label="user.deptName"
                    :value="user.deptId"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="!isQuotationApproval">
          <el-col :span="24">
            <el-form-item label="审批事由:" prop="approveReason">
              <el-input v-model="form.approveReason" placeholder="请输入" clearable type="textarea" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 审批人选择(动态节点) -->
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="申请人:" prop="approveUser">
              <el-select
                  v-model="form.approveUser"
                  placeholder="选择人员"
                  disabled
              >
                <el-option
                    v-for="user in userList"
                    :key="user.userId"
                    :label="user.nickName"
                    :value="user.userId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请日期:" prop="approveTime">
              <el-date-picker
                  v-model="form.approveTime"
                  type="date"
                  placeholder="请选择日期"
                  value-format="YYYY-MM-DD"
                  format="YYYY-MM-DD"
                  clearable
                  style="width: 100%"
                  disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 报价审批:展示报价详情(复用销售报价“查看详情对话框”内容结构) -->
      <div v-if="isQuotationApproval" style="margin: 10px 0 18px;">
@@ -124,19 +124,19 @@
      <el-form :model="{ activities }" ref="formRef" label-position="top">
        <el-steps :active="getActiveStep()" finish-status="success" process-status="process" align-center direction="vertical">
          <el-step
            v-for="(activity, index) in activities"
            :key="index"
                  finish-status="success"
            :title="getNodeTitle(index, activities.length)"
            :description="activity.approveNodeUser"
            :icon="getNodeIcon(activity, index)"
              v-for="(activity, index) in activities"
              :key="index"
              finish-status="success"
              :title="getNodeTitle(index, activities.length)"
              :description="activity.approveNodeUser"
              :icon="getNodeIcon(activity, index)"
          >
                  <template #icon>
                     <el-icon v-if="activity.approveNodeStatus === 2" color="red" :size="22"><WarningFilled /></el-icon>
                     <el-icon v-else-if="activity.isShen" color="#1890ff" :size="22"><Edit /></el-icon>
                     <el-icon v-else-if="activity.approveNodeStatus === 1" color="#67C23A" :size="26"><Check /></el-icon>
                     <el-icon v-else color="#C0C4CC" :size="22"><MoreFilled /></el-icon>
                  </template>
            <template #icon>
              <el-icon v-if="activity.approveNodeStatus === 2" color="red" :size="22"><WarningFilled /></el-icon>
              <el-icon v-else-if="activity.isShen" color="#1890ff" :size="22"><Edit /></el-icon>
              <el-icon v-else-if="activity.approveNodeStatus === 1" color="#67C23A" :size="26"><Check /></el-icon>
              <el-icon v-else color="#C0C4CC" :size="22"><MoreFilled /></el-icon>
            </template>
            <template #title>
              <span style="color: #000000">{{ getNodeTitle(index, activities.length) }}</span>
            </template>
@@ -152,12 +152,12 @@
              </div>
              <div v-if="!activity.isShen" class="node-reason">
                <span>签名:</span>
                        <img :src="activity.urlTem" class="signImg" alt="" v-if="activity.urlTem"/>
                <img :src="activity.urlTem" class="signImg" alt="" v-if="activity.urlTem"/>
              </div>
              <div v-else-if="activity.isShen">
                <el-form-item
                  :prop="'activities.' + index + '.approveNodeReason'"
                  :rules="[{ required: true, message: '审批意见不能为空', trigger: 'blur' }]"
                    :prop="'activities.' + index + '.approveNodeReason'"
                    :rules="[{ required: true, message: '审批意见不能为空', trigger: 'blur' }]"
                >
                  <el-input v-model="activity.approveNodeReason" clearable type="textarea" :disabled="operationType === 'view'"></el-input>
                </el-form-item>
@@ -180,9 +180,9 @@
<script setup>
import { computed, getCurrentInstance, reactive, ref, toRefs } from "vue";
import {
   approveProcessDetails,
   getDept,
   updateApproveNode
  approveProcessDetails,
  getDept,
  updateApproveNode
} from "@/api/collaborativeApproval/approvalProcess.js";
import useUserStore from "@/store/modules/user.js";
import {userListNoPageByTenantId} from "@/api/system/user.js";
@@ -210,16 +210,20 @@
const isQuotationApproval = computed(() => Number(props.approveType) === 6)
const data = reactive({
   form: {
      approveTime: "",
      approveId: "",
      approveUser: "",
      approveDeptId: "",
      approveReason: "",
      checkResult: "",
   },
  form: {
    approveTime: "",
    approveId: "",
    approveUser: "",
    approveDeptId: "",
    approveReason: "",
    checkResult: "",
  },
  rules: {
    // 使用部门ID做必填校验,避免名称未同步导致误报
    approveDeptId: [{ required: true, message: "请选择申请部门", trigger: "change" }],
  },
});
const { form } = toRefs(data);
const { form, rules } = toRefs(data);
// 节点标题
const getNodeTitle = (index, len) => {
@@ -247,11 +251,11 @@
  operationType.value = type;
  dialogFormVisible.value = true;
  currentQuotation.value = {}
   userListNoPageByTenantId().then((res) => {
      userList.value = res.data;
   });
   form.value = {...row}
   getProductOptions()
  userListNoPageByTenantId().then((res) => {
    userList.value = res.data;
  });
  form.value = {...row}
  getProductOptions()
  // 报价审批:用审批事由字段承载的“报价单号”去查报价列表
  if (isQuotationApproval.value) {
@@ -271,11 +275,11 @@
    activities.value = res.data
    // 增加isApproval字段
    activities.value.forEach(item => {
         if (item.url && item.url.includes('word')) {
            item.urlTem = item.url.replaceAll('word', 'img')
         } else {
            item.urlTem = item.url
         }
      if (item.url && item.url.includes('word')) {
        item.urlTem = item.url.replaceAll('word', 'img')
      } else {
        item.urlTem = item.url
      }
      if (item.approveNodeStatus === 2) {
        item.isApproval = '已驳回';
      } else if (item.approveNodeStatus === 1) {
@@ -287,9 +291,9 @@
  })
}
const getProductOptions = () => {
   getDept().then((res) => {
      productOptions.value = res.data;
   });
  getDept().then((res) => {
    productOptions.value = res.data;
  });
};
// 提交审批
const submitForm = (status) => {
@@ -336,14 +340,14 @@
  margin: 10px 0;
}
.user-avatar {
   cursor: pointer;
   width: 30px;
   height: 30px;
   border-radius: 50px;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50px;
}
.signImg {
   cursor: pointer;
   width: 200px;
   height: 60px;
  cursor: pointer;
  width: 200px;
  height: 60px;
}
</style>
</style>