feat: 部门详情, 编辑

src/views/system/department/api/index.js

@@ -0,0 +1,16 @@
+import request from '@/utils/request'
+
+export const getInfoById = (id) => {
+  return request({
+    url: `/admin/mosr/department/info/${id}`,
+    method: 'get',
+  })
+}
+
+export const setDeptInfo = (data) => {
+  return request({
+    url: '/admin/mosr/department/leader',
+    method: 'post',
+    data
+  })
+}

src/views/system/department/components/ToolToShowUserPicker.vue

@@ -0,0 +1,25 @@
+<template>
+  <el-button type="primary" link >
+    {{ modelValue }}
+  </el-button>
+</template>
+
+<script setup>
+import { ref, watch, watchEffect } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  }
+})
+
+// const emit = defineEmits('update: modelValue')
+
+const localText = ref('')
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/system/department/edit.vue

@@ -0,0 +1,148 @@
+<template>
+  <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 { getInfoById, setDeptInfo } from './api'
+import UserPicker from '../../workflow/process/common/UserPicker.vue';
+import Ttsup from './components/ToolToShowUserPicker.vue'
+import { reactive, ref } from 'vue';
+const route = useRoute()
+
+const form = 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 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 getInfo = async () => {
+  const { data } = await getInfoById(route.query.id)
+  console.log("🚀 ~ getInfo ~ res:", data)
+  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)
+
+}
+
+
+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: route.query.id
+  }
+  const res = await setDeptInfo(params)
+  console.log(res.data);
+}
+
+getInfo()
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/system/department/index.vue

@@ -33,18 +33,25 @@
     <el-table-column prop="departmentCode" label="部门编码"/>
     <el-table-column prop="departmentName" label="部门名称"/>
     <el-table-column prop="createTime" label="创建时间"/>
+    <el-table-column prop="oper" label="操作">
+      <template #default="{ row }">
+        <el-button type="primary" link @click="goEdit(row.departmentId)">编辑</el-button>
+      </template>
+    </el-table-column>
   </el-table>
 </template>
 
 <script setup>
 import {Search, Refresh,Sort} from "@element-plus/icons-vue";
 import {getDepartmentList} from "@/api/subsidiary";
+import { useRouter } from "vue-router";
 const queryInstance = ref()
 const queryParams = reactive({
   departmentCode: '',
   departmentMark: '',
   departmentName: ''
 })
+const router = useRouter()
 const loading = ref(true)
 const isExpand = ref(true)
 const list = ref([])
@@ -80,6 +87,15 @@ const getList =  () => {
     loading.value = false
   })
 }
+
+const goEdit = (id) => {
+  router.push({
+    name: 'Mosrdeptedit',
+    query: {
+      id
+    }
+  })
+}
 getList()
 </script>