projectmanager/app/workorder/view/index/edit.html

<form class="layui-form page-content p-4" lay-filter="webform">
  <input type="hidden" name="id" id="id" value="<?php echo isset($detail['id']) ? $detail['id'] : ''; ?>" />
  <h3 class="h3-title">处理工单</h3>
  <table class="layui-table layui-table-form">
    <tr>
      <td class="layui-td-gray-2">分派处理人<font>*</font>
      </td>
      <td>
        <select name="solve" lay-verify="required" lay-reqText="请选择处理人" class="layui-select" lay-search=""
          lay-filter="solve"<?php if(isset($detail['status']) && ($detail['status']==2 || $detail['status']==3)) echo 'disabled'; ?>>
          <option value="">请选择处理人</option>
        </select>
      </td>
      <td class="layui-td-gray-2">工单状态<font>*</font>
      </td>
      <td colspan="3">
        <select name="status" lay-verify="required" lay-reqText="请选择工单状态" class="layui-select" id="status-select"
          <?php if(isset($detail['status']) && $detail['status']==3) echo 'disabled'; ?>>
          <option value="">请选择工单状态</option>
          <option value="1" <?php if(isset($detail['status']) && $detail['status']==1) echo 'selected' ; ?> <?php if(isset($detail['status']) && $detail['status']==2) echo 'disabled'; ?>>解决中</option>
          <option value="2" <?php if(isset($detail['status']) && $detail['status']==2) echo 'selected' ; ?> <?php if(isset($detail['status']) && $detail['status']==2) echo 'disabled'; ?>>已解决</option>
          <option value="3" <?php if(isset($detail['status']) && $detail['status']==3) echo 'selected' ; ?>>已关闭</option>
        </select>
      </td>
    </tr>
  </table>

  <?php if (!isset($detail['status']) || $detail['status'] != 3): ?>
  <div class="pt-1">
    <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">
      立即提交
    </button>
  </div>
  <?php endif; ?>

  <h3 class="h3-title">问题简述</h3>
  <table class="layui-table layui-table-form">
    <tr>
      <td class="layui-td-gray-2">项目问题</td>
      <td>
        <div id="workorder-content">
          <?= $detail['content'] ?>
        </div>
      </td>
      <td class="layui-td-gray-2">备注</td>
      <td>{$detail.remark}</td>
    </tr>
  </table>

</form>

<script>
  //判断工单状态
  // 判断工单状态，禁用表单项
  document.addEventListener("DOMContentLoaded", function () {
    var detail = <?php echo json_encode(isset($detail) ? $detail : (object)[]); ?>;
    var status = parseInt(detail.status, 10);

    // 获取所有表单元素
    var formElem = document.querySelector("form.layui-form");
    var allInputs = formElem ? formElem.querySelectorAll("input, select, textarea, button[lay-submit]") : [];

    // 如果status为3或4，禁用所有表单项
    if (status === 3 || status === 4) {
      allInputs.forEach(function (el) {
        // 只允许工单状态选择4
        if (el.name === "status") {
          // 只保留4选项
          Array.from(el.options).forEach(function(opt) {
            if (opt.value !== "4" && opt.value !== "") {
              opt.disabled = true;
              opt.style.display = "none";
            } else if (opt.value === "4") {
              opt.selected = true;
            }
          });
          el.disabled = false;
        } else {
          el.disabled = true;
        }
      });
    }

    // 如果status为4，全部禁用（包括工单状态）
    if (status === 4) {
      allInputs.forEach(function (el) {
        el.disabled = true;
      });
    }
  });

  
  // 获取URL参数id
  function getQueryId() {
    var match = window.location.pathname.match(/\/edit\/id\/(\d+)/);
    return match ? match[1] : "";
  }
  var id = getQueryId();
  // 赋值给input（如果不是php渲染，也可保留此段，防止页面未渲染id时赋值）
  document.addEventListener("DOMContentLoaded", function () {
    var idInput = document.getElementById("id");
    if (idInput && !idInput.value) {
      idInput.value = id;
    }
  });

  layui.use(["form", "layer"], function () {
    var form = layui.form,
      layer = layui.layer;

    layer.photos({
      photos: '#workorder-content',
      anim: 5
    });

    // 渲染处理人下拉框并设置默认值
    // var detail = <?php echo json_encode(isset($detail) ? $detail : (object)[]); ?>;
    var detail = <?php echo json_encode(isset($detail) ? $detail : (object)[]); ?>;
    fetch("/api/index/getallstaff")
      .then((response) => response.json())
      .then((data) => {
        var select = document.querySelector('select[name="solve"]');
        select.innerHTML = '<option value="">请选择处理人</option>';
        data.data.forEach((solve) => {
          var option = document.createElement("option");
          option.value = solve.id;
          option.innerText = solve.name;
          // 设置选中
          if (detail.solve && String(detail.solve) === String(solve.id)) {
            option.selected = true;
          }
          select.appendChild(option);
          console.log('detail.solve:', detail.solve, 'solve.id:', solve.id, 'equal:', String(detail.solve) === String(solve.id));
        });
        form.render("select");

        // 渲染默认值（工单状态）
        if (detail && typeof detail.status !== "undefined") {
          form.val("webform", {
            status: detail.status,
          });
        }
      })
      .catch((error) => {
        console.error("Error:", error);
      });


    // 监听提交事件
    form.on("submit(webform)", function (data) {
      // 发送请求并处理响应
      fetch("/workorder/index/edit/" + id, {
        method: "POST",
        body: JSON.stringify(data.field),
        headers: {
          "Content-Type": "application/json",
        },
      })
        .then((response) => response.json())
        .then((result) => {
          layer.msg(result.msg);
          if (result.code === 2) {
            setTimeout(function () {
              var index = parent.layer.getFrameIndex(window.name);
              parent.layer.close(index);
              parent.location.reload(); // 刷新父页面
            }, 1000);
          }
        });

      return false;
    });
  });
</script>
<style>
  .page-content img {
    padding: 15px;
  }

  .layui-layer-shade {
    background-color: rgba(0, 0, 0, 0.5) !important;
  }

  .pt-1 {
    margin-top: 15px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    width: 100%;
  }

  .layui-table {
    margin-bottom: 20px;
  }
</style>