pms-app/pages/ruihen-task/components/form.vue

<script setup>
import {
  computed,
  nextTick,
  onMounted,
  ref,
  reactive,
  defineExpose,
  watch,
} from "vue";
import { useDataDictStore } from "@/store/modules/dataDict";
import {
  selectedDeptsEmployee,
  getRuiHenProjectInfoPage,
  getDevicesByDepts,
  getRuiHenTaskDetail1,
} from "@/api/ruihen";
import { specifiedSimpleDepts } from "@/api";
import { getDeptId } from "@/utils/auth";
import DaTree from "@/components/da-tree/index.vue";

const props = defineProps({
  type: {
    type: String,
    default: "create",
  },
  id: {
    type: Number,
    default: null,
  },
});

const dictStore = useDataDictStore();

const isReadonly = computed(() => props.type === "detail");

const createInitialForm = () => ({
  id: "",
  projectId: undefined,
  wellName: "",
  location: "",
  technique: undefined,
  workloadDesign: undefined,
  workloadUnit: undefined,
  deptIds: [],
  deviceIds: [],
  responsiblePerson: undefined,
  remark: "",
});

const formRef = ref(null);
const form = ref(createInitialForm());

const rules = reactive({
  projectId: {
    rules: [{ required: true, errorMessage: "请选择合同" }],
  },
  wellName: {
    rules: [{ required: true, errorMessage: "请输入井号" }],
  },
  location: {
    rules: [{ required: true, errorMessage: "请输入施工地点" }],
  },
  technique: {
    rules: [{ required: true, errorMessage: "请选择施工工艺" }],
  },
  workloadDesign: {
    rules: [{ required: true, errorMessage: "请输入设计工作量" }],
  },
  workloadUnit: {
    rules: [{ required: true, errorMessage: "请选择工作量单位" }],
  },
  deptIds: {
    rules: [{ required: true, errorMessage: "请选择施工队伍" }],
  },
  deviceIds: {
    rules: [{ required: true, errorMessage: "请选择施工设备" }],
  },
  responsiblePerson: {
    rules: [{ required: true, errorMessage: "请选择责任人" }],
  },
});

const validate = async () => {
  return await formRef.value?.validate();
};

const buildSubmitData = () => {
  return {
    ...(form.value.id ? { id: form.value.id } : {}),
    projectId: form.value.projectId,
    wellName: form.value.wellName,
    location: form.value.location,
    technique: form.value.technique,
    workloadDesign: form.value.workloadDesign,
    workloadUnit: form.value.workloadUnit,
    deptIds: form.value.deptIds,
    deviceIds: form.value.deviceIds,
    responsiblePerson: [form.value.responsiblePerson],
    remark: form.value.remark,
    platformWell: "0",
  };
};

const defaultProps = computed(() => (label) => ({
  inputBorder: false,
  clearable: false,
  placeholder: isReadonly.value ? " " : `请输入${label}`,
  style: {
    "text-align": "right",
  },
  styles: {
    disableColor: "#fff",
  },
}));

const contractPopup = ref(null);
const contractPaging = ref(null);
const contractList = ref([]);
const contractSearchValue = ref("");
const contractTempProjectId = ref("");
const selectedContractLabel = ref("");

const contractSearchInputStyles = reactive({
  backgroundColor: "#f5f5f5",
  color: "#333",
});

const contractDisplayText = computed(() => {
  if (!form.value.projectId) return "";

  const currentContract = contractList.value.find(
    (item) => String(item.id) === String(form.value.projectId)
  );

  return selectedContractLabel.value || currentContract?.contractName || "";
});

const syncSelectedContractLabel = (list = []) => {
  if (!form.value.projectId) return;

  const currentContract = list.find(
    (item) => String(item.id) === String(form.value.projectId)
  );

  if (currentContract?.contractName) {
    selectedContractLabel.value = currentContract.contractName;
  }
};

const queryContractList = async (pageNo, pageSize) => {
  try {
    const res = await getRuiHenProjectInfoPage({
      deptId: getDeptId(),
      pageNo,
      pageSize,
      ...(contractSearchValue.value
        ? { contractName: contractSearchValue.value }
        : {}),
    });

    const list = res?.data?.list || [];
    const total = res?.data?.total || 0;

    syncSelectedContractLabel(list);
    contractPaging.value?.completeByTotal(list, total);
  } catch (error) {
    contractPaging.value?.complete(false);
  }
};

const searchContractList = () => {
  contractPaging.value?.reload();
};

const openContractPopup = () => {
  contractSearchValue.value = "";
  contractTempProjectId.value = form.value.projectId
    ? String(form.value.projectId)
    : "";
  contractPopup.value?.open();

  nextTick(() => {
    contractPaging.value?.reload();
  });
};

const closeContractPopup = () => {
  contractPopup.value?.close();
};

const handleContractRadioChange = (event) => {
  contractTempProjectId.value = event.detail.value;
};

const handleContractRowClick = (item) => {
  contractTempProjectId.value = String(item.id);
};

const handleContractConfirm = () => {
  if (!contractTempProjectId.value) {
    uni.showToast({
      title: "请选择合同",
      icon: "none",
    });
    return;
  }

  const currentContract = contractList.value.find(
    (item) => String(item.id) === contractTempProjectId.value
  );
  const fallbackProjectId = Number(contractTempProjectId.value);

  form.value.projectId =
    currentContract?.id ??
    (Number.isNaN(fallbackProjectId)
      ? contractTempProjectId.value
      : fallbackProjectId);
  selectedContractLabel.value =
    currentContract?.contractName || selectedContractLabel.value;

  closeContractPopup();
};

const techniqueOptions = ref([]);
const workloadUnitOptions = ref([]);

const loadDictOptions = async () => {
  if (dictStore.dataDict.length <= 0) {
    await dictStore.loadDataDictList();
  }

  techniqueOptions.value = dictStore
    .getIntDictOptions("rq_iot_project_technology_rh")
    .map((item) => ({
      text: item.label,
      value: item.value,
    }));

  workloadUnitOptions.value = dictStore
    .getIntDictOptions("rq_iot_project_measure_unit")
    .map((item) => ({
      text: item.label,
      value: item.value,
    }));
};

const deptOptions = ref([]);
const treeData = ref([]);
const deptLoading = ref(false);

const handleTree = (data, id, parentId, children) => {
  if (!Array.isArray(data)) {
    console.warn("data must be an array");
    return [];
  }
  const config = {
    id: id || "id",
    parentId: parentId || "parentId",
    childrenList: children || "children",
  };

  const childrenListMap = {};
  const nodeIds = {};
  const tree = [];

  for (const d of data) {
    const parentId = d[config.parentId];
    if (childrenListMap[parentId] == null) {
      childrenListMap[parentId] = [];
    }
    nodeIds[d[config.id]] = d;
    childrenListMap[parentId].push(d);
  }

  for (const d of data) {
    const parentId = d[config.parentId];
    if (nodeIds[parentId] == null) {
      tree.push(d);
    }
  }

  for (const t of tree) {
    adaptToChildrenList(t);
  }

  function adaptToChildrenList(o) {
    if (childrenListMap[o[config.id]] !== null) {
      o[config.childrenList] = childrenListMap[o[config.id]];
    }
    if (o[config.childrenList]) {
      for (const c of o[config.childrenList]) {
        adaptToChildrenList(c);
      }
    }
  }

  return tree;
};

async function loadDeptOptions() {
  deptLoading.value = true;
  try {
    function sortTreeBySort(treeNodes) {
      if (!treeNodes || !Array.isArray(treeNodes)) return treeNodes;
      const sortedNodes = [...treeNodes].sort((a, b) => {
        const sortA = a.sort != null ? a.sort : 999999;
        const sortB = b.sort != null ? b.sort : 999999;
        return sortA - sortB;
      });

      sortedNodes.forEach((node) => {
        node.disabled = node.type !== "3";
        if (node.children && Array.isArray(node.children)) {
          node.children = sortTreeBySort(node.children);
        }
      });
      return sortedNodes;
    }

    const depts = await specifiedSimpleDepts(getDeptId());

    deptOptions.value = depts.data.map((item) => ({
      text: item.name,
      value: item.id,
      raw: item,
    }));
    treeData.value = sortTreeBySort(handleTree(depts.data));
  } catch (error) {
  } finally {
    deptLoading.value = false;
  }
}

const popup = ref();

const openPopup = () => {
  popup.value.open();
};

const selectDeptId = ref("");

function handleTreeChange(values) {
  selectDeptId.value = values;
}

function handleConfirm() {
  form.value.deptIds = [selectDeptId.value];
  popup.value.close();
  loadDeviceOptions();
  loadUserOptions();
}

const deviceOptions = ref([]);
const deviceLoading = ref(false);

const loadDeviceOptions = async (init = false) => {
  deviceOptions.value = [];
  if (!init) form.value.deviceIds = [];

  if (!form.value.deptIds || form.value.deptIds.length === 0) {
    return;
  }

  deviceLoading.value = true;
  try {
    const res = await getDevicesByDepts({ deptIds: form.value.deptIds });
    deviceOptions.value = res.data.map((item) => ({
      text: `${item.deviceCode} ${item.deviceName}`,
      value: item.id,
      raw: item,
    }));

    form.value.deviceIds = deviceOptions.value.map((item) => item.value);
  } finally {
    deviceLoading.value = false;
  }
};

const userOptions = ref([]);
const userLoading = ref(false);

const loadUserOptions = async (init = false) => {
  userOptions.value = [];
  if (!init) form.value.responsiblePerson = undefined;

  if (!form.value.deptIds || form.value.deptIds.length === 0) {
    return;
  }

  userLoading.value = true;
  try {
    const res = await selectedDeptsEmployee({
      deptIds: form.value.deptIds,
    });
    userOptions.value = res.data.map((item) => ({
      text: item.nickname,
      value: item.id,
      raw: item,
    }));
  } finally {
    userLoading.value = false;
  }
};

const loadDetail = async (id) => {
  if (!id) return;

  const res = await getRuiHenTaskDetail1({ id });

  const data = res.data.list[0] || createInitialForm();

  Object.assign(form.value, {
    id: data.id,
    projectId: data.projectId,
    wellName: data.wellName,
    location: data.location,
    technique: Number(data.technique),
    workloadDesign: data.workloadDesign,
    workloadUnit: Number(data.workloadUnit),
    deptIds: data.deptIds || [],
    deviceIds: data.deviceIds || [],
    responsiblePerson: data.responsiblePerson
      ? data.responsiblePerson[0]
      : undefined,
    remark: data.remark,
  });

  selectedContractLabel.value = data.contractName || "";

  loadDeviceOptions(true);
  loadUserOptions(true);
};

watch(
  () => props.id,
  async (newId) => {
    if (props.type !== "create" && newId) {
      await loadDetail(newId);
    }
  },
  { immediate: true }
);

watch(
  () => form.value.projectId,
  (value) => {
    if (!value) {
      selectedContractLabel.value = "";
      contractTempProjectId.value = "";
    }
  }
);

onMounted(async () => {
  await Promise.all([loadDictOptions(), loadDeptOptions()]);
});

defineExpose({
  form,
  formRef,
  validate,
  buildSubmitData,
});
</script>

<template>
  <view class="content">
    <uni-forms
      ref="formRef"
      labelWidth="auto"
      :model="form"
      :rules="rules"
      validateTrigger="submit"
      err-show-type="toast">
      <uni-forms-item label="合同" name="projectId" required>
        <view class="select-with-button">
          <view
            class="popup-select-value"
            :class="{ 'popup-select-placeholder': !contractDisplayText }"
            @click="!isReadonly && openContractPopup()">
            {{ contractDisplayText || "请选择合同" }}
          </view>
          <button
            v-if="!isReadonly"
            class="popup-button"
            type="primary"
            size="mini"
            @click="openContractPopup">
            选择
          </button>
        </view>
      </uni-forms-item>
      <uni-forms-item label="井号" name="wellName" required>
        <uni-easyinput
          v-bind="defaultProps('井号')"
          v-model="form.wellName"
          :disabled="isReadonly" />
      </uni-forms-item>
      <uni-forms-item label="施工地点" name="location" required>
        <uni-easyinput
          v-bind="defaultProps('施工地点')"
          v-model="form.location"
          :disabled="isReadonly" />
      </uni-forms-item>
      <uni-forms-item label="施工工艺" name="technique" required>
        <uni-data-select
          :clear="true"
          align="right"
          placeholder="请选择施工工艺"
          :localdata="techniqueOptions"
          placement="bottom"
          hideRight
          :disabled="isReadonly"
          v-model="form.technique" />
      </uni-forms-item>
      <uni-forms-item label="设计工作量" name="workloadDesign" required>
        <uni-easyinput
          type="number"
          v-bind="defaultProps('设计工作量')"
          v-model.number="form.workloadDesign"
          :disabled="isReadonly" />
      </uni-forms-item>
      <uni-forms-item label="工作量单位" name="workloadUnit" required>
        <uni-data-select
          :clear="true"
          align="right"
          placeholder="请选择工作量单位"
          :localdata="workloadUnitOptions"
          placement="bottom"
          hideRight
          :disabled="isReadonly"
          v-model="form.workloadUnit" />
      </uni-forms-item>
      <uni-forms-item label="施工队伍" name="deptIds" required>
        <view class="select-with-button">
          <uni-data-select
            :clear="true"
            align="right"
            placeholder="请选择施工队伍"
            :localdata="deptOptions"
            placement="bottom"
            hideRight
            :disabled="true"
            multiple
            v-model="form.deptIds" />
          <button
            v-if="!isReadonly"
            class="popup-button"
            type="primary"
            size="mini"
            :disabled="deptLoading"
            @click="openPopup">
            选择
          </button>
        </view>
      </uni-forms-item>
      <uni-forms-item label="施工设备" name="deviceIds" required>
        <uni-data-select
          :clear="true"
          align="right"
          placeholder="请选择施工设备"
          :localdata="deviceOptions"
          placement="bottom"
          hideRight
          multiple
          :disabled="isReadonly || deviceLoading"
          v-model="form.deviceIds">
          <template #selected="{ selectedItems }">
            <view class="device-selected-box">
              <view v-if="selectedItems.length" class="device-selected-list">
                <view
                  v-for="item in selectedItems"
                  :key="item.value"
                  class="device-selected-item">
                  {{ item.text }}
                </view>
              </view>
              <view v-else class="device-selected-placeholder">
                请选择施工设备
              </view>
            </view>
          </template>
        </uni-data-select>
      </uni-forms-item>
      <uni-forms-item label="责任人" name="responsiblePerson" required>
        <uni-data-select
          :clear="true"
          align="right"
          placeholder="请选择责任人"
          :localdata="userOptions"
          placement="bottom"
          hideRight
          :disabled="isReadonly || userLoading"
          v-model="form.responsiblePerson" />
      </uni-forms-item>
      <uni-forms-item label="备注" name="remark">
        <uni-easyinput
          type="textarea"
          autoHeight
          v-bind="defaultProps('备注')"
          v-model="form.remark"
          :disabled="isReadonly"
          :maxlength="1000" />
      </uni-forms-item>
    </uni-forms>
  </view>

  <uni-popup
    ref="contractPopup"
    type="bottom"
    :is-mask-click="false"
    border-radius="10px 10px 0 0">
    <z-paging
      ref="contractPaging"
      v-model="contractList"
      class="contract-popup-paging"
      style="top: 140px"
      :default-page-size="20"
      @query="queryContractList">
      <template #top>
        <view class="contract-popup-top">
          <view class="contract-popup-header">
            <text class="contract-popup-action" @click="closeContractPopup">
              取消
            </text>
            <text class="contract-popup-title">选择合同</text>
            <text
              class="contract-popup-action primary"
              @click="handleContractConfirm">
              确定
            </text>
          </view>
          <view class="contract-search-row">
            <uni-easyinput
              v-model="contractSearchValue"
              :inputBorder="false"
              :styles="contractSearchInputStyles"
              placeholder="请输入合同名称"
              @confirm="searchContractList" />
            <button
              class="mini-btn contract-search-button"
              type="primary"
              size="mini"
              @click="searchContractList">
              搜索
            </button>
          </view>
        </view>
      </template>

      <radio-group @change="handleContractRadioChange">
        <view class="contract-popup-list">
          <view
            v-for="item in contractList"
            :key="item.id"
            class="contract-popup-item"
            :class="{ active: String(item.id) === contractTempProjectId }"
            @click="handleContractRowClick(item)">
            <view class="contract-popup-item-main">
              <view class="contract-popup-item-name">
                {{ item.contractName || "--" }}
              </view>
              <!-- <view
                v-if="item.projectNo || item.contractCode"
                class="contract-popup-item-desc">
                {{ item.projectNo || item.contractCode }}
              </view> -->
            </view>
            <radio
              :value="String(item.id)"
              :checked="String(item.id) === contractTempProjectId"
              color="#2979ff" />
          </view>
        </view>
      </radio-group>
    </z-paging>
  </uni-popup>

  <uni-popup ref="popup" type="bottom">
    <view class="popup-content">
      <view class="tree">
        <DaTree
          :data="treeData"
          labelField="name"
          valueField="id"
          disabledField="disabled"
          defaultExpandAll
          checkedDisabled
          :defaultCheckedKeys="form.deptIds[0]"
          @change="handleTreeChange"></DaTree>
      </view>
      <button class="mini-btn" type="primary" @click="handleConfirm">
        确定
      </button>
    </view>
  </uni-popup>
</template>

<style lang="scss" scoped>
.content {
  background-color: #fff;
  padding: 16px;
  border-radius: 8px;
  box-sizing: border-box;
}

.uni-forms {
  margin-top: 10px;
}

:deep(.uni-forms-item) {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  border-bottom: 1px dashed #cacccf;
}

:deep(.uni-forms-item__content) {
  text-align: right;
}

:deep(.uni-forms-item__label) {
  height: 44px;
  font-weight: 500;
  font-size: 14px;
  color: #333 !important;
  width: max-content !important;
}

:deep(.uni-select) {
  border: none;
  text-align: right;
  padding-right: 10px;
}

:deep(.uniui-bottom:before) {
  content: "\e6b5" !important;
  font-size: 16px !important;
}

:deep(.uni-easyinput__content-textarea) {
  min-height: inherit;
  margin: 10px;
}

:deep(.uni-textarea-textarea:disabled),
:deep(.uni-input-input:disabled),
:deep(.is-disabled) {
  color: #333 !important;
}

:deep(.uni-select--disabled) {
  background-color: #fff;
}

.select-with-button {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.readonly-input {
  flex: 1;
}

.popup-select-value {
  flex: 1;
  min-height: 32px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: #333;
  font-size: 14px;
  line-height: 1.4;
  text-align: right;
  word-break: break-all;
}

.popup-select-placeholder {
  color: #999;
}

.contract-popup-paging {
  background-color: #fff;
  border-radius: 10px 10px 0 0;
}

.contract-popup-top {
  padding: 16px;
  padding-bottom: 10px;
  background-color: #fff;
}

.contract-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 15px;
}

.contract-popup-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.contract-popup-action {
  color: #666;
}

.contract-popup-action.primary {
  color: #2979ff;
}

.contract-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contract-search-button {
  width: 72px;
  margin: 0;
  flex-shrink: 0;
}

.contract-popup-list {
  padding: 0 16px 16px;
  background-color: #fff;
}

.contract-popup-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #f0f0f0;
}

.contract-popup-item.active {
  color: #2979ff;
}

.contract-popup-item-main {
  flex: 1;
  min-width: 0;
}

.contract-popup-item-name {
  font-size: 14px;
  line-height: 1.5;
  color: inherit;
  word-break: break-all;
}

.contract-popup-item-desc {
  margin-top: 4px;
  font-size: 12px;
  color: #999;
}

.device-selected-box {
  width: 100%;
  min-height: 24px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.device-selected-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.device-selected-item {
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 4px;
  background: #f3f5f9;
  color: #333;
  font-size: 12px;
  line-height: 1.4;
  word-break: break-all;
}

.device-selected-placeholder {
  color: #999;
  font-size: 14px;
}

:deep(.popup-button) {
  width: 62px;
  margin: 0;
  flex-shrink: 0;
}

.popup-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px;
  height: 500px;
  background-color: #fff;
}

.tree {
  flex: 1;
  max-height: 420px;
}

.popup-content button {
  width: 100%;
  height: 44px;
}

:deep(.uni-select__selector-item) {
  padding: 0;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;

  uni-text {
    padding: 0 10px;
  }
}

:deep(.uni-select__selector-item uni-text),
:deep(.uni-select__selector-item uni-text span) {
  display: inline-block;
  white-space: nowrap;
  min-width: max-content;
}
</style>