测试组织结构

src/views/system/user.vue

@@ -22,7 +22,7 @@
                 <HcIcon name="add"/>
                 <span>创建账户</span>
             </el-button>
-            <el-button type="danger" @click="cancelClick" size="large" :disabled="tableCheckedKeys.length <= 0">
+            <el-button type="danger" @click="delClick" size="large" :disabled="tableCheckedKeys.length <= 0">
                 <HcIcon name="delete-bin-2"/>
                 <span>注销账户</span>
             </el-button>
@@ -49,7 +49,7 @@
                 </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"/>
+                        <el-input v-model="formModel.account" placeholder="仅支持英文或拼音" autocomplete="new-password"/>
                     </el-form-item>
                     <el-form-item label="登录密码:" prop="password">
                         <el-input v-model="formModel.password" placeholder="请输入密码" autocomplete="new-password" show-password type="password"/>
@@ -63,76 +63,67 @@
                 <template #header>
                     <div class="hac-card-title">机构信息</div>
                 </template>
-                <el-form ref="formUserRef" class="mt-4" :model="formUserModel" :rules="formUserRules" label-position="top" size="large">
-                    <el-row :gutter="10">
-                        <el-col :span="7">
-                            <el-form-item prop="real_name">
-                                <el-select v-model="formUserModel.position" placeholder="选择部门" size="large">
-                                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="7">
-                            <el-form-item prop="real_name">
-                                <el-select v-model="formUserModel.postId" class="ml-2" placeholder="选择岗位" size="large">
-                                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="7">
-                            <el-form-item prop="real_name">
-                                <el-select v-model="formUserModel.roleId" class="ml-2" placeholder="是否为部门负责人" size="large">
-                                    <el-option label="是" :value="1"></el-option>
-                                    <el-option label="否" :value="0"></el-option>
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="3">
-                            <div class="form-organization-row-btn">
-                                <el-button type="primary" :icon="Plus" circle size="small" />
-                                <el-button type="danger" :icon="Delete" circle size="small" />
-                            </div>
-                        </el-col>
-                    </el-row>
-                </el-form>
+                <template v-for="(item, index) in formModel.organization">
+                    <el-form :ref="(el) => setFormItemRefs(el, index)" class="mt-4" :model="item" :rules="formRules" label-position="top" size="large">
+                        <el-row :gutter="10">
+                            <el-col :span="7">
+                                <el-form-item prop="deptId">
+                                    <el-select v-model="item.deptId" placeholder="选择部门">
+                                        <el-option label="暂无接口" :value="1"/>
+                                    </el-select>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="7">
+                                <el-form-item prop="postId">
+                                    <el-select v-model="item.postId" placeholder="选择岗位">
+                                        <el-option label="暂无接口" :value="1"/>
+                                    </el-select>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="7">
+                                <el-form-item prop="principal">
+                                    <el-select v-model="item.principal" placeholder="是否为部门负责人">
+                                        <el-option label="是" :value="1"/>
+                                        <el-option label="否" :value="0"/>
+                                    </el-select>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="3">
+                                <div class="form-organization-row-btn">
+                                    <el-button type="primary" :icon="Plus" circle size="small" @click="addOrganizationClick(item)"/>
+                                    <el-button type="danger" :icon="Delete" circle size="small" :disabled="index===0" @click="delOrganizationClick(index)"/>
+                                </div>
+                            </el-col>
+                        </el-row>
+                    </el-form>
+                </template>
             </HcCardItem>
 
             <HcCardItem ui="hac-bg-grey" class="h-auto mt-4">
                 <template #header>
                     <div class="hac-card-title">详细信息</div>
                 </template>
-                <el-form ref="formUserRef" :model="formUserModel" :rules="formUserRules" label-position="left" label-width="auto" size="large">
+                <el-form ref="formRef1" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
                     <el-form-item label="用户姓名:" prop="real_name">
-                        <el-input v-model="formUserModel.real_name"/>
+                        <el-input v-model="formModel.real_name"/>
                     </el-form-item>
                     <el-form-item prop="phone" label="手机号码:">
-                        <el-input v-model="formUserModel.phone" placeholder="请输入绑定手机"/>
+                        <el-input v-model="formModel.phone" placeholder="请输入绑定手机"/>
                     </el-form-item>
                     <el-form-item label="身份证号:">
-                        <el-input v-model="formUserModel.idNumber" placeholder=""/>
+                        <el-input v-model="formModel.idNumber"/>
                     </el-form-item>
                     <el-form-item label="日单价:">
-                        <el-input v-model="formUserModel.roleName" placeholder=""/>
+                        <el-input v-model="formModel.roleName"/>
                     </el-form-item>
                     <el-form-item label="启用状态:">
-                        <el-select v-model="formUserModel.status" class="block" placeholder="" size="large">
-                            <el-option v-for="item in stateoptions" :key="item.value" :label="item.label" :value="item.value"/>
+                        <el-select v-model="formModel.status" class="block">
+                            <el-option label="启用" :value="1"/>
+                            <el-option label="停用" :value="0"/>
                         </el-select>
                     </el-form-item>
                 </el-form>
             </HcCardItem>
-            <template #footer>
-                <div class="dialog-footer">
-                    <el-button size="large" @click="addModal = false">
-                        <HcIcon name="close"/>
-                        <span>取消</span>
-                    </el-button>
-                    <el-button :loading="sureSignUserLoading" hc-btn type="primary" @click="sureSignUserClick">
-                        <HcIcon name="check"/>
-                        <span>确定创建</span>
-                    </el-button>
-                </div>
-            </template>
         </HcDialog>
 
     </HcCard>
@@ -140,7 +131,7 @@
 
 <script setup>
 import {ref, onMounted} from "vue";
-import {isPhone} from "js-fast-way"
+import {arrIndex, isPhone} from "js-fast-way"
 import mainApi from '~api/system/user.js';
 import {getArrValue} from "js-fast-way"
 import {Plus, Delete} from '@element-plus/icons-vue'
@@ -200,10 +191,31 @@ const formModal = ref(false)
 
 //用户信息表单
 const formRef = ref(null)
+const formRef1 = 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({
     organization: [{}],
 })
 const formRules = {
+    projectId: [{required: true, message: '请选择所属项目', trigger: 'change'}],
     phone: {
         required: true,
         validator: (rule, value, callback) => {
@@ -263,10 +275,20 @@ const addUserClick = () => {
 //编辑用户信息
 const rowEidtClick = (row) => {
     row.organization = row.organization ?? [{}]
+    row.password = ''
     formModel.value = row
     formModal.value = true
 }
 
+//新增组织
+const addOrganizationClick = (row) => {
+    formModel.value.organization.push({})
+}
+
+//删除组织
+const delOrganizationClick = (index) => {
+    formModel.value.organization.splice(index, 1)
+}
 
 
 //保存
@@ -279,6 +301,11 @@ const formModalClose = () => {
     formModal.value = false
     formModel.value = {}
 }
+
+//删除用户
+const delClick = () => {
+
+}
 </script>
 
 <style lang="scss">