refactor(personnel-review): 重构人员资质审核弹窗的布局与样式

董国庆

2026-05-25 5e92abe9c763a2a8ba1936dc9deb4ee8d896ae3d

refactor(personnel-review): 重构人员资质审核弹窗的布局与样式

调整弹窗宽度至600px，替换原国际化标题为硬编码中文
重构信息展示区域的网格布局，统一信息项排版
优化容器、标题与自定义标签的样式细节
将表单与按钮的国际化调用替换为硬编码文本
注释掉暂未启用的头像图片展示逻辑

 src/views/service/review/personnel/components/ReviewModal.vue

@@ -222,8 +222,8 @@
    v-model:show="show"
    :mask-closable="false"
    preset="card"
    :title="t('serviceReview.common.review')"
    :style="{ width: '1000px' }"
    title="人员资质审核"
    :style="{ width: '600px' }"
    :auto-focus="false"
    :segmented="{
      content: true,
@@ -233,57 +233,55 @@
  >
    <n-spin :show="detailLoading">
      <div class="review-modal-content">
        <div v-if="reviewDetail" class="section-card">
          <div class="section-title">人员资质审核</div>
        <div v-if="reviewDetail" class="section-container">
          <div class="section-title">人员信息</div>

          <div class="base-info-grid">
          <div class="info-grid">
            <div class="info-item">
              <div class="info-label">姓名：</div>
              <div class="info-label">姓名</div>
              <div class="info-value name-value">
                <img
                <!-- <img
                  v-if="parseImageList(reviewDetail.avatar)[0]"
                  :src="parseImageList(reviewDetail.avatar)[0]"
                  class="avatar"
                  alt="avatar"
                />
                /> -->
                <span>{{ reviewDetail.nickName || "-" }}</span>
              </div>
            </div>

            <div class="info-item">
              <div class="info-label">编号：</div>
              <div class="info-label">编号</div>
              <div class="info-value">
                {{ reviewDetail.operationsUserId || "-" }}
              </div>
            </div>

            <div class="info-item">
              <div class="info-label">手机号：</div>
              <div class="info-label">手机</div>
              <div class="info-value">
                {{ reviewDetail.phoneNumber || "-" }}
              </div>
            </div>
          </div>

          <div class="info-row">
            <div class="info-label">角色：</div>
            <div class="info-value role-list">
              <n-tag
                v-for="role in getRoleNames(reviewDetail.roleNames)"
                :key="role"
                type="info"
                :bordered="false"
                size="small"
              >
                {{ role }}
              </n-tag>
              <span v-if="getRoleNames(reviewDetail.roleNames).length === 0">-</span>
            <div class="info-item">
              <div class="info-label">角色</div>
              <div class="info-value role-list">
                <n-tag
                  v-for="role in getRoleNames(reviewDetail.roleNames)"
                  :key="role"
                  :bordered="false"
                  size="small"
                  class="custom-tag"
                >
                  {{ role }}
                </n-tag>
                <span v-if="getRoleNames(reviewDetail.roleNames).length === 0">-</span>
              </div>
            </div>
          </div>

          <div class="certificate-grid">
            <div class="info-row">
              <div class="info-label">身份证：</div>
            <div class="info-item">
              <div class="info-label">身份证</div>
              <div class="info-value">
                <div v-if="getIdCardImages(reviewDetail).length" class="image-list">
                  <n-image
@@ -300,8 +298,8 @@
              </div>
            </div>

            <div class="info-row">
              <div class="info-label">驾驶证：</div>
            <div class="info-item">
              <div class="info-label">驾驶证</div>
              <div class="info-value">
                <div
                  v-if="parseImageList(reviewDetail.driverLicense).length"
@@ -321,21 +319,15 @@
              </div>
            </div>

            <div class="info-row">
              <div class="info-label">无犯罪记录证明：</div>
            <div class="info-item">
              <div class="info-label">无犯罪记录证明</div>
              <div class="info-value">
                <div
                  v-if="
                    parseImageList(reviewDetail.certificateOfNoCriminalRecord).length
                  "
                  v-if="parseImageList(reviewDetail.certificateOfNoCriminalRecord).length"
                  class="image-list"
                >
                  <n-image
                    v-for="
                      (url, index) in parseImageList(
                        reviewDetail.certificateOfNoCriminalRecord
                      )
                    "
                    v-for="(url, index) in parseImageList(reviewDetail.certificateOfNoCriminalRecord)"
                    :key="`${url}-${index}`"
                    :src="url"
                    :width="88"
@@ -348,21 +340,15 @@
              </div>
            </div>

            <div class="info-row">
              <div class="info-label">培训结业证：</div>
            <div class="info-item">
              <div class="info-label">培训结业证</div>
              <div class="info-value">
                <div
                  v-if="
                    parseImageList(reviewDetail.trainingGraduationCertificate).length
                  "
                  v-if="parseImageList(reviewDetail.trainingGraduationCertificate).length"
                  class="image-list"
                >
                  <n-image
                    v-for="
                      (url, index) in parseImageList(
                        reviewDetail.trainingGraduationCertificate
                      )
                    "
                    v-for="(url, index) in parseImageList(reviewDetail.trainingGraduationCertificate)"
                    :key="`${url}-${index}`"
                    :src="url"
                    :width="88"
@@ -377,40 +363,35 @@
          </div>
        </div>

        <div v-else-if="!detailLoading" class="section-card batch-tip">
        <div v-else-if="!detailLoading" class="section-container batch-tip">
          已选择 {{ selectedCount }} 条待审核记录
        </div>

        <div class="section-card">
          <div class="section-title">审核信息</div>
        <div class="section-container">
          <div class="section-title">资质审核</div>

          <n-form
            ref="formRef"
            :model="formModel"
            :rules="rules"
            label-placement="left"
            label-width="72"
            require-mark-placement="left"
          >
            <n-form-item
              :label="t('serviceReview.common.auditResult')"
              label="审核"
              path="result"
              required
            >
              <n-radio-group v-model:value="formModel.result">
                <n-space>
                  <n-radio value="pass">
                    {{ t("serviceReview.common.pass") }}
                  </n-radio>
                  <n-radio value="reject">
                    {{ t("serviceReview.common.reject") }}
                  </n-radio>
                  <n-radio value="pass">通过</n-radio>
                  <n-radio value="reject">不通过</n-radio>
                </n-space>
              </n-radio-group>
            </n-form-item>

            <n-form-item
              :label="t('serviceReview.common.remark')"
              label="备注"
              path="auditRemarks"
              label-placement="top"
              :required="formModel.result === 'reject'"
@@ -433,7 +414,7 @@
      <n-space justify="end">
        <n-button @click="handleCancel">{{ t("common.cancel") }}</n-button>
        <n-button type="primary" @click="handleConfirm">
          {{ t("serviceReview.common.submit") }}
          {{ t("common.confirm") }}
        </n-button>
      </n-space>
    </template>
@@ -444,23 +425,16 @@
.review-modal-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-card {
  padding: 20px 24px;
  border: 1px solid rgba(23, 31, 38, 0.08);
  border-radius: 8px;
  background: #fff;
  gap: 24px;
}

.section-title {
  position: relative;
  margin-bottom: 20px;
  padding-left: 11px;
  margin-bottom: 16px;
  padding-left: 10px;
  color: #171f26;
  font-size: 16px;
  font-weight: 600;
  font-weight: 500;
  line-height: 24px;
}

@@ -469,46 +443,36 @@
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 14px;
  border-radius: 3px;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: #0068ff;
  transform: translateY(-50%);
}

.base-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 24px;
  margin-bottom: 16px;
}

.certificate-grid {
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 40px;
  gap: 16px 24px;
}

.info-item,
.info-row {
.info-item {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.info-label {
  flex-shrink: 0;
  color: #171f26;
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  color: rgba(23, 31, 38, 0.6);
  font-size: 13px;
  line-height: 18px;
}

.info-value {
  min-width: 0;
  color: #171f26;
  font-size: 14px;
  line-height: 22px;
  font-size: 13px;
  line-height: 18px;
  word-break: break-all;
}

@@ -524,6 +488,13 @@
  gap: 8px;
}

.custom-tag {
  color: #0068ff;
  background-color: #e5f0ff;
  padding: 0 8px;
  border-radius: 4px;
}

.image-list {
  display: flex;
  flex-wrap: wrap;