public-fuse/src/view/organization/edit.vue

<template>
  <el-form ref="form" :model="bindDept" label-width="84px" class="camera-from">
    <el-form-item label="组织名称" class="mandatory">
      <el-input
        v-model="bindDept.name"
        maxlength="50"
        placeholder="请输入组织名称"
      ></el-input>
    </el-form-item>
    <el-form-item label="组织类型" class="mandatory">
      <el-radio-group v-model="bindDept.deptType">
        <el-radio
          v-for="option in deptTypeOptions"
          :label="option.value"
          :value="option.value"
          :key="option.value"
        >
          {{ option.label }}
        </el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="上级组织" class="mandatory">
      <el-cascader
        ref="myCascader"
        style="width: 100%"
        :modelValue="superiorValue"
        @update:modelValue="(val: string[]) => updateSuperiorValue(val)"
        :options="organTrees"
        :props="{
          checkStrictly: true,
          label: 'name',
          value: 'id',
          disabled: 'disabled',
        }"
      />
    </el-form-item>
    <el-form-item label="负责人">
      <el-input
        v-model="bindDept.leader"
        maxlength="30"
        placeholder="请输入"
      ></el-input>
    </el-form-item>
    <el-form-item label="联系电话">
      <el-input
        v-model.trim="bindDept.phone"
        maxlength="50"
        placeholder="请输入联系电话"
      ></el-input>
    </el-form-item>
    <el-form-item label="备注">
      <el-input
        v-model="bindDept.remark"
        maxlength="500"
        type="textarea"
        placeholder="请输入备注"
      ></el-input>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { deptTypeOptions } from "@/constant/organization";
import {
  Organization,
  addOrganization,
  getOrganizationTree,
  setOrganization,
} from "@/store/organization";
import { computed, onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import { PHONE } from "@/constant/REG";
import { QuiskExpose } from "@/helper/mount";

const props = defineProps<{ dept?: Organization }>();

const queryPathById = (
  id: string,
  current: Organization[]
): string[] | null => {
  for (const item of current) {
    if (item.id === id) {
      return [item.id];
    } else if (item.children) {
      const cItem = queryPathById(id, item.children);
      if (cItem) {
        return [item.id, ...cItem];
      }
    }
  }
  return null;
};
const bindDept = ref<Organization>(
  (props.dept ? { ...props.dept } : {}) as Organization
);
const organTrees = ref<Organization[]>([]);
const superiorValue = computed(() => {
  if (bindDept.value.parentId) {
    return queryPathById(bindDept.value.parentId, organTrees.value) || [];
  } else {
    return [];
  }
});

const updateSuperiorValue = (value: string[]) => {
  bindDept.value.parentId = value[value.length - 1];
  bindDept.value.level = value.length + 1;
};

defineExpose<QuiskExpose>({
  async submit() {
    const { name, deptType, parentId, phone } = bindDept.value;
    if (!name || !name.trim()) {
      ElMessage.error("组织名称不能为空！");
      throw "组织名称不能为空！";
    } else if (!deptType) {
      ElMessage.error("组织类型不能为空！");
      throw "组织类型不能为空！";
    } else if (!parentId) {
      ElMessage.error("上级组织不能为空！");
      throw "上级组织不能为空！";
    } else if (phone && !PHONE.REG.test(phone)) {
      ElMessage.error("请输入11位正确手机号。");
      throw "请输入11位正确手机号。";
    }

    await (bindDept.value.id
      ? setOrganization(bindDept.value, superiorValue.value)
      : addOrganization(bindDept.value, superiorValue.value));
    return true;
  },
});

onMounted(async () => {
  const trees = await getOrganizationTree("1");
  const changeStatus = (trees: Organization[], fDisabled: boolean = false) =>
    trees.map((item) => {
      const disabled = fDisabled || item.id === bindDept.value.id;
      return {
        ...item,
        disabled,
        children: item.children && changeStatus(item.children, disabled),
      };
    });

  organTrees.value = changeStatus(trees);
});
</script>