人员负责人

src/views/system/user.vue

@@ -3,93 +3,86 @@
         <template #header>
             <div class="w-40">
                 <el-select v-model="searchForm.deptId" placeholder="选择岗位类型" clearable size="large">
-                    <el-option v-for="item in searchOrganization" :key="item.id" :label="item.deptName" :value="item.id" />
+                    <el-option v-for="item in searchOrganization" :label="item.deptName" :value="item.id"/>
                 </el-select>
             </div>
             <div class="w-64 ml-3">
-                <el-input v-model="searchForm.realName" size="large" placeholder="请输入名称搜索" clearable />
+                <el-input v-model="searchForm.realName" size="large" placeholder="请输入名称搜索" clearable/>
             </div>
             <div class="ml-3">
-                <el-button type="primary" size="large" @click="searchClick">
-                    <HcIcon name="search-2" />
+                <el-button type="primary" @click="searchClick" size="large">
+                    <HcIcon name="search-2"/>
                     <span>搜索</span>
                 </el-button>
             </div>
         </template>
         <template #extra>
-            <el-button type="primary" size="large" @click="addUserClick">
-                <HcIcon name="add" />
+            <el-button type="primary" @click="addUserClick" size="large">
+                <HcIcon name="add"/>
                 <span>创建账户</span>
             </el-button>
-            <el-button type="danger" size="large" :disabled="tableCheckedKeys.length <= 0" @click="delClick">
-                <HcIcon name="delete-bin-2" />
+            <el-button type="danger" @click="delClick" size="large" :disabled="tableCheckedKeys.length <= 0">
+                <HcIcon name="delete-bin-2"/>
                 <span>注销账户</span>
             </el-button>
         </template>
-        <HcTable :column="tableColumn" :datas="tableData" is-check :loading="tableLoaing" @selection-change="tableSelectionChange">
-            <template #status="{ row }">
-                <span>{{ row.status === 1 ? '启用' : '停用' }}</span>
+        <HcTable :column="tableColumn" :datas="tableData" isCheck @selection-change="tableSelectionChange" :loading="tableLoaing">
+            <template #status="{row}">
+                <span>{{row.status === 1 ? '启用': '停用'}}</span>
             </template>
-            <template #action="{ row }">
-                <el-button size="small" type="primary" @click="rowEidtClick(row)">
-                    编辑
-                </el-button>
+            <template #action="{row}">
+                <el-button size="small" type="primary" @click="rowEidtClick(row)">编辑</el-button>
             </template>
         </HcTable>
         <template #action>
-            <HcPages :pages="searchForm" @change="pageChange" />
+            <HcPages :pages="searchForm" @change="pageChange"></HcPages>
         </template>
 
-        <!-- 用户信息弹窗 -->
-        <HcDialog
-            bg-color="#ffffff" is-to-body is-table :show="formModal" :save-text="formModel.id ? '提交保存' : '确定创建'" :title="formModel.id ? '编辑账户' : '创建账户'"
-            widths="51rem" @save="formModalSave" @close="formModalClose"
+        <!--用户信息弹窗-->
+        <HcDialog bgColor="#ffffff" isToBody isTable :show="formModal" :saveText="formModel.id ? '提交保存' : '确定创建'" :title="formModel.id ? '编辑账户' : '创建账户'"
+                  @save="formModalSave" @close="formModalClose" widths="51rem"
         >
             <HcCardItem ui="hac-bg-grey" class="h-auto">
                 <template #header>
-                    <div class="hac-card-title">
-                        基础信息
-                    </div>
+                    <div class="hac-card-title">基础信息</div>
                 </template>
                 <template #extra>
-                    <span v-if="formModel.id" class="text-sm text-orange">如果不需要修改密码，就请不要填写密码信息</span>
+                    <span class="text-sm text-orange" v-if="formModel.id">如果不需要修改密码，就请不要填写密码信息</span>
                 </template>
                 <el-form ref="formRef" :model="formModel" :rules="formRules" size="large" label-width="auto" label-position="left">
                     <el-form-item label="登录账号:" prop="account">
-                        <el-input v-model="formModel.account" placeholder="仅支持英文或拼音" autocomplete="new-password" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" :disabled="!!formModel.id" />
+                        <el-input v-model="formModel.account" placeholder="仅支持英文或拼音" autocomplete="new-password" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" :disabled="!!formModel.id"/>
                     </el-form-item>
-                    <el-form-item label="登录密码:" :prop="formModel.id ? '' : 'password'">
-                        <el-input v-model="formModel.password" placeholder="请输入英文开头可包含数字的密码" autocomplete="new-password" show-password type="password" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" />
+                    <el-form-item label="登录密码:" :prop="formModel.id?'':'password'">
+                        <el-input v-model="formModel.password" placeholder="请输入英文开头可包含数字的密码" autocomplete="new-password" show-password type="password" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"/>
                     </el-form-item>
-                    <el-form-item label="确认密码:" :prop="formModel.id ? '' : 'password1'">
-                        <el-input v-model="formModel.password1" placeholder="请再次输入密码" autocomplete="new-password" show-password type="password" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" />
+                    <el-form-item label="确认密码:" :prop="formModel.id?'':'password1'">
+                        <el-input v-model="formModel.password1" placeholder="请再次输入密码" autocomplete="new-password" show-password type="password" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"/>
                     </el-form-item>
                 </el-form>
             </HcCardItem>
             <HcCardItem ui="hac-bg-grey" class="h-auto mt-4">
                 <template #header>
-                    <div class="hac-card-title">
-                        机构信息
-                    </div>
+                    <div class="hac-card-title">机构信息</div>
                 </template>
                 <el-form ref="formRef3" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
                     <el-form-item label="部门:" prop="deptId">
-                        <el-select v-model="formModel.deptId" placeholder="选择部门" style="width: 100%;" clearable @change="getpostData">
-                            <el-option v-for="item in sectionData" :key="item.id" :label="item.deptName" :value="item.id" />
+                        <el-select v-model="formModel.deptId" placeholder="选择部门" style="width: 100%;" @change="getpostData" clearable>
+                                        <el-option v-for="item in sectionData" :label="item.deptName" :value="item.id"/>
                         </el-select>
                     </el-form-item>
                     <el-form-item label="岗位:" prop="postId">
-                        <el-select v-model="formModel.postId" placeholder="选择岗位" style="width: 100%;" clearable :getdata="getpostData(formModel.deptId)">
-                            <el-option v-for="item in postData" :key="item.id" :label="item.deptName" :value="item.id" />
+                        <el-select v-model="formModel.postId" placeholder="选择岗位" style="width: 100%;" clearable  :getdata="getpostData(formModel.deptId)">
+                            <el-option v-for="item in postData" :label="item.deptName" :value="item.id" />
                         </el-select>
                     </el-form-item>
                     <el-form-item label="部门负责人:">
-                        <el-select v-model="isLeaderIds" placeholder="是否为部门负责人" style="width: 100%;" multiple clearable>
-                            <el-option v-for="item in sectionData" :key="item.id" :label="item.deptName" :value="item.id" />
+                        <el-select v-model="isLeaderIds" placeholder="是否为部门负责人"   style="width: 100%;" multiple clearable>
+                            <el-option v-for="item in userDeptData" :label="item.deptName" :value="item.id"/>
                         </el-select>
                     </el-form-item>
                 </el-form>
-           
+
                 <!-- <template v-for="(item, index) in formModel.deptList">
                     <el-form :ref="(el) => setFormItemRefs(el, index)" class="mt-4" :model="item" :rules="formRules" label-position="top" size="large">
                         <el-row :gutter="10">
@@ -128,44 +121,44 @@
 
             <HcCardItem ui="hac-bg-grey" class="h-auto mt-4">
                 <template #header>
-                    <div class="hac-card-title">
-                        详细信息
-                    </div>
+                    <div class="hac-card-title">详细信息</div>
                 </template>
                 <el-form ref="formRef1" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
                     <el-form-item label="用户姓名:" prop="realName">
-                        <el-input v-model="formModel.realName" />
+                        <el-input v-model="formModel.realName"/>
                     </el-form-item>
                     <el-form-item label="手机号码:" prop="phone">
-                        <el-input v-model="formModel.phone" placeholder="请输入绑定手机" />
+                        <el-input v-model="formModel.phone" placeholder="请输入绑定手机"/>
                     </el-form-item>
                     <el-form-item label="身份证号:">
-                        <el-input v-model="formModel.idNumber" />
+                        <el-input v-model="formModel.idNumber"/>
                     </el-form-item>
                     <el-form-item label="日单价:" prop="oneMoney">
-                        <el-input v-model="formModel.oneMoney" />
+                        <el-input v-model="formModel.oneMoney"/>
+
                     </el-form-item>
                     <el-form-item label="启用状态:" prop="status">
                         <el-select v-model="formModel.status" class="block">
-                            <el-option label="启用" :value="1" />
-                            <el-option label="停用" :value="0" />
+                            <el-option label="启用" :value="1"/>
+                            <el-option label="停用" :value="0"/>
                         </el-select>
                     </el-form-item>
                 </el-form>
             </HcCardItem>
         </HcDialog>
+
     </HcCard>
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
-import mainApi from '~api/system/user'
-import organizationApi from '~api/system/organization'
-import { arrToId, formValidate, getArrValue, isIdCard, isPhone } from 'js-fast-way'
-
-import { delMessage } from '~uti/tools'
-import { useAppStore } from '~src/store'
-const useAppState = useAppStore()
+import {ref, onMounted} from "vue";
+import mainApi from '~api/system/user';
+import organizationApi from '~api/system/organization';
+import {arrIndex, arrToId, formValidate, isPhone, getArrValue, isIdCard} from "js-fast-way"
+import {Plus, Delete} from '@element-plus/icons-vue'
+import {delMessage} from "~uti/tools";
+import {useAppStore} from "~src/store";
+const useAppState = useAppStore();
 
 onMounted(() => {
     getTableData()
@@ -176,7 +169,7 @@ onMounted(() => {
 const searchOrganization = ref([])
 const getOrganization = async () => {
     const { error, code, data } = await organizationApi.getList({
-        deptType: 3,
+        deptType: 3
     })
     if (!error && code === 200) {
         searchOrganization.value = getArrValue(data)
@@ -185,10 +178,12 @@ const getOrganization = async () => {
     }
 }
 
-const searchForm = ref({ deptId: null, realName: '', current: 1, size: 20, total: 0 })
+
+
+const searchForm = ref({deptId: null, realName: '', current: 1, size: 20, total: 0})
 
 //分页被点击
-const pageChange = ({ current, size }) => {
+const pageChange = ({current, size}) => {
     searchForm.value.current = current
     searchForm.value.size = size
     getTableData()
@@ -200,20 +195,20 @@ const searchClick = () => {
 
 //表格数据
 const tableColumn = [
-    { key: 'name', name: '用户名称' },
-    { key: 'account', name: '账号ID' },
-    { key: 'plaintextPassword', name: '密码' },
-    { key: 'deptName', name: '所属部门' },
-    { key: 'postName', name: '岗位' },
-    { key: 'createTime', name: '创建日期' },
-    { key: 'status', name: '启用状态' },
-    { key: 'action', name: '操作', width: 100 },
+    {key: 'name', name: '用户名称'},
+    {key: 'account', name: '账号ID'},
+    {key: 'plaintextPassword', name: '密码'},
+    {key: 'deptName', name: '所属部门'},
+    {key: 'postName', name: '岗位'},
+    {key: 'createTime', name: '创建日期'},
+    {key: 'status', name: '启用状态'},
+    {key: 'action', name: '操作', width: 100}
 ]
 const tableData = ref([])
 
 //获取表格数据
 const tableLoaing = ref(false)
-const getTableData = async ()=>{
+const getTableData = async()=>{
     tableLoaing.value = true
     const { error, code, data } = await mainApi.page(searchForm.value)
     tableLoaing.value = false
@@ -226,7 +221,7 @@ const getTableData = async ()=>{
     }
 }
 
-const tableCheckedKeys = ref([])
+const tableCheckedKeys = ref([]);
 const tableSelectionChange = (rows) => {
     tableCheckedKeys.value = rows
 }
@@ -237,26 +232,39 @@ const formModal = ref(false)
 //用户信息表单
 const formRef = ref(null)
 const formRef1 = ref(null)
-const formRef3 = ref(null)
+const formRef3=ref(null)
 
 //循环表单的ref
-
-
+const formRefs = ref([])
+const setFormItemRefs = (el, index) => {
+    if (el) {
+        let indexs = arrIndex(formRefs.value, 'index', index)
+        if (indexs !== -1) {
+            formRefs.value[index].ref = el
+        } else {
+            formRefs.value.push({index: index, ref: el});
+        }
+    }
+}
 //获取表单的ref
+const getFormRef = async (index) => {
+    const indexs = arrIndex(formRefs.value, 'index', index)
+    return formRefs.value[indexs].ref
+}
 
 const formModel = ref({
     // deptList: [{isLeader: 0}], status: 1
 })
-const isLeaderIds = ref([])
+const isLeaderIds=ref([])
 const formRules = {
-    account: [{ required: true, message: '请输入登录账号', trigger: 'blur' }],
-    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
-    password1: [{ required: true, message: '请输入确认密码', trigger: 'blur' }],
-    deptId: [{ required: true, message: '请选择选择部门', trigger: 'change' }],
-    postId: [{ required: true, message: '请选择选择岗位', trigger: 'change' }],
-
-    oneMoney: [{ required: true, message: '请输入日单价', trigger: 'blur' }],
-    status: [{ required: true, message: '请选择启用状态', trigger: 'change' }],
+    account: [{required: true, message: '请输入登录账号', trigger: 'blur'}],
+    password: [{required: true, message: '请输入密码', trigger: 'blur'}],
+    password1: [{required: true, message: '请输入确认密码', trigger: 'blur'}],
+    deptId: [{required: true, message: '请选择选择部门', trigger: 'change'}],
+    postId: [{required: true, message: '请选择选择岗位', trigger: 'change'}],
+
+    oneMoney: [{required: true, message: '请输入日单价', trigger: 'blur'}],
+    status: [{required: true, message: '请选择启用状态', trigger: 'change'}],
     phone: {
         required: true,
         validator: (rule, value, callback) => {
@@ -268,18 +276,18 @@ const formRules = {
                 callback()
             }
         },
-        trigger: 'blur',
+        trigger: "blur"
     },
 }
 
 //添加用户
 const addUserClick = () => {
-    isLeaderIds.value = []
+    isLeaderIds.value=[]
     formModel.value = {
         // deptList: [{isLeader: 0}],
         tenantId: useAppState.tenantId,
         status: 1,
-        userType: 5,
+        userType: 5
     }
     postData.value = [{}]
     formModal.value = true
@@ -289,7 +297,7 @@ const addUserClick = () => {
 //编辑用户信息
 const rowEidtClick = (row) => {
     // const deptList = getArrValue(row.deptList)
-    isLeaderIds.value = []
+    isLeaderIds.value=[]
     //设置表单数据
     const form = {
         id: row.id,
@@ -319,20 +327,23 @@ const rowEidtClick = (row) => {
     // }
     //设置表单数据
     formModel.value = form
-    if (form?.isLeader) {
-        isLeaderIds.value = form?.isLeader?.split(',')
-    } else {
-        isLeaderIds.value = []
+    if(form?.isLeader){
+        isLeaderIds.value=form?.isLeader?.split(',')
+    }else{
+        isLeaderIds.value=[]
     }
-  
+
     formModal.value = true
     getSectionData()
+
+    // 获取下拉框   部门负责人
+    getUserDeptData();
 }
 
 //部门下拉数据
 const sectionData = ref([])
 const getSectionData = async () => {
-    const { error, code, data } = await organizationApi.getList({ deptType: 2 })
+    const { error, code, data } = await organizationApi.getList({deptType: 2})
     if (!error && code === 200) {
         sectionData.value = getArrValue(data)
     } else {
@@ -342,10 +353,10 @@ const getSectionData = async () => {
 
 //获取岗位数据
 const postData = ref([])
-const getpostData = async (id)=>{
-    if (id) {
+const getpostData=async(id)=>{
+    if(id){
         //获取岗位数据
-         const { error, code, data } = await organizationApi.getList({ parentId: id })
+         const { error, code, data } = await organizationApi.getList({parentId: id})
         if (!error && code === 200) {
             postData.value = getArrValue(data)
         } else {
@@ -355,21 +366,87 @@ const getpostData = async (id)=>{
 }
 
 
+//获取部门负责人 下拉数据
+const userDeptData = ref([])
+const getUserDeptData = async () => {
+    const { error, code, data } = await organizationApi.treeUserdeptByDeptType()
+    if (!error && code === 200) {
+        userDeptData.value = getArrValue(data)
+    } else {
+        userDeptData.value = []
+    }
+}
+
+
+const initPostData = async (id, index) => {
+    if (id) {
+        //获取岗位数据
+        const { error, code, data } = await organizationApi.getList({parentId: id})
+        if (!error && code === 200) {
+            postData.value[index] = getArrValue(data)
+        } else {
+            postData.value[index] = []
+        }
+        //处理负责人限制
+        let isLeader = 0;
+        const deptList = formModel.value.deptList
+        deptList.forEach((item, indexs) => {
+            if (item.deptId === id) {
+                //如果当前相同部门项的负责人存在，就全局存在
+                if (item.isLeader === 1) {
+                    isLeader = 1
+                }
+                //设置其它相同部门项的负责人
+                if (indexs !== index) {
+                    item.isLeader = isLeader
+                    item.isLeaderDisabled = true
+                }
+            }
+        })
+        //设置当前项的负责人
+        deptList[index].isLeader = isLeader
+        deptList[index].isLeaderDisabled = false
+    }
+}
+
+//是否为部门负责人
+const isLeaderChange = (id, index) => {
+    const deptList = formModel.value.deptList
+    const deptId = deptList[index].deptId
+    deptList.forEach((item) => {
+        if (item.deptId === deptId) {
+            item.isLeader = id
+        }
+    })
+}
+
+//新增组织
+const addOrganizationClick = () => {
+    formModel.value.deptList.push({isLeader: 0})
+    postData.value.push({})
+}
+
+//删除组织
+const delOrganizationClick = (index) => {
+    formModel.value.deptList.splice(index, 1)
+    postData.value.splice(index, 1)
+}
+
 
 //保存
 const formModalSave = async () => {
     const isForm = await formValidate(formRef.value)
     const isForm1 = await formValidate(formRef1.value)
     const isForm3 = await formValidate(formRef3.value)
-    if (!isForm || !isForm1 || !isForm3) {
+    if (!isForm || !isForm1||!isForm3) {
         window.$message?.error('请先完善表单信息')
         return
     }
     const form = formModel.value
-    console.log(form, 'form')
-    let isLeader = isLeaderIds.value.join()
-    form.isLeader = isLeader
-    form.roleId = form.postId
+    console.log(form,'form');
+    let isLeader=isLeaderIds.value.join()
+    form.isLeader=isLeader
+    form.roleId=form.postId
     //判断密码是否一致
     if (form.password && !form.password1) {
         window.$message?.error('请输入确认密码')
@@ -402,7 +479,7 @@ const formModalSave = async () => {
 
 //新增用户
 const formSubmitApi = async (form) => {
-    const { error, code, msg } = await mainApi.submit({
+    const {error, code, msg} = await mainApi.submit({
         ...form,
         name: form.realName,
     })
@@ -418,7 +495,7 @@ const formSubmitApi = async (form) => {
 
 //修改用户
 const formUpdateApi = async (form) => {
-    const { error, code, msg } = await mainApi.update({
+    const {error, code, msg} = await mainApi.update({
         ...form,
         name: form.realName,
     })