operation-Backend/src/views/organizationManagement/organization/subOrganizatioAdd.vue

<template>
  <div>
    <PageMain style="padding: 20px;margin-bottom: 100px;">
      <ElRow :gutter="60">
        <ElCol :md="24" :lg="24" style="padding-bottom: 10px;font-size: 14px;">
          <span class="strong">基本信息</span>
        </ElCol>
        <el-form :model="deptform" label-width="120px" :rules="deptformRules" label-position="top" ref="deptFormRef"
          style="max-width: 1000px;" class="flex a-c f-wrap" :size="fromSize">
          <ElCol :md="24" :lg="12">
            <el-form-item label="机构名称" prop="name">
              <el-input v-model="deptform.name" placeholder="请输入50个字以内的机构名称" />
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="上级机构" prop="parentId" >
              <el-cascader v-model="parentIdareaOptionsValue" :disabled="parentIdShow" placeholder="请选择地区" style="width: 100%;" filterable
                clearable :options="parentIdareaOptions" :props="parentIdprops" @change="parentIdChange"
                :show-all-levels="false" />
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="机构类型" prop="comType">
              <el-select v-model="deptform.comType" placeholder="请选择类型" clearable>
                <el-option v-for="(item, index) in sysTypelist" :key="index" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="地区" prop="province">
              <el-cascader v-model="provinceoptionsValue" placeholder="请选择地区" style="width: 100%;" filterable clearable
                :options="areaOptions" :props="props" @change="provinceChange" />
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="展业范围" prop="exhibitionScope">
              <el-select v-model="deptform.exhibitionScope" multiple placeholder="请选择展业范围" clearable>
                <el-option :label="item.label" v-for="(item, index) in dictLists.exhibition_scopeList" :key="index"
                  :value="item.label" />
              </el-select>
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="机构地址" prop="address">
              <el-input v-model="deptform.address" placeholder="请输入机构地址" />
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="机构负责人" prop="leaderId">
              <el-input v-model="deptform.leaderId" placeholder="请输入机构负责人" />

            </el-form-item>
          </ElCol>
        </el-form>
      </ElRow>

    </PageMain>
    <FixedActionBar>
      <ElButton type="primary" size="large" @click="submitForm(deptFormRef)">
        保存
      </ElButton>
      <ElButton size="large" @click='router.back()'>
        取消
      </ElButton>
    </FixedActionBar>
    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>

</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { FormRules, FormInstance, ComponentSize, ElMessage } from 'element-plus';
// import { regionData } from "element-china-area-data";
import { useRoute } from 'vue-router';
import api from '@/api';
import router from '@/router';
const route = useRoute();
const code = ref(route.query.code);//租户id参数
const deptId = ref(route.query.deptId)//编辑数据id标识
const parentId = ref(route.query.parentId)//上级id标识
const provinceoptionsValue = ref()//省市区回显数据
const areaOptions = ref()//省市区数据
const parentIdShow=ref(false);//上级机构是否可修改
const parentIdareaOptions = ref();//上级机构数据
const parentIdareaOptionsValue = ref();//上级机构回显数据
const dialogImageUrl = ref('')
const dictLists = ref<{ [key: string]: any[] }>({});
const dialogVisible = ref(false)
const deptFormRef = ref<FormInstance>()
const fromSize = ref<ComponentSize>('large')
const props = {
  expandTrigger: 'hover' as const,
  value: 'areaCode',
  label: 'areaCname',
  children: 'child'
}
const parentIdprops = {
  expandTrigger: 'hover' as const,
  value: 'id',
  label: 'name',
  checkStrictly: true,
}
const deptform = ref({
  name: "",//机构名称
  parentId: "",//上级机构
  comType: "",//机构类型
  exhibitionScope: [],//展业范围
  province: "",//省
  city: "",//市
  area: "",//区
  address: "",//机构地址
  leaderId: "32131",//负责人id
  systemCode: code.value,//租户名称
  id: deptId.value,
})
const sysTypelist = ref([
  {
    id: "0",
    name: "保险公司",
  },
  {
    id: "1",
    name: "保险分公司",
  },
  {
    id: "2",
    name: "保险经济公司",
  },
  {
    id: "3",
    name: "汽车经销商",
  },
  {
    id: "4",
    name: "保险代理公司",
  }
])
const deptformRules = ref<FormRules>({
  name: [
    { required: true, trigger: 'blur', message: '请输入50个字以内的机构名称' },
    { max: 50, message: '请输入0~50个字符', trigger: 'blur' },
  ],
  parentId: [
    { required: true, trigger: 'change', message: '请选择上级机构' },
  ],
  comType: [
    { required: true, trigger: 'blur', message: '请输入简称' },
  ],
  exhibitionScope: [
    { required: true, trigger: 'change', message: '请选择展业范围' },
  ],
  province: [
    { required: true, trigger: 'change', message: '请选择地区' },
  ],
  address: [
    { required: true, trigger: 'blur', message: '请输入机构地址' },
  ],
});
onBeforeMount(() => {
  dictType('exhibition_scope');//展业范围
  getDeptTree();//获取上级
  queryTreeQuery();//获取区划数据
  deptInfo();//获取机构信息详情

  if(parentId.value){
    parentIdareaOptionsValue.value=parentId.value;
    //子机构向下添加，上级机构无法修改

    parentIdShow.value=true;
  }
});
//获取上级机构
const getDeptTree = () => {
  api.dept.getDeptTree({ sysCode: code.value }).then((res: any) => {
    if (res.code == '200') {
      parentIdareaOptions.value = res.data;
    } else {
      ElMessage({
        type: 'success',
        message: res.msg,
        plain: true,
      })
    }
  });
}
//获取区划数据
const queryTreeQuery = () => {
  api.dept.queryTree().then((res: any) => {
    if (res.code == '200') {
      areaOptions.value = res.data;
    } else {
      ElMessage({
        type: 'success',
        message: res.msg,
        plain: true,
      })
    }
  });
}
//获取机构详细信息
const deptInfo = () => {
  if (deptId.value && code.value) {
    api.dept.deptGet(deptId.value).then((res: any) => {
      if (res.code == '200') {
        deptform.value.name = res.data.name;
        deptform.value.parentId = res.data.parentId;
        deptform.value.comType = res.data.comType;
        parentIdareaOptionsValue.value = res.data.parentId;
        provinceoptionsValue.value = [res.data.province, res.data.city, res.data.area]
        deptform.value.exhibitionScope = res.data.exhibitionScope;
        deptform.value.address = res.data.address;
        deptform.value.leaderId = res.data.leaderId;
        deptform.value.province = res.data.province;
        deptform.value.city = res.data.city;
        deptform.value.area = res.data.area;

      } else {
        ElMessage({
          type: 'success',
          message: res.msg,
          plain: true,
        })
      }
    });
  }

}
//字典信息处理
const dictType = (type: string) => {
  api.toolApi.dictType({ dictCode: type }).then((res: any) => {
    if (res.code == '200') {
      dictLists.value[type + 'List'] = res.data.map((item: any) => {
        return {
          value: item.value,
          label: item.label
        };
      });
    }
  });
}
//省市区回调
const provinceChange = (value: any) => {
  console.log(value)
  if (value && value[0] != null && value[1] != null && value[2] != null) {
    deptform.value.province = value[0];
    deptform.value.city = value[1];
    deptform.value.area = value[2];
  } else {
    deptform.value.province = "";
    deptform.value.city = "";
    deptform.value.area = "";
  }
}
//上级机构回调
const parentIdChange = (value: any) => {
  deptform.value.parentId = value[value.length - 1];
}
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      if (deptId.value) {
        api.dept.deptUpdate(deptform.value).then((res: any) => {
          if (res.code == 200) {
            ElMessage({
              type: 'success',
              message: res.msg,
              plain: true,
            })
            router.back();
          }
        })
      }else{
        api.dept.deptAdd(deptform.value).then((res: any) => {
        if (res.code == 200) {
          ElMessage({
            type: 'success',
            message: res.msg,
            plain: true,
          })
          router.back();
        }
      })
      }
    } else {
      ElMessage({
            type: 'error',
            message: '信息不完整',
            plain: true,
          })
    }
  })
}

</script>