hejianhao
2025-05-09 d318b6560809de28df846a1306408f1599289db1
laboratory/src/views/dataManagement/approvalPlan/components/approvalDialog.vue
@@ -25,14 +25,30 @@
              label-position="top"
              style="margin-top: 38px"
            >
              <el-form-item prop="name" label="项目课题方案名称">
                <el-input v-model="form.name" placeholder="请输入" />
              <el-form-item prop="projectName" label="项目课题方案名称">
                <el-input
                  v-model="form.projectName"
                  placeholder="请输入"
                  disabled
                />
              </el-form-item>
              <el-form-item prop="description" label="项目阶段">
                <el-input v-model="form.description" placeholder="请输入" />
              <el-form-item prop="projectStage" label="项目阶段">
                <el-select
                  v-model="form.projectStage"
                  placeholder="请选择"
                  disabled
                >
                  <el-option label="实验室开发阶段" :value="1" />
                  <el-option label="中式试验阶段" :value="2" />
                  <el-option label="生产验证试验阶段" :value="3" />
                </el-select>
              </el-form-item>
              <el-form-item prop="description" label="项目课题方案编号">
                <el-input v-model="form.description" placeholder="请输入" />
              <el-form-item prop="projectCode" label="项目课题方案编号">
                <el-input
                  v-model="form.projectCode"
                  placeholder="请输入"
                  disabled
                />
              </el-form-item>
            </el-form>
            <div class="header-title">
@@ -41,6 +57,12 @@
                <div>一 、实验目的</div>
              </div>
            </div>
            <AiEditor
              ref="purposeEditor"
              :value="form.experimentObjective"
              height="200px"
              :readOnly="true"
            />
            <div class="header-title">
              <div class="header-title-left">
                <img src="@/assets/public/headercard.png" />
@@ -50,57 +72,92 @@
            <div class="item-title">
              <span>1.实验材料</span>
            </div>
            <AiEditor
              ref="materialEditor"
              :value="form.experimentMaterial"
              height="200px"
              :readOnly="true"
            />
            <div class="item-title">
              <span>2.实验设备</span>
            </div>
            <AiEditor
              ref="equipmentEditor"
              :value="form.experimentDevice"
              height="200px"
              :readOnly="true"
            />
            <div class="header-title">
              <div class="header-title-left">
                <img src="@/assets/public/headercard.png" />
                <div>三 、检测方法及开发</div>
              </div>
            </div>
            <AiEditor
              ref="methodEditor"
              :value="form.experimentTestMethod"
              height="200px"
              :readOnly="true"
            />
            <div class="header-title">
              <div class="header-title-left">
                <img src="@/assets/public/headercard.png" />
                <div>四 、实验步骤</div>
              </div>
            </div>
            <AiEditor
              ref="stepsEditor"
              :value="form.experimentProcedure"
              height="200px"
              :readOnly="true"
            />
            <div class="header-title">
              <div class="header-title-left">
                <img src="@/assets/public/headercard.png" />
                <div>五 、数据采集及分析</div>
              </div>
            </div>
            <AiEditor
              ref="dataAnalysisEditor"
              :value="form.dataAcquisition"
              height="200px"
              :readOnly="true"
            />
            <div class="header-title">
              <div class="header-title-left">
                <img src="@/assets/public/headercard.png" />
                <div>六 、结果评估</div>
              </div>
            </div>
            <AiEditor
              ref="evaluationEditor"
              :value="form.resultEvaluation"
              height="200px"
              :readOnly="true"
            />
            <div class="header-title">
              <div class="header-title-left">
                <img src="@/assets/public/headercard.png" />
                <span>注意事项</span>
              </div>
            </div>
            <AiEditor
              ref="notesEditor"
              :value="form.precautions"
              height="200px"
              :readOnly="true"
            />
          </template>
          <SelectMember ref="selectMember" />
        </Card>
      </div>
      <!-- 右侧审批流程 -->
      <div class="approval-flow">
        <div class="flow-content">
          <approval-process
            :status="form.status"
            :submit-time="form.createTime"
            :approver="form.approver"
            :approve-time="form.approveTime"
          />
          <approval-process :processData="form.processData" />
        </div>
      </div>
    </div>
    <div class="approval-dialog-approve">
    <div class="approval-dialog-approve" v-if="type === 'approve'">
      <div class="status">
        <div class="status-title">审批结果</div>
        <div class="status-content">
@@ -122,12 +179,20 @@
      </div>
      <div class="remark">
        <div class="remark-title">审批意见</div>
        <el-input type="textarea" v-model="remark" placeholder="请输入审批意见"   />
        <el-input
          type="textarea"
          v-model="remark"
          placeholder="请输入审批意见"
        />
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleApprove" v-if="type === 'approve'"
      <el-button
        type="primary"
        style="margin-left: 20px"
        @click="handleApprove"
        v-if="type === 'approve'"
        >通过</el-button
      >
    </div>
@@ -135,12 +200,15 @@
</template>
<script>
import ApprovalProcess from '@/components/approvalProcess'
import ApprovalProcess from "@/components/approvalProcess";
import { getDetailById, audit } from "../service";
import AiEditor from "@/components/AiEditor";
export default {
  name: "ApprovalDialog",
  components: {
    ApprovalProcess
    ApprovalProcess,
    AiEditor,
  },
  props: {
    visible: {
@@ -159,17 +227,23 @@
  data() {
    return {
      form: {
        planName: "",
        planCode: "",
        stage: "",
        creator: "",
        projectName: "",
        projectCode: "",
        projectStage: "",
        experimentObjective: "",
        experimentMaterial: "",
        experimentDevice: "",
        experimentTestMethod: "",
        experimentProcedure: "",
        dataAcquisition: "",
        resultEvaluation: "",
        precautions: "",
        auditStatus: "",
        createTime: "",
        approvalComment: "",
        status: "pending",
        approver: "",
        approveTime: ""
        approveTime: "",
        processData: [],
      },
      radio1: 1,
      rules: {},
      status: "1",
      remark: "",
@@ -181,39 +255,112 @@
    },
  },
  watch: {
    data: {
    visible: {
      handler(val) {
        if (val) {
          this.form = { ...val };
        console.log("visible", val, "22", this.data);
        if (val && this.data && this.data.id) {
          this.getDetail(this.data.id);
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 获取详情
    getDetail(id) {
      console.log("获取详情参数:", { id });
      getDetailById({ id })
        .then((res) => {
          console.log("获取详情:", res);
          if (res) {
            this.form = { ...res, processData: [] };
            // 组装流程数据
            let processData = [];
            // 提交节点
            processData.push({
              type: "primary",
              mode: "list",
              fields: [
                { label: "提交人:", value: res.updateBy || "" },
                { label: "提交时间:", value: res.createTime || "" },
              ],
            });
            if (res.auditStatus == 2 || res.auditStatus == 3) {
              processData.push({
                type:
                  res.auditStatus === 2
                    ? "primary"
                    : res.auditStatus === 3
                    ? "danger"
                    : "warning",
                mode: "list",
                fields: [
                  {
                    label: "审核结果:",
                    value:
                      res.auditStatus === 2
                        ? "通过"
                        : res.auditStatus === 3
                        ? "驳回"
                        : "待审批",
                  },
                  { label: "审批意见:", value: res.auditRemark || "" },
                  { label: "审核人:", value: res.auditPersonName || "" },
                  { label: "审核时间:", value: res.auditTime || "" },
                ],
              });
            }else{
              processData.push({
                type: "warning",
                mode: "list",
                fields: [
                  { label: "等待审核"},
                ],
              });
            }
            // 如有卡片模式,按前述结构 push
            this.$nextTick(() => {
              this.form.processData = processData;
            })
          }
        })
        .catch((err) => {
          console.error("获取详情失败:", err);
          this.$message.error("获取详情失败");
        });
    },
    handleClose() {
      this.$emit("update:visible", false);
      this.form.approvalComment = "";
      this.remark = "";
      this.status = "1";
    },
    handleApprove() {
      if (!this.form.approvalComment) {
      if (!this.remark) {
        this.$message.warning("请输入审批意见");
        return;
      }
      this.$emit("approve", {
        ...this.form,
        status: "approved",
      });
    },
    handleReject() {
      if (!this.form.approvalComment) {
        this.$message.warning("请输入审批意见");
        return;
      }
      this.$emit("reject", {
        ...this.form,
        status: "rejected",
      });
      const params = {
        id: this.form.id,
        auditStatus: this.status === "1" ? 2 : 3, // 2-已通过,3-已驳回
        auditRemark: this.remark,
      };
      console.log('审批请求参数:', params);
      audit(params)
        .then((res) => {
          console.log('审批返回结果:', res);
          if (res.code === 200) {
            this.$message.success("审批成功");
            this.$emit("update:visible", false);
            this.$emit("success");
          } else {
            this.$message.error(res.msg || "审批失败");
          }
        })
        .catch((err) => {
          console.error("审批失败:", err);
          this.$message.error("审批失败");
        });
    },
  },
};
@@ -391,12 +538,20 @@
  }
}
.dialog-footer{
    align-items: center;
    display: flex;
    justify-content: center;
    button{
        width: 150px;
    }
.dialog-footer {
  align-items: center;
  display: flex;
  justify-content: center;
  button {
    width: 150px;
  }
}
</style>
.content-display {
  padding: 10px 20px;
  min-height: 100px;
  background: #f5f7fa;
  border-radius: 4px;
  margin: 10px 0;
}
</style>