Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/leshan-labor...

hejianhao

2025-05-09 d318b6560809de28df846a1306408f1599289db1

 laboratory/src/components/approvalProcess/index.vue

@@ -6,32 +6,40 @@
        :key="index"
        :type="activity.type"
      >
        <div v-if="activity.mode && activity.mode == 'card'">
          <div class="member-list-card" v-for="item in 3" :key="item">
        <div v-if="activity.mode === 'card'">
          <div
            class="member-list-card"
            v-for="(group, groupIndex) in activity.groups"
            :key="groupIndex"
          >
            <div class="member-item">
              <div class="member-title">
                {{ ["工艺工程师", "实验员", "化验师"][item - 1] }}
                {{ group.title }}
              </div>
              <div class="flex-over">
                <div class="people-list" v-for="item in 10" :key="item">
                <div
                  class="people-list"
                  v-for="(member, memberIndex) in group.members"
                  :key="memberIndex"
                >
                  <div class="people-item">
                    <img src="" alt="" class="people-img" />
                    <div class="member-name">{{ item }}</div>
                    <img :src="member.avatar" alt="" class="people-img" />
                    <div class="member-name">{{ member.name }}</div>
                  </div>
                  <div class="member-status">
                    <div
                      class="member-status-text"
                      :class="
                        activity.type == 'success' ? 'success' : 'warning'
                        member.status === 'approved' ? 'success' : 'warning'
                      "
                    >
                      {{ activity.type == "success" ? "同意" : "待审批" }}
                      {{ member.status === "approved" ? "同意" : "待审批" }}
                    </div>
                    <div
                      v-if="activity.type == 'success'"
                      v-if="member.status === 'approved'"
                      class="member-status-time"
                    >
                      2025-04-08 12:30
                      {{ member.approveTime }}
                    </div>
                  </div>
                </div>
@@ -42,11 +50,15 @@
        <div
          v-else
          class="approval-process-item"
          :class="activity.type == 'primary' ? '' : 'approval-process-item1'"
          :class="activity.type === 'primary' ? '' : 'approval-process-item1'"
        >
          <div class="approval-process-item-name">提交人：李雷雷</div>
          <div class="approval-process-item-time">
            提交时间：2020-12-01 12:30
          <div
            v-for="(field, idx) in activity.fields"
            :key="idx"
            style="margin-bottom: 6px"
          >
            <span>{{ field.label }}</span>
            <span>{{ field.value }}</span>
          </div>
        </div>
      </el-timeline-item>
@@ -58,58 +70,77 @@
export default {
  name: "ApprovalProcess",
  props: {
    status: {
      type: String,
      default: "approved", // pending-等待审核, approved-已通过
      validator: (value) => ["pending", "approved"].includes(value),
    },
    submitTime: {
      type: String,
      default: "",
    },
    approver: {
      type: String,
      default: "",
    },
    approveTime: {
      type: String,
      default: "",
    },
    mode: {
      type: String,
      default: "",//card-就是卡片模式，其他就是列表模式
    },
  },
  computed: {
    processData() {
      const baseData = [
        {
          content: "提交审批",
          time: this.submitTime,
          type: "primary",
        },
      ];

      if (this.status === "approved") {
        console.log("111111111111111", this.status);

        baseData.push({
          content: `${this.approver}审批通过`,
          time: this.approveTime,
          type: "success",
          mode: this.mode,
        });
      } else {
        console.log("122222222222222221", this.status);
        baseData.push({
          content: "等待审核",
          time: this.submitTime,
          type: "warning",
          mode: this.mode,
        });
      }

      return baseData;
    processData: {
      type: Array,
      required: true,
      // 数据结构示例：
      // [
      //   {
      //     type: 'primary',
      //     content: '提交审批',
      //     time: '2020-12-01 12:30',
      //     mode: 'list'
      //   },
      //   {
      //     type: 'success',
      //     mode: 'card',
      //     groups: [
      //       {
      //         title: '工艺工程师',
      //         members: [
      //           {
      //             name: '张三',
      //             avatar: '',
      //             status: 'approved',
      //             approveTime: '2025-04-08 12:30'
      //           }
      //         ]
      //       }
      //     ]
      //   }
      // ]
      // 数据结构示例：
      //       [
      //   {
      //     type: 'success',
      //     mode: 'card',
      //     groups: [
      //       {
      //         title: '工艺工程师',
      //         members: [
      //           {
      //             fields: [
      //               { label: '姓名', value: '张三' },
      //               { label: '状态', value: '同意' },
      //               { label: '审批时间', value: '2025-04-08 12:30' }
      //             ],
      //             avatar: '' // 头像地址，可选
      //           },
      //           {
      //             fields: [
      //               { label: '姓名', value: '李四' },
      //               { label: '状态', value: '待审批' }
      //             ],
      //             avatar: ''
      //           }
      //         ]
      //       },
      //       {
      //         title: '实验员',
      //         members: [
      //           {
      //             fields: [
      //               { label: '姓名', value: '王五' },
      //               { label: '状态', value: '同意' },
      //               { label: '审批时间', value: '2025-04-08 13:00' }
      //             ],
      //             avatar: ''
      //           }
      //         ]
      //       }
      //     ]
      //   }
      // ]
    },
  },
};
@@ -230,7 +261,7 @@
        text-align: left;
        padding-left: 17px;
      }
      .flex-over{
      .flex-over {
        margin-top: 12px;
        flex: 1;
        overflow: auto;
@@ -242,7 +273,7 @@
        align-items: center;
        padding: 0 20px;
        margin-top: 12px;
       

        display: flex;
        .people-item {
          display: flex;