mosr-web/src/components/organizationalStructure/Department.vue

<template>
  <baseTitle title="公司详情"></baseTitle>
  <fv-Form :schema="companySchema" @getInstance="(e)=>companyForm = e"></fv-Form>
  <baseTitle title="部门详情"></baseTitle>
  <fv-Form :schema="schema" @getInstance="(e)=>form = e"></fv-Form>
  <UserPicker ref="usrPickershipIds"  @ok="editshipIds"></UserPicker>
  <UserPicker ref="usrPickerHeadIds" @ok="editheadIds"></UserPicker>
  <UserPicker ref="usrPickerDeputyIds" @ok="editdeputyIds"></UserPicker>
</template>

<script setup lang="jsx">
import UserPicker from '@/views/workflow/process/common/UserPicker.vue';
import Ttsup from '@/views/system/department/components/ToolToShowUserPicker.vue'
import {getInfoById,setDeptInfo} from '@/views/system/department/api'
const props=defineProps({
  value:{
    type:String,
    default:''
  }
})
const form = ref()
const companyForm = ref()
const usrPickershipIds = ref()
const usrPickerHeadIds = ref()
const usrPickerDeputyIds = ref()
const departmentChargeLeadershipNames = ref()
const departmentHeadNames = ref()
const departmentalDeputyNames = ref()
const departmentChargeLeadershipIds = ref()
const departmentHeadIds = ref()
const departmentalDeputyIds = ref()
const companySchema = reactive([
  {
    label: '公司名称：',
    prop: 'companyName',
  },
  {
    label: '公司编码：',
    prop: 'companyCode'
  },
  {
    label: '创建时间：',
    prop: 'createTime'
  }
])
const schema = reactive([
  {
    label: '部门名字：',
    prop: 'departmentName',
  },
  {
    label: '部门标志：',
    prop: 'departmentMark'
  },
  {
    label: '部门分管领导：',
    prop: 'departmentChargeLeadershipIds',
    component: ()=><Ttsup modelValue={departmentChargeLeadershipNames.value} onClick={()=>{usrPickershipIds.value.showUserPicker()} } />
  },
  {
    label: '部门负责人：',
    prop: 'departmentHeadIds',
    component: ()=><Ttsup modelValue={departmentHeadNames.value} onClick={()=>{usrPickerHeadIds.value.showUserPicker()} } />
  },
  {
    label: '部门副职用户：',
    prop: 'departmentalDeputyIds',
    component: ()=><Ttsup modelValue={departmentalDeputyNames.value} onClick={()=>{departmentalDeputyIds.value.showUserPicker()} } />
  },
  {
    label: '创建时间：',
    prop: 'createTime'
  }
])
const emit = defineEmits(['update:value'])
const _value = computed({
  get() {
    return props.value;
  },
  set(value) {
    emit('update:value', value)
  }
})

const getInfo = async () => {
  const { data } = await getInfoById(_value.value)
  companyForm.value.setValues(data.company)
  const params = {
    createTime: data.createTime,
    departmentMark: data.departmentMark,
    departmentName: data.departmentName
  }
  departmentChargeLeadershipIds.value = data.departmentChargeLeadershipIds
  departmentHeadIds.value = data.departmentHeadIds
  departmentalDeputyIds.value = data.departmentalDeputyIds
  params.departmentChargeLeadershipIds = formatIdsToNames(data.departmentChargeLeadershipIds, data.departmentChargeLeadershipInfo, 'userId', 'nickName')
  departmentChargeLeadershipNames.value = params.departmentChargeLeadershipIds
  params.departmentHeadIds = formatIdsToNames(data.departmentHeadIds, data.departmentHeadInfo, 'userId', 'nickName')
  departmentHeadNames.value = params.departmentHeadIds
  params.departmentalDeputyIds = formatIdsToNames(data.departmentalDeputyIds, data.departmentalDeputyInfo, 'userId', 'nickName')
  departmentalDeputyNames.value = params.departmentalDeputyIds
  form.value.setValues(params)

}

getInfo()

const formatIdsToNames = (ids, infoList, key, viewKey) => {
  const resArr = []
  if(!ids?.length) return
  ids.forEach(item=>{
    infoList.forEach(v=>{
      item == v[key] && resArr.push(v[viewKey])
    })
  })
  return resArr.join(',')
}

const editshipIds = (list) => {
  // console.log("🚀 ~ editshipIds ~ list:", list)
  const arr = list.map(item=>item.name)
  departmentChargeLeadershipIds.value = list.map(item=>item.id)
  departmentChargeLeadershipNames.value = arr.join(',')
  setDeptmentInfo({
    departmentChargeLeadershipIds: departmentChargeLeadershipIds.value,
    departmentalDeputyIds: departmentalDeputyIds.value,
    departmentHeadIds: departmentHeadIds.value
  })
}

const editheadIds = (list) => {
  // console.log("🚀 ~ editshipIds ~ list:", list)
  const arr = list.map(item=>item.name)
  departmentHeadIds.value = list.map(item=>item.id)
  departmentHeadNames.value = arr.join(',')
  setDeptmentInfo({
    departmentChargeLeadershipIds: departmentChargeLeadershipIds.value,
    departmentalDeputyIds: departmentalDeputyIds.value,
    departmentHeadIds: departmentHeadIds.value
  })
}

const editdeputyIds = (list) => {
  // console.log("🚀 ~ editshipIds ~ list:", list)
  const arr = list.map(item=>item.name)
  departmentalDeputyIds.value = list.map(item=>item.id)
  departmentalDeputyNames.value = arr.join(',')
  setDeptmentInfo({
    departmentChargeLeadershipIds: departmentChargeLeadershipIds.value,
    departmentalDeputyIds: departmentalDeputyIds.value,
    departmentHeadIds: departmentHeadIds.value
  })
}

const setDeptmentInfo = async ({ departmentChargeLeadershipIds = [], departmentHeadIds = [], departmentalDeputyIds = []}) => {

  const params = {
    departmentChargeLeadershipIds,
    departmentHeadIds,
    departmentalDeputyIds,
    departmentId: _value.value
  }
  const res = await setDeptInfo(params)
  // console.log(res.data);
}


</script>

<style lang="scss" scoped>

</style>