style(view): 格式化人员在岗页面的表格和弹窗代码

hejianhao

2026-01-29 a5bc0ce10229214bdb9e8c82d5b565b048a8663a

style(view): 格式化人员在岗页面的表格和弹窗代码

- 统一表格列属性的多行格式，提高代码可读性
- 修复模板中字符串引号不一致的问题
- 调整详情弹窗中检查内容的硬编码显示
- 拆分长属性表达式为多行，符合代码规范

 screen/src/view/personnelOnDuty/index.vue

@@ -142,13 +142,23 @@
        v-loading="loading"
      >
        <el-table-column label="计划名称" prop="planName" min-width="120" />
        <el-table-column label="检查内容" prop="checkContent" min-width="150" show-overflow-tooltip >
        <el-table-column
          label="检查内容"
          prop="checkContent"
          min-width="150"
          show-overflow-tooltip
        >
          <template>
            <div>人员在岗</div>
          </template>
        </el-table-column>
        <el-table-column label="岗位" prop="postName" min-width="100" />
        <el-table-column label="问题备注" prop="remark" min-width="150" show-overflow-tooltip />
        <el-table-column
          label="问题备注"
          prop="remark"
          min-width="150"
          show-overflow-tooltip
        />
        <el-table-column label="图片" min-width="80">
          <template #default="{ row }">
            <div
@@ -167,27 +177,32 @@
              <div class="ripple">
                <div
                  class="ripple-wave wave-1"
                  :class="stateMap[row.state] && stateMap[row.state].colorClass[0]"
                  :class="
                    stateMap[row.state] && stateMap[row.state].colorClass[0]
                  "
                ></div>
                <div
                  class="ripple-wave wave-2"
                  :class="stateMap[row.state] && stateMap[row.state].colorClass[1]"
                  :class="
                    stateMap[row.state] && stateMap[row.state].colorClass[1]
                  "
                ></div>
                <div
                  class="ripple-wave wave-3"
                  :class="stateMap[row.state] && stateMap[row.state].colorClass[2]"
                  :class="
                    stateMap[row.state] && stateMap[row.state].colorClass[2]
                  "
                ></div>
              </div>
              <div class="ml--6 SHSR">{{ stateMap[row.state] ? stateMap[row.state].text : '-' }}</div>
              <div class="ml--6 SHSR">
                {{ stateMap[row.state] ? stateMap[row.state].text : "-" }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="{ row }">
            <el-button
              @click="showDetail(row)"
              type="text"
              class="btnColor"
            <el-button @click="showDetail(row)" type="text" class="btnColor"
              >详情</el-button
            >
          </template>
@@ -203,19 +218,23 @@
      />
    </div>
    <!-- 详情弹窗 -->
    <CustomDialog title="人员在岗详情" :visible.sync="detailVisible" width="1420px">
    <CustomDialog
      title="人员在岗详情"
      :visible.sync="detailVisible"
      width="1420px"
    >
      <div class="oa" style="height: 700px" v-loading="detailLoading">
        <div class="flex j-between gap--30 mt--30">
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">计划名称：</div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor8">
              {{ detailData.planName || '-' }}
              {{ detailData.planName || "-" }}
            </div>
          </div>
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">项目名称：</div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor8">
              {{ projectName || '-' }}
              {{ projectName || "-" }}
            </div>
          </div>
        </div>
@@ -223,13 +242,13 @@
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">检查内容：</div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor8">
              {{ detailData.checkContent || '人员在岗' }}
              {{ "人员在岗" }}
            </div>
          </div>
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">岗位：</div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor8">
              {{ detailData.postName || '-' }}
              {{ detailData.postName || "-" }}
            </div>
          </div>
        </div>
@@ -237,27 +256,42 @@
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">问题备注：</div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor8">
              {{ detailData.remark || '-' }}
              {{ detailData.remark || "-" }}
            </div>
          </div>
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">在岗情况：</div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor8 flex a-center">
            <div
              class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor8 flex a-center"
            >
              <div class="ripple mr--10" v-if="detailData.state">
                <div
                  class="ripple-wave wave-1"
                  :class="stateMap[detailData.state] && stateMap[detailData.state].colorClass[0]"
                  :class="
                    stateMap[detailData.state] &&
                    stateMap[detailData.state].colorClass[0]
                  "
                ></div>
                <div
                  class="ripple-wave wave-2"
                  :class="stateMap[detailData.state] && stateMap[detailData.state].colorClass[1]"
                  :class="
                    stateMap[detailData.state] &&
                    stateMap[detailData.state].colorClass[1]
                  "
                ></div>
                <div
                  class="ripple-wave wave-3"
                  :class="stateMap[detailData.state] && stateMap[detailData.state].colorClass[2]"
                  :class="
                    stateMap[detailData.state] &&
                    stateMap[detailData.state].colorClass[2]
                  "
                ></div>
              </div>
              {{ stateMap[detailData.state] ? stateMap[detailData.state].text : '-' }}
              {{
                stateMap[detailData.state]
                  ? stateMap[detailData.state].text
                  : "-"
              }}
            </div>
          </div>
        </div>
@@ -265,7 +299,7 @@
          <div class="flex1">
            <div class="SHSR fs--16 lh--16 mb--17 color1">检查时间：</div>
            <div class="lh--60 px--19 c-fff SHSBold fs--18 w100 bgcolor8">
              {{ detailData.time || '-' }}
              {{ detailData.time || "-" }}
            </div>
          </div>
        </div>
@@ -274,14 +308,26 @@
            <div class="SHSR fs--16 lh--16 mb--17 color1">图片：</div>
            <div class="flex a-center oa gap--14">
              <img
                v-for="(item, index) in detailData.img ? detailData.img.split(',').map(i => VUE_APP_IMAGE_BASE_URL + i) : []"
                v-for="(item, index) in detailData.img
                  ? detailData.img
                      .split(',')
                      .map((i) => VUE_APP_IMAGE_BASE_URL + i)
                  : []"
                :key="index"
                :src="item"
                class="w--150 h--120 cursor-pointer"
                style="border-radius: 4px;"
                style="border-radius: 4px"
                @click="previewImage(detailData)"
              />
              <div v-if="!detailData.img || !detailData.img.split(',').map(i => i).length" class="c-fff SHSR">暂无图片</div>
              <div
                v-if="
                  !detailData.img ||
                  !detailData.img.split(',').map((i) => i).length
                "
                class="c-fff SHSR"
              >
                暂无图片
              </div>
            </div>
          </div>
        </div>
@@ -299,7 +345,12 @@
<script>
import HeaderBox from "../header/index.vue";
import moment from "moment";
import { getPositionList, getPlanList, getProjectOnDutyList, getProjectOnDutyDetail } from "./service";
import {
  getPositionList,
  getPlanList,
  getProjectOnDutyList,
  getProjectOnDutyDetail,
} from "./service";

export default {
  components: { HeaderBox },
@@ -331,16 +382,23 @@
      detailLoading: false,
      // 图片预览数据
      previewImages: [],
      VUE_APP_IMAGE_BASE_URL: process.env.VUE_APP_IMAGE_BASE_URL + '/project/download/'
      VUE_APP_IMAGE_BASE_URL:
        process.env.VUE_APP_IMAGE_BASE_URL + "/project/download/",
    };
  },
  computed: {
    // 在岗情况映射
    stateMap() {
      return {
        1: { text: "在岗", colorClass: ["bgColor33", "bgColor44", "bgColor55"] },
        1: {
          text: "在岗",
          colorClass: ["bgColor33", "bgColor44", "bgColor55"],
        },
        2: { text: "未在岗", colorClass: ["wave-1", "wave-2", "wave-3"] },
        3: { text: "请假", colorClass: ["bgColor66", "bgColor77", "bgColor88"] },
        3: {
          text: "请假",
          colorClass: ["bgColor66", "bgColor77", "bgColor88"],
        },
      };
    },
  },
@@ -494,7 +552,9 @@
    previewImage(row) {
      if (row.img) {
        // 如果img是字符串，可能是逗号分隔的多张图片
        this.previewImages = row.img.split(",").map((item) => this.VUE_APP_IMAGE_BASE_URL + item);
        this.previewImages = row.img
          .split(",")
          .map((item) => this.VUE_APP_IMAGE_BASE_URL + item);
        this.previewVisible = true;
      } else {
        this.$message.warning("暂无图片");