修改弹窗ui和客户反馈

董国庆

8 天以前 0c9660562a03191d44fc779a889d3da0dc624b6d

 laboratory/src/views/dataManagement/schemeManagement/components/approvalDialog.vue

@@ -1,42 +1,39 @@
<template>
  <div>
    <el-dialog
      title="实验方案详情"
      :visible.sync="visible"
      width="80%"
      :close-on-click-modal="false"
      @close="handleClose"
    >
    <el-dialog title="实验方案详情" :visible="dialogVisible" width="90%" top="5vh" :close-on-click-modal="false" @close="handleClose">
      <div class="approval-dialog">
        <!-- 左侧审批内容 -->
        <div class="approval-content">
          <Card class="approval-content-card">
            <template style="position: relative">
              <el-form
                ref="form"
                :model="form"
                :rules="rules"
                inline
                label-position="top"
                :disabled="type === 'view'"
              >
              <el-form ref="form" :model="form" :rules="rules" inline label-position="top">
                <div class="header-title" style="margin-bottom: 38px">
                  <div class="header-title-left">
                    <img src="@/assets/public/headercard.png" />
                    <div>所属实验调度</div>
                  <div style="display: flex; align-items: center; gap: 13px">
                    <div class="header-title-left">
                      <img src="@/assets/public/headercard.png" />
                      <div>所属实验调度</div>
                    </div>
                    <el-button @click="handleStopExperiment" type="danger"
                      v-if='form.status != 2 && form.status != 3 && form.status != 4 && userRole == 3'>
                      申请终止实验</el-button>
                  </div>
                </div>
                <Table :data="groupTableData" :total="0" :height="null">
                  <el-table-column
                    type="index"
                    label="序号"
                    width="80"
                  ></el-table-column>
                  <el-table-column
                    prop="groupName"
                    label="组别"
                  ></el-table-column>
                  <el-table-column prop="remark" label="备注"></el-table-column>
                <Table :data="dispatchData" :total="0" :height="null" class="groupTable">
                  <el-table-column type="index" label="序号" width="80"></el-table-column>
                  <el-table-column prop="projectName" label="所属项目课题方案"></el-table-column>
                  <el-table-column prop="experimentCode" label="实验编号"></el-table-column>
                  <el-table-column prop="experimentName" label="实验名称"></el-table-column>
                  <el-table-column prop="experimentDate" label="通知时间"></el-table-column>
                  <el-table-column prop="experimentStartTime" label="实验开始时间"></el-table-column>
                  <el-table-column prop="experimentEndTime" label="实验结束时间"></el-table-column>
                  <el-table-column prop="participantsName" label="参加人员"></el-table-column>
                  <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">
                      <el-tag :type="getStatusType(scope.row.status)">
                        {{ getStatusText(scope.row.status) }}
                      </el-tag>
                    </template>
                  </el-table-column>
                </Table>

                <div class="header-title" style="margin-bottom: 38px">
@@ -46,72 +43,37 @@
                  </div>
                </div>

                <div class="add-group">
                  <span>组别列表</span>
                </div>
                <Table
                  :data="groupTableData"
                  :total="0"
                  :height="null"
                  class="groupTable"
                >
                  <el-table-column
                    type="index"
                    label="序号"
                    width="80"
                  ></el-table-column>
                  <el-table-column
                    prop="groupName"
                    label="组别"
                  ></el-table-column>
                  <el-table-column prop="remark" label="备注"></el-table-column>
                </Table>
                <template v-if="groupData && groupData.length > 0">
                  <div class="add-group">
                    <span>组别列表</span>
                  </div>
                  <Table :data="groupData" :total="0" :height="null" class="groupTable">
                    <el-table-column type="index" label="序号" width="80"></el-table-column>
                    <el-table-column prop="groupName" label="组别"></el-table-column>
                    <el-table-column prop="remark" label="备注"></el-table-column>
                  </Table>
                </template>

                <div style="padding-left: 25px; margin-top: 20px">
                  <el-form-item prop="testTime" label="试验时间">
                    <el-date-picker
                      v-model="form.testTime"
                      type="datetime"
                      placeholder="选择日期时间"
                      value-format="yyyy-MM-dd HH:mm:ss"
                    />
                <div style="padding-left: 25px;margin-top: 28px;">
                  <el-form-item prop="experimentDate" label="试验日期">
                    <el-date-picker v-model="form.experimentDate" type="datetime" :disabled="true" placeholder="选择日期时间">
                    </el-date-picker>
                  </el-form-item>
                </div>

                <div class="add-group">
                  <div>*</div>
                  <span>实验人员</span>
                </div>
                <div class="member-list">
                  <div v-for="item in 3" :key="item" class="member-list-card">
                  <div class="member-list-card">
                    <div class="member-item">
                      <div class="member-title">
                        {{ ["工艺工程师", "实验员", "化验师"][item - 1] }}
                      </div>
                      <div
                        :class="
                          item == 1 || item == 2 || item == 3
                            ? 'member-name-box'
                            : 'flex1'
                        "
                      >
                        <div
                          :class="
                            item == 1 || item == 2 || item == 3
                              ? 'member-name-box'
                              : 'member-name-box-2'
                          "
                        >
                          <div
                            v-for="i in memberList(item)"
                            :key="i"
                            class="member-name"
                          >
                            张三
                      <div class="member-title">实验员</div>
                      <div class="flex">
                        <div class="member-name-box-2">
                          <div v-for="i in selectedParticipants" :key="i.id" class="member-name">
                            {{ i.nickName }}
                          </div>
                        </div>
                      </div>
                      <div class="member-change" v-if="type !== 'view'">
                        <div class="member-change-btn">修改</div>
                      </div>
                    </div>
                  </div>
@@ -123,12 +85,10 @@
                    <div>一、实验目的</div>
                  </div>
                </div>
                <AiEditor
                  ref="purposeEditor"
                  v-model="form.purpose"
                  height="200px"
                  placeholder="请输入实验目的..."
                />
                <div class="content-box">
                  <AiEditor ref="purposeEditor" :readOnly="true" :value="form.experimentObjective" height="400px"
                    placeholder="请输入实验目的..." />
                </div>

                <div class="header-title" style="margin-bottom: 38px">
                  <div class="header-title-left">
@@ -136,12 +96,10 @@
                    <div>二、工艺参数及路线</div>
                  </div>
                </div>
                <AiEditor
                  ref="processEditor"
                  v-model="form.process"
                  height="200px"
                  placeholder="请输入工艺参数及路线..."
                />
                <div class="content-box">
                  <AiEditor ref="processEditor" :readOnly="true" :value="form.experimentParamRoute" height="400px"
                    placeholder="请输入工艺参数及路线..." />
                </div>

                <div class="header-title" style="margin-bottom: 38px">
                  <div class="header-title-left">
@@ -149,14 +107,10 @@
                    <div>三、实验材料及设备</div>
                  </div>
                </div>
                <ViewDynamicComponent
                  title="实验材料"
                  :components="form.materialsAndEquipment || []"
                />
                <ViewDynamicComponent
                  title="实验所用设备"
                  :components="form.materialsAndEquipment || []"
                />
                <DynamicComponent ref="materialComponent" title="实验材料" :dialogCanEdit="false"
                  :dataSource="form.experimentMaterial" :editable="false" />
                <DynamicComponent ref="equipmentComponent" title="实验所用设备" :dialogCanEdit="false"
                  :dataSource="form.experimentDevice" :editable="false" />

                <div class="header-title" style="margin-bottom: 38px">
                  <div class="header-title-left">
@@ -165,53 +119,44 @@
                  </div>
                </div>

                <div class="step-list" v-for="(item, idx) in form.operationSteps" :key="idx">
                <div class="step-list" v-for="(item, idx) in stepList" :key="idx">
                  <div class="step-list-item">
                    <div class="step-list-item-title">
                      步骤{{ idx + 1 }}：{{ item.stepName }}
                    </div>
                  </div>
                  <ViewDynamicComponent
                    :ref="'stepContent' + idx"
                    :components="[item]"
                  />
                  <DynamicComponent :dialogCanEdit="false" :ref="'stepContent' + idx" :dataSource="item.content"
                    :editable="false" />
                </div>
              </el-form>
            </template>
          </Card>
        </div>
        <!-- 右侧审批流程 -->
        <div class="approval-flow" v-if="type === 'view'">
        <div class="approval-flow" v-if="showApprovalFlow">
          <div class="flow-content">
            <approval-process
              :status="form.status"
              :submit-time="form.createTime"
              :approver="form.approver"
              :approve-time="form.approveTime"
            />
            <approval-process :processData="approvalProcessData" />
          </div>
        </div>
      </div>
    </el-dialog>
    <SignatureCanvas
      :visible="signatureDialogVisible"
      @confirm="handleSignatureConfirm"
    />
    <SignatureCanvas :visible="signatureDialogVisible" @confirm="handleSignatureConfirm" />
  </div>
</template>

<script>
import ApprovalProcess from "@/components/approvalProcess";
import SignatureCanvas from "@/components/SignatureCanvas.vue";
import ViewDynamicComponent from "@/components/DynamicComponent/ViewDynamicComponent.vue";
import AiEditor from "@/components/AiEditor/index.vue";
import DynamicComponent from "@/components/DynamicComponent";
import AiEditor from "@/components/AiEditor";
import { getDetail, getGroupByDispatchId } from "../service";

export default {
  name: "ApprovalDialog",
  components: {
    ApprovalProcess,
    SignatureCanvas,
    ViewDynamicComponent,
    DynamicComponent,
    AiEditor,
  },
  props: {
@@ -230,221 +175,88 @@
  },
  data() {
    return {
      dialogVisible: false,
      form: {
        planName: "",
        planCode: "",
        stage: "",
        testDate: "",
        testName: "",
        testCode: "",
        testTime: "",
        creator: "",
        createTime: "",
        approvalComment: "",
        status: "approved",
        approver: "",
        approveTime: "",
        materialsAndEquipment: [
          {
            id: 1,
            type: "richText",
            data: {
              content:
                "<p>1. 实验材料说明</p><p>2. 设备使用说明</p><p>3. 安全注意事项</p>",
            },
          },
          {
            id: 2,
            type: "customTable",
            data: {
              headers: [
                { name: "材料名称", type: "text" },
                { name: "规格", type: "text" },
                { name: "数量", type: "text" },
                { name: "用途", type: "text" },
              ],
              rows: [
                {
                  材料名称: "催化剂A",
                  规格: "工业级",
                  数量: "100g",
                  用途: "反应催化剂",
                  updateTime: "2024-01-01 12:00:00",
                },
                {
                  材料名称: "溶剂B",
                  规格: "分析纯",
                  数量: "500ml",
                  用途: "反应溶剂",
                  updateTime: "2024-01-01 12:00:00",
                },
              ],
            },
          },
          {
            id: 3,
            type: "fileUpload",
            data: {
              fileList: [
                {
                  name: "材料安全说明书.pdf",
                  url: "https://example.com/msds.pdf",
                },
                {
                  name: "设备操作手册.docx",
                  url: "https://example.com/manual.docx",
                },
              ],
            },
          },
          {
            id: 4,
            type: "imageGallery",
            data: {
              images: [
                {
                  url: "https://example.com/equipment1.jpg",
                  title: "实验设备1",
                  description: "主要反应设备",
                },
                {
                  url: "https://example.com/equipment2.jpg",
                  title: "实验设备2",
                  description: "辅助设备",
                },
              ],
            },
          },
        ],
        operationSteps: [
          {
            id: 7,
            type: "richText",
            data: {
              content:
                "<p>1. 准备工作</p><p>2. 设备检查</p><p>3. 实验操作</p><p>4. 数据记录</p>",
            },
          },
          {
            id: 8,
            type: "customTable",
            data: {
              headers: [
                { name: "步骤", type: "text" },
                { name: "操作内容", type: "text" },
                { name: "操作人", type: "user" },
                { name: "操作图片", type: "image" },
              ],
              rows: [
                {
                  步骤: "步骤1",
                  操作内容: "称取催化剂",
                  操作人: ["1"],
                  操作图片: [{ url: "https://example.com/step1.jpg" }],
                  updateTime: "2024-01-01 12:00:00",
                },
                {
                  步骤: "步骤2",
                  操作内容: "加入溶剂",
                  操作人: ["2"],
                  操作图片: [{ url: "https://example.com/step2.jpg" }],
                  updateTime: "2024-01-01 12:00:00",
                },
              ],
            },
          },
        ],
        projectName: "", // 项目课题方案名称
        projectCode: "", // 项目课题方案编号
        experimentCode: "", // 实验编号
        experimentName: "", // 实验名称
        experimentDate: "", // 实验日期
        experimentMaterial: [], // 实验材料
        experimentDevice: [], // 实验设备
        experimentObjective: "", // 实验目的
        experimentParamRoute: "", // 工艺参数及路线
        createBy: "", // 创建人
        createTime: "", // 创建时间
        status: "", // 状态
        approver: "", // 审批人
        approveTime: "", // 审批时间
      },
      rules: {
        planName: [
          {
            required: true,
            message: "请输入项目课题方案名称",
            trigger: "blur",
          },
        ],
        planCode: [
          {
            required: true,
            message: "请输入项目课题方案编号",
            trigger: "blur",
          },
        ],
        stage: [{ required: true, message: "请输入项目阶段", trigger: "blur" }],
        testDate: [
          { required: true, message: "请选择试验日期", trigger: "change" },
        ],
        testName: [
          { required: true, message: "请输入实验名称", trigger: "blur" },
        ],
        testCode: [
          { required: true, message: "请输入实验编号", trigger: "blur" },
        ],
        testTime: [
          { required: true, message: "请选择试验时间", trigger: "change" },
        ],
      },
      imgSrc: "",
      signatureDialogVisible: false,
      status: "1",
      remark: "",
      groupTableData: [],
      taskTableData: [],
      groupData: [],
      dispatchData: [], // 实验调度数据
      stepList: [],
      selectedParticipants: [], // 实验参与人员
      showApprovalFlow: false,
      approvalProcessData: [],
      userRole: '',
    };
  },
  computed: {
    dialogTitle() {
      return this.type === "approve" ? "确认实验调度" : "实验调度详情";
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.dialogVisible = val;
        if (val && this.data && this.data.id) {
          // 弹窗打开时，确保数据已获取
          this.getPlanDetail(this.data.id);
          const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}');
          this.userRole = userInfo.roleType || '';
        }
      },
      immediate: true,
    },
    data: {
      handler(val) {
        if (val) {
          // 深拷贝数据，避免直接修改props
          this.form = JSON.parse(
            JSON.stringify({
              ...this.form,
              ...val,
              // 确保这些字段存在，如果不存在则使用默认值
              materialsAndEquipment: val.materialsAndEquipment || [],
              operationSteps: val.operationSteps || [],
            })
          );
          console.log("接收到的数据：", this.form);
        if (val && val.id) {
          // 当接收到数据且有ID时，调用获取详情接口
          this.getPlanDetail(val.id);
        }
      },
      immediate: true,
      deep: true,
    },
    visible: {
      handler(val) {
        if (val && this.type === "view") {
          // 当弹窗打开且是查看模式时，获取详情数据
          this.getPlanDetail();
        }
      },
      immediate: true,
    },
  },
  methods: {
    memberList(i) {
      switch (i) {
        case 1:
          return [1];
        case 2:
          return [1];
        case 3:
          return [1, 2, 3, 4, 5, 6, 7, 8];
        case 4:
          return [1, 2, 3, 4, 5, 6, 7, 8];
        default:
          break;
      }
    handleStopExperiment() {
      this.$router.push("/dataManagement/scheme-management/stop-experiment?id=" + this.data.id);
    },
    getStatusType(status) {
      const statusMap = {
        "-1": "info",
        "1": "warning",
        "2": "success",
        "3": "info"
      };
      return statusMap[status] || "info";
    },
    getStatusText(status) {
      const statusMap = {
        "-1": "草稿箱",
        "1": "待确认",
        "2": "已确认",
        "3": "已封存"
      };
      return statusMap[status] || "未知";
    },
    handleClose() {
      this.$emit("update:visible", false);
      this.form.approvalComment = "";
      this.$emit('update:visible', false);
    },
    handleApprove() {
      if (!this.form.approvalComment) {
@@ -466,139 +278,191 @@
        status: "rejected",
      });
    },
    memberList(item) {
      return item === 1 ? 2 : item === 2 ? 3 : 1;
    },
    openSignature() {
      this.signatureDialogVisible = true;
    },
    handleSignatureConfirm(imageData) {
      console.log("imageData imageData", imageData);
      this.signatureDialogVisible = false;
      this.imgSrc = imageData;

      // 这里处理签名确认后的逻辑
      // this.$confirm('确认该实验调度吗？', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   // 这里可以将签名图片数据(imageData)连同其他数据一起提交到后端
      //   this.$message.success('确认成功');
      //   this.signatureDialogVisible = false;
      //   this.getTableData();
      // }).catch(() => {
      //   this.signatureDialogVisible = false;
      // });
    },
    // 获取方案详情
    async getPlanDetail() {
    async getPlanDetail(id) {
      try {
        // TODO: 替换为实际的接口调用
        // const { data } = await this.$api.getPlanDetail({ planCode: this.data.planCode });
        const res = await getDetail({ id });
        if (!res) {
          this.$message.error('获取方案详情失败');
          this.handleClose();
          return;
        }
        if (res.stopReason) {
          this.showApprovalFlow = true;
          //中止实验申请
          let processData = [];
          processData.push({
            type: "primary",
            mode: "list",
            fields: [
              { label: "提交人：", value: res.updateBy || "" },
              { label: "提交时间：", value: res.createTime || "" },
            ],
          });
          if (res.status == 4 || res.status == 3) {
            processData.push({
              type: 'primary',
              mode: "list",
              fields: [
                {
                  label: "审核结果：",
                  value:
                    res.status == 3
                      ? "通过"
                      : res.status == 4
                        ? "驳回"
                        : "待审批",
                },
                { label: "审批意见：", value: res.auditRemark || "" },
                { label: "审核人：", value: res.auditPersonName || "" },
                { label: "审核时间：", value: res.auditTime || "" },
              ],
            });
          } else {
            processData.push({
              type: "warning",
              mode: "list",
              fields: [
                { label: "等待审核" },
              ],
            });
          }
          this.approvalProcessData = processData;
        }

        // 模拟接口返回数据
        const mockDetailData = {
          planCode: this.data.planCode,
          planName: "2024年度实验室设备升级方案",
          stage: "设备升级实验",
          testDate: "2024-03-15",
          testTime: "2024-03-15 14:00:00",
          tester: "张三",
          creator: "张三",
          createTime: "2024-03-15",
          status: "pending",
          approver: "李四",
          approveTime: "2024-03-16",
          materialsAndEquipment: [
            {
              id: 1,
              type: "richText",
              data: {
                content:
                  "<p>1. 实验材料说明</p><p>2. 设备使用说明</p><p>3. 安全注意事项</p>",
              },
            },
            {
              id: 2,
              type: "customTable",
              data: {
                headers: [
                  { name: "材料名称", type: "text" },
                  { name: "规格", type: "text" },
                  { name: "数量", type: "text" },
                  { name: "用途", type: "text" },
                ],
                rows: [
                  {
                    材料名称: "催化剂A",
                    规格: "工业级",
                    数量: "100g",
                    用途: "反应催化剂",
                    updateTime: "2024-01-01 12:00:00",
                  },
                  {
                    材料名称: "溶剂B",
                    规格: "分析纯",
                    数量: "500ml",
                    用途: "反应溶剂",
                    updateTime: "2024-01-01 12:00:00",
                  },
                ],
              },
            },
            {
              id: 3,
              type: "fileUpload",
              data: {
                fileList: [
                  {
                    name: "材料安全说明书.pdf",
                    url: "https://example.com/msds.pdf",
                  },
                  {
                    name: "设备操作手册.docx",
                    url: "https://example.com/manual.docx",
                  },
                ],
              },
            },
            {
              id: 4,
              type: "imageUpload",
              data: {
                images: [
                  {
                    url: "https://example.com/equipment1.jpg",
                    title: "实验设备1",
                    description: "主要反应设备",
                  },
                  {
                    url: "https://example.com/equipment2.jpg",
                    title: "实验设备2",
                    description: "辅助设备",
                  },
                ],
              },
            },
          ],
          operationSteps: [
            {
              id: 4,
              type: "richText",
              data: {
                content:
                  "<p>1. 准备工作</p><p>2. 设备检查</p><p>3. 实验操作</p><p>4. 数据记录</p>",
              },
            },
          ],
        };

        // 更新表单数据
        // 填充基本表单数据
        this.form = {
          ...this.form,
          ...mockDetailData,
          projectName: res.projectName,
          projectCode: res.projectCode,
          experimentCode: res.experimentCode,
          experimentName: res.experimentName,
          experimentDate: res.experimentDate,
          createBy: res.createBy,
          createTime: res.createTime,
          status: res.status,
          experimentObjective: res.experimentObjective || '',
          experimentParamRoute: res.experimentParamRoute || '',
        };

        // 构建实验调度数据
        if (res.experimentDispatch) {
          this.dispatchData = [res.experimentDispatch];
        }

        // 填充组别数据
        if (res.dispatchId) {
          try {
            const groupRes = await getGroupByDispatchId({ dispatchId: res.dispatchId });
            if (groupRes) {
              this.groupData = groupRes || [];
            }
          } catch (err) {
            console.error('获取组别列表失败:', err);
          }
        }

        // 填充实验材料和设备
        if (res.experimentMaterial) {
          try {
            const materialData = typeof res.experimentMaterial === 'string'
              ? JSON.parse(res.experimentMaterial)
              : res.experimentMaterial;
            this.form.experimentMaterial = materialData;

            // 为DynamicComponent设置初始数据
            // this.$nextTick(() => {
            //   if (this.$refs.materialComponent) {
            //     this.$refs.materialComponent.setInitialData(materialData);
            //   }
            // });
          } catch (err) {
            console.error('解析实验材料数据失败:', err);
          }
        }

        if (res.experimentDevice) {
          try {
            const deviceData = typeof res.experimentDevice === 'string'
              ? JSON.parse(res.experimentDevice)
              : res.experimentDevice;
            this.form.experimentDevice = deviceData;

            // 为DynamicComponent设置初始数据
            this.$nextTick(() => {
              // if (this.$refs.equipmentComponent) {
              //   this.$refs.equipmentComponent.setInitialData(deviceData);
              // }
            });
          } catch (err) {
            console.error('解析实验设备数据失败:', err);
          }
        }

        // 填充实验步骤
        if (res.experimentStepRecord) {
          try {
            const stepsData = typeof res.experimentStepRecord === 'string'
              ? JSON.parse(res.experimentStepRecord)
              : res.experimentStepRecord;

            this.stepList = (stepsData || []).map(step => ({
              stepName: step.stepName,
              content: step.content
            }));

            // 设置步骤内容的初始数据
            this.$nextTick(() => {
              // this.stepList.forEach((step, index) => {
              //   const stepContentRef = this.$refs['stepContent' + index];
              //   if (stepContentRef && step.content) {
              //     const editor = Array.isArray(stepContentRef) ? stepContentRef[0] : stepContentRef;
              //     if (editor && typeof editor.setInitialData === 'function') {
              //       editor.setInitialData(step.content);
              //     }
              //   }
              // });
            });
          } catch (err) {
            console.error('解析实验步骤数据失败:', err);
            this.stepList = [];
          }
        }

        // 设置实验人员
        if (res.experimentSchemePersons) {
          try {
            const participantsData = typeof res.experimentSchemePersons === 'string'
              ? JSON.parse(res.experimentSchemePersons)
              : res.experimentSchemePersons;

            this.selectedParticipants = participantsData || [];
          } catch (err) {
            console.error('解析实验人员数据失败:', err);
            this.selectedParticipants = [];
          }
        }




        // 更新编辑器内容
        this.$nextTick(() => {
          if (this.$refs.purposeEditor) {
            this.$refs.purposeEditor.setContent(this.form.experimentObjective);
          }
          if (this.$refs.processEditor) {
            this.$refs.processEditor.setContent(this.form.experimentParamRoute);
          }
        });

      } catch (error) {
        console.error("获取方案详情失败：", error);
        this.$message.error("获取方案详情失败");
@@ -614,24 +478,57 @@
  border-bottom: 1px solid #e4e7ed;
}

::v-deep .el-dialog__body {
  // padding: 20px;
  
  max-height: 80vh;
  overflow: hidden;
}

@media screen and (max-width: 1200px) {
  ::v-deep .el-dialog__body {
    max-height: none;
    overflow: auto;
  }
}

.approval-dialog {
  display: flex;
  height: 60vh;
  min-height: 60vh;
  max-height: 78vh;
  padding: 20px;
  overflow: hidden;

  @media screen and (max-width: 1200px) {
    flex-direction: column;
    height: auto;

    .approval-content,
    .approval-flow {
      width: 100%;
      margin-right: 0;
      margin-bottom: 20px;
      height: 50vh;
    }
  }

  .approval-content {
    flex: 1;
    flex: 7;
    margin-right: 20px;
    background: #ffffff;
    box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow-y: auto;
  }

  .approval-flow {
    padding: 40px 20px;
    width: 405px;
    flex: 3;
    max-width: 305px;
    padding: 20px 0px;
    background: #ffffff;
    box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow-y: auto;

    .flow-title {
      font-size: 16px;
@@ -656,7 +553,7 @@
}

.approval-content-card {
  height: calc(100% - 100px) !important;
  height: calc(100% - 10px) !important;
  box-shadow: none !important;
}

@@ -762,7 +659,7 @@
}

.groupTable {
  width: 65%;
  width: 85%;
  padding-left: 40px;
}

@@ -779,41 +676,33 @@
  margin-left: 38px;

  .member-list-card {
    width: 280px;
    height: 300px;
    width: 340px;
    height: 400px;
    border-radius: 8px;
    border: 1px solid #dcdfe6;

    &:nth-child(1) {
      background: linear-gradient(
        to bottom,
        rgba(4, 156, 154, 0.2) 0%,
        rgba(5, 242, 194, 0) 70%
      );
      background: linear-gradient(to bottom,
          rgba(4, 156, 154, 0.2) 0%,
          rgba(5, 242, 194, 0) 70%);
    }

    &:nth-child(2) {
      background: linear-gradient(
        to bottom,
        rgba(5, 160, 193, 0.2) 0%,
        rgba(5, 242, 194, 0) 70%
      );
      background: linear-gradient(to bottom,
          rgba(5, 160, 193, 0.2) 0%,
          rgba(5, 242, 194, 0) 70%);
    }

    &:nth-child(3) {
      background: linear-gradient(
        to bottom,
        rgba(255, 77, 79, 0.2) 0%,
        rgba(255, 242, 194, 0) 70%
      );
      background: linear-gradient(to bottom,
          rgba(255, 77, 79, 0.2) 0%,
          rgba(255, 242, 194, 0) 70%);
    }

    &:nth-child(4) {
      background: linear-gradient(
        to bottom,
        rgba(250, 199, 20, 0.21) 0%,
        rgba(255, 242, 194, 0) 70%
      );
      background: linear-gradient(to bottom,
          rgba(250, 199, 20, 0.21) 0%,
          rgba(255, 242, 194, 0) 70%);
    }

    .member-item {
@@ -891,11 +780,13 @@
.step-list {
  background: #eff8fa;
  padding: 20px;

  .step-list-item {
    display: flex;
    justify-content: space-between;
    padding: 25px;
    background: #ffffff;

    .step-list-item-title {
      font-weight: 500;
      font-size: 14px;
@@ -907,13 +798,26 @@
  }
}

.dialog-footer {
  align-items: center;
.content-box {
  padding: 0 25px;
  margin-bottom: 20px;
  width: 65%;
  display: flex;
  justify-content: center;

  button {
    width: 150px;
  .content-box-left {
    flex: 1;

    div {
      padding: 10px 0;
    }
  }

  .content-box-right {
    flex: 1;

    div {
      padding: 10px 0;
    }
  }
}
</style>