JG-CLIENT-TEMP/src/views/process/popUpView/checkPop.vue

<template>
  <div class="midPopUp" v-if="checkPop">
    <div class="container" @click.stop>
      <div class="title titleText" style="font-size: 38px">设备点检项目</div>
      <div class="title describeText">(需填完后开工)</div>
      <el-scrollbar class="listBody">
        <el-form ref="formRef" :model="checkListArray" label-width="aotu">
          <div
            class="item"
            v-for="(item, index) in checkListArray.array"
            :key="item.key"
          >
            <el-form-item
              :label="`${index + 1}.` + item.deviceName + '-' + item.deviceNo"
              :rules="{
                required: true,
                message: '该选项为必选',
                trigger: 'change',
              }"
              :prop="'array.' + index + '.result'"
            >
              <div class="showInfo">
                <span class="remark">&nbsp;( {{ item.showremark }} ) :</span>
                <el-radio-group v-model="item.result">
                  <el-radio :value="0">正常</el-radio>
                  <el-radio :value="1">异常</el-radio>
                </el-radio-group>
              </div>
            </el-form-item>
            <el-input
              v-if="item.result == 1"
              v-model="item.remark"
              type="textarea"
              placeholder="请输入异常原因"
            />
          </div>
        </el-form>
      </el-scrollbar>
      <div class="btns">
        <el-button
          type="primary"
          @click="validate"
          class="titleText"
          style="width: 260px; height: 50px; border-radius: 16px"
          >提 交
        </el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { checkList, maintenanceCheck } from "@/api/process";
//点检项数组
const checkListArray = reactive({ array: [] });
const formRef = ref(null);
const checkPop = ref(false);
const getCheckList = async () => {
  const { data } = await checkList();
  checkListArray.array = data;
  checkListArray.array.forEach((item, index) => {
    let str = "";
    item.result = null;
    item.key = index;
    str = JSON.parse(JSON.stringify(item.remark));
    item.showremark = str;
    item.remark = "";
  });
  if (checkListArray.array.length > 0) {
    checkPop.value = true;
  } else {
    checkPop.value = false;
  }
};
const validate = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      submit();
    } else {
      ElMessage.error("请检查是否有未填项");
    }
  });
};
const submit = async () => {
  const { data, code } = await maintenanceCheck(checkListArray.array);
  if (code == "200") {
    ElMessage.success("提交成功！祝开工顺利");
    checkPop.value = false;
  }
};
watch(
  () => checkListArray,
  () => {
    if (checkListArray.array.length > 0) {
      checkPop.value = true;
    } else {
      checkPop.value = false;
    }
  }
);
onMounted(() => {
  getCheckList();
});
</script>

<style lang="scss" scoped>
.title {
  width: 100%;
  height: 50px;
  text-align: center;
}

:deep(label) {
  display: inline-block;
}

.listBody {
  height: calc(100% - 160px);
  padding: 0 $p20;

  .item {
    width: 100%;
    background-color: white;
    border-radius: 16px;
    margin: 10px 0;
    padding: $p10 $p20;

    .showInfo {
      .remark {
        font-size: $f20;
        color: red;
        margin-right: 5px;
      }
    }
  }
}

.btns {
  width: 100%;
  height: 50px;
  @include flex;
}

//表单字体样式
:deep(.el-form-item__label) {
  font-size: $f20;
  max-width: 600px;
  display: inline-block;
  height: auto;
  padding-right: 0px;
}

:deep(.el-radio__label) {
  font-size: $f20;
}

:deep(.el-radio) {
  display: flex;
  align-items: center;
}

:deep(.el-textarea__inner) {
  font-size: $f20;
}
</style>