aiot-app/pages/ehs/emergencyDrill/emergencyPlanDialog.vue

<template>
  <u-popup
    :show="visible"
    mode="bottom"
    :round="10"
    :closeOnClickOverlay="false"
    @close="cancel"
    class="emergency-plan-popup"
  >
    <view class="popup-content">
      <!-- 头部 -->
      <view class="popup-header">
        <text class="popup-title">{{ dialogTitle }}</text>
        <view class="close-btn" @click="cancel">×</view>
      </view>

      <scroll-view class="popup-body" scroll-y>
        <view class="page">
          <view class="card-a">
            <view class="card-section">
              <!-- ===== 表单 ===== -->
              <u--form
                labelPosition="left"
                labelWidth="160rpx"
                :model="form"
                :rules="rules"
                ref="formRef"
              >
                <!-- 预案文件 -->
                <u-form-item
                  label="预案文件"
                  prop="fileUrl"
                  borderBottom
                  required
                >
                  <fileMain
                    v-model="form.fileUrl"
                    :type="isView ? 'view' : ''"
                  />
                </u-form-item>

                <!-- 预案名称 -->
                <u-form-item label="预案名称" prop="name" borderBottom required>
                  <u--input
                    v-model="form.name"
                    placeholder="请输入预案名称"
                    :disabled="isView"
                    border="none"
                    inputAlign="right"
                  />
                </u-form-item>

                <!-- 所属部门 -->
                <u-form-item
                  label="所属部门"
                  prop="departmentId"
                  borderBottom
                  required
                >
                  <view class="picker-value">
                    {{ form.departmentName || "请选择部门" }}
                  </view>
                  <u-icon slot="right" name="arrow-right" />
                </u-form-item>

                <!-- 预案类型 -->
                <u-form-item label="预案类型" prop="type" borderBottom required>
                  <view class="picker-value">
                    {{ getDictValue("应急预案类型", form.type) || "请选择" }}
                  </view>
                  <u-icon slot="right" name="arrow-right" />
                </u-form-item>

                <!-- 发布时间 -->
                <u-form-item label="发布时间" prop="publishTime" borderBottom>
                  <view class="picker-value">
                    {{ form.publishTime || "请选择" }}
                  </view>
                  <u-icon slot="right" name="arrow-right" />
                </u-form-item>

                <!-- 标签 -->
                <u-form-item label="标签" prop="tags" borderBottom>
                  <u--input
                    v-model="form.tags"
                    placeholder="请输入标签"
                    :disabled="isView"
                    border="none"
                    inputAlign="right"
                  />
                </u-form-item>
              </u--form>
            </view>

            <!-- ===== 编写组成员 ===== -->
            <view class="card-section">
              <view class="section-title"> 👥 组成员 </view>

              <view
                v-for="(member, idx) in form.planMemberList"
                :key="idx"
                class="member-item"
              >
                <view class="member-info">
                  <text class="member-name">{{ member.memberUserName }}</text>
                  <text class="member-dept">{{
                    member.memberUserDeptName
                  }}</text>
                  <text class="member-phone">{{ member.phone }}</text>
                </view>
              </view>

              <view v-if="form.planMemberList.length === 0" class="empty-tip">
                暂无组成员
              </view>
            </view>
          </view>
        </view>
      </scroll-view>

      <!-- 底部按钮 -->
      <view class="popup-footer">
        <u-button type="default" @click="cancel">取消</u-button>
      </view>
    </view>

    <u-toast ref="uToast" />
  </u-popup>
</template>

<script>
import fileMain from "@/pages/doc/index.vue";
import dictMixins from "@/mixins/dictMixins";
import { getEmergencyplanById } from "@/api/emergencyDrill/workOrder.js";

const defForm = {
  id: "",
  name: "",
  departmentId: "",
  departmentName: "",
  type: "",
  publishTime: "", 
  tags: "",
  fileUrl: [],
  planMemberList: [],
};

export default {
  components: { fileMain,  },
  mixins: [dictMixins],
  data() {
    return {
      visible: false,
      loading: false,
      dialogType: "add", // add, edit, view
      form: JSON.parse(JSON.stringify(defForm)),

      rules: {},
    };
  },
  computed: {
    dialogTitle() {
      const map = {
        add: "新增应急预案",
        edit: "编辑应急预案",
        view: "查看应急预案",
      };
      return map[this.dialogType] || "应急预案";
    },
    isView() {
      return this.dialogType === "view";
    },
  },
  mounted() {},
  methods: {
    // 打开弹窗
    async open(row, type = "add") {
      this.visible = true;
      this.dialogType = type;
      this.loading = false;

      if (row && row.id) {
        try {
          const data = await getEmergencyplanById(row.id);
          this.form = { ...data };
        } catch (e) {
          console.error(e);
        }
      } else {
        this.form = JSON.parse(JSON.stringify(defForm));
      }

      this.$nextTick(() => {
        if (this.$refs.formRef) {
          this.$refs.formRef.setRules(this.rules);
        }
      });
    },

    cancel() {
      this.visible = false;
      this.form = JSON.parse(JSON.stringify(defForm));
    },
  },
};
</script>

<style lang="scss" scoped>
.emergency-plan-popup {
  /deep/ .u-popup__content {
    border-radius: 32rpx 32rpx 0 0;
    overflow: hidden;
  }

  .popup-content {
    height: 80vh;
    display: flex;
    flex-direction: column;
    background: #eff2f7;
  }

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 32rpx;
    background: #fff;
    border-bottom: 2rpx solid #eef2f6;
    flex-shrink: 0;

    .popup-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #1f2b3c;
    }
    .close-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 52rpx;
      color: #8e9aae;
      line-height: 1;
    }
  }

  .popup-body {
    flex: 1;
    overflow-y: auto;
    padding: 24rpx;
  }

  .page {
    font-family:
      system-ui,
      -apple-system,
      "Segoe UI",
      Roboto,
      sans-serif;
  }

  .card-a {
    background: #ffffff;
    border-radius: 48rpx;
    box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }

  .card-section {
    padding: 30rpx 32rpx;
    &:not(:last-child) {
      border-bottom: 2rpx solid #f0f2f5;
    }
  }

  .section-title {
    font-size: 30rpx;
    font-weight: 700;
    color: #1f2a44;
    margin-bottom: 24rpx;
    padding-left: 16rpx;
    border-left: 6rpx solid #4caf50;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .add-btn {
      font-size: 26rpx;
      color: #2979ff;
      font-weight: normal;
      padding: 4rpx 16rpx;
      background: #e8f0fe;
      border-radius: 30rpx;
    }
  }

  /deep/ .u-form-item {
    padding: 12rpx 0;
    .u-form-item__body__left__label {
      font-size: 26rpx !important;
      color: #6c7a91 !important;
    }
    .u-input__content__field-wrapper__field {
      font-size: 26rpx !important;
      text-align: right;
    }
  }

  .picker-value {
    font-size: 26rpx;
    color: #1e2a3a;
    text-align: right;
    flex: 1;
    min-height: 44rpx;
    padding: 4rpx 0;
  }

  // ===== 成员列表 =====
  .member-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16rpx 20rpx;
    background: #f5f7fb;
    border-radius: 16rpx;
    margin-bottom: 12rpx;

    .member-info {
      display: flex;
      align-items: center;
      gap: 20rpx;
      flex: 1;
      flex-wrap: wrap;

      .member-name {
        font-size: 28rpx;
        font-weight: 600;
        color: #1f2b3c;
      }
      .member-dept {
        font-size: 24rpx;
        color: #8e9aae;
      }
      .member-phone {
        font-size: 24rpx;
        color: #8e9aae;
      }
    }

    .member-delete {
      width: 48rpx;
      height: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #f56c6c;
      font-size: 28rpx;
    }
  }

  .empty-tip {
    text-align: center;
    font-size: 26rpx;
    color: #aaa;
    padding: 30rpx 0;
  }

  // ===== 底部按钮 =====
  .popup-footer {
    display: flex;
    padding: 16rpx 24rpx;
    background: #fff;
    border-top: 2rpx solid #eef2f6;
    gap: 16rpx;
    flex-shrink: 0;

    /deep/ .u-button {
      flex: 1;
      border-radius: 48rpx;
      height: 72rpx;
    }
  }
}
</style>