docking-vue/src/views/user_management/department/add.vue

<template>
  <div>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="110px">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="上级部门">
            <el-tag>{{ parentName }}</el-tag>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" placeholder="这里输入名称..." />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="行政区域级别" prop="level">
            <el-select
              v-model="form.level"
              placeholder="请选择"
              @change="fnChangeLevel"
            >
              <el-option
                v-for="item in ADMINISTRATIVE_REGION_LEVEL_LIST"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="form.level" :span="12">
          <el-form-item :key="form.level" label="所属区域" prop="area">
            <app-area-cascader
              v-model="form.area"
              control-level
              :level="form.level"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="type === '2'" :span="12">
          <el-form-item label="部门类别" prop="category">
            <el-select v-model="form.category" placeholder="请选择">
              <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="parentId === '0'" :span="12">
          <el-form-item label="是否监管部门" prop="supervisory">
            <el-select v-model="form.supervisory" placeholder="请选择">
              <el-option
                v-for="item in WHETHER_LIST"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <template v-if="!!departmentId">
          <el-col :span="12">
            <el-form-item label="主管负责人" prop="headman">
              <app-user v-model="form.headman" splicing-label />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分管领导" prop="lrman">
              <app-user v-model="form.lrman" splicing-label />
            </el-form-item>
          </el-col>
        </template>
        <el-col :span="12">
          <el-form-item label="排序" prop="depOrder">
            <el-input
              v-model.number="form.depOrder"
              placeholder="这里输入排序..."
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="mt-10 tc">
      <el-button type="primary" @click="fnSubmit">保存</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import useForm from "@/hooks/useForm.js";
import { useRoute, useRouter } from "vue-router";
import AppAreaCascader from "@/components/area_cascader/index.vue";
import AppUser from "@/components/user/index.vue";
import {
  ADMINISTRATIVE_REGION_LEVEL_LIST,
  WHETHER_LIST,
} from "@/assets/js/constant.js";
import { debounce } from "throttle-debounce";
import {
  getDepartmentInfo,
  setDepartmentAdd,
  setDepartmentUpdate,
} from "@/request/user_management.js";
import { ElMessage } from "element-plus";

const route = useRoute();
const router = useRouter();
const { parentId, parentName, type, departmentId } = route.query;
const { formRef, validate } = useForm();
const form = ref({
  name: "",
  level: "",
  area: [],
  category: "",
  supervisory: "",
  headman: "",
  lrman: "",
  depOrder: "",
});
const parentInfo = {
  parentIds: "",
  parentNames: "",
  treeIds: "",
  treeNames: "",
};
const rules = {
  name: [{ required: true, message: "请输入部门名称", trigger: "blur" }],
  level: [{ required: true, message: "请选择部门级别", trigger: "change" }],
  area: [{ required: true, message: "请选择所属区域", trigger: "change" }],
  category: [{ required: true, message: "请选择部门类别", trigger: "change" }],
  supervisory: [
    { required: true, message: "请选择是否监管部门", trigger: "change" },
  ],
  depOrder: [{ required: true, message: "请输入排序", trigger: "blur" }],
};
const categoryList = [
  { id: "1", name: "行业监管" },
  { id: "2", name: "综合监管" },
];
const fnGetData = async () => {
  if (!departmentId) return;
  const { data } = await getDepartmentInfo(departmentId);
  form.value = data;
  form.value.area = [
    data.province,
    data.city,
    data.county,
    data.village,
    data.street,
  ].filter(Boolean);
  parentInfo.parentIds = data.parentIds;
  parentInfo.parentNames = data.parentNames;
  parentInfo.treeIds = data.treeIds;
  parentInfo.treeNames = data.treeNames;
};
fnGetData();
const fnGetDataParent = async () => {
  if (parentId === "0" || departmentId) return;
  const { data } = await getDepartmentInfo(parentId);
  const parentIds = data.parentIds.split(",");
  const parentNames = data.parentNames.split(",");
  const treeIds = data.treeIds.split(",");
  const treeNames = data.treeNames.split(",");
  parentIds.push(parentId);
  parentNames.push(parentName);
  parentInfo.parentIds = parentIds.filter(Boolean).join(",");
  parentInfo.parentNames = parentNames.filter(Boolean).join(",");
  parentInfo.treeIds = treeIds.filter(Boolean).join(",");
  parentInfo.treeNames = treeNames.filter(Boolean).join(",");
};
fnGetDataParent();
const fnChangeLevel = (event) => {
  if (event === 1) form.value.area = ["130000", "130300"];
  else form.value.area = [];
};
const fnSubmit = debounce(
  1000,
  async () => {
    await validate();
    const [province = "", city = "", county = "", village = "", street = ""] =
      form.value.area;
    const params = {
      ...form.value,
      ...parentInfo,
      province,
      city,
      county,
      village,
      street,
      type,
      parentId,
    };
    !departmentId
      ? await setDepartmentAdd(params)
      : await setDepartmentUpdate(params);
    ElMessage.success("操作成功");
    router.back();
  },
  { atBegin: true }
);
</script>

<style scoped lang="scss"></style>