测试组织结构

package.json

@@ -26,6 +26,7 @@
         "vue3-tree-org": "^4.2.2"
     },
     "devDependencies": {
+        "@element-plus/icons-vue": "^2.1.0",
         "@vitejs/plugin-vue": "^4.2.3",
         "@vue/compiler-sfc": "^3.3.4",
         "archiver": "^5.3.1",

src/views/system/user.vue

@@ -3,11 +3,12 @@
         <template #header>
             <div class="w-40">
                 <el-select v-model="searchForm.deptId" placeholder="选择岗位类型" clearable size="large">
-                    <el-option v-for="item in postOptions" :key="item.value" :label="item['label']" :value="item['value']"/>
+                    <el-option label="暂无接口1" :value="1"/>
+                    <el-option label="暂无接口2" :value="2"/>
                 </el-select>
             </div>
             <div class="w-64 ml-3">
-                <el-input v-model="searchForm.realName" size="large" placeholder="请输入名称搜索" clearable @keyup="keyUpEvent"/>
+                <el-input v-model="searchForm.realName" size="large" placeholder="请输入名称搜索" clearable/>
             </div>
             <div class="ml-3">
                 <el-button type="primary" @click="searchClick" size="large">
@@ -17,7 +18,7 @@
             </div>
         </template>
         <template #extra>
-            <el-button type="primary" @click="addClick" size="large">
+            <el-button type="primary" @click="addUserClick" size="large">
                 <HcIcon name="add"/>
                 <span>创建账户</span>
             </el-button>
@@ -27,32 +28,76 @@
             </el-button>
         </template>
         <HcTable :column="tableColumn" :datas="tableData" isCheck @selection-change="tableSelectionChange" :loading="tableLoaing">
-            <template #action="{row, index}">
-                <el-button size="small" type="primary" @click="eidtModal">编辑</el-button>
+            <template #status="{row}">
+                <span>{{row.status === 1 ? '启用': '停用'}}</span>
+            </template>
+            <template #action="{row}">
+                <el-button size="small" type="primary" @click="rowEidtClick(row)">编辑</el-button>
             </template>
         </HcTable>
         <template #action>
             <HcPages :pages="searchForm" @change="pageChange"></HcPages>
         </template>
-        <!--新增编辑弹窗-->
-        <HcDialog bgColor="#ffffff" isToBody :show="addModal" :title="modalTitle" @close="addModalClose" widths="51rem">
-            <HcCardItem ui="hac-bg-grey">
+
+        <!--用户信息弹窗-->
+        <HcDialog bgColor="#ffffff" isToBody isTable :show="formModal" saveText="确定创建" :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>
                 </template>
-                <el-form ref="formUserRef" :model="formUserModel" :rules="formUserRules" size="large" label-width="auto" label-position="left">
+                <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="formUserModel.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="formUserModel.password" placeholder="请输入密码" autocomplete="new-password" show-password type="password"/>
+                    <el-form-item label="登录密码:" prop="password">
+                        <el-input v-model="formModel.password" placeholder="请输入密码" autocomplete="new-password" show-password type="password"/>
                     </el-form-item>
-                    <el-form-item label="确认密码:" prop="plaintextPassword">
-                        <el-input v-model="formUserModel.plaintextPassword" placeholder="请输入确认密码" autocomplete="new-password" show-password type="password"/>
+                    <el-form-item label="确认密码:" prop="password1">
+                        <el-input v-model="formModel.password1" placeholder="请输入确认密码" autocomplete="new-password" show-password type="password"/>
                     </el-form-item>
                 </el-form>
             </HcCardItem>
-            <HcCardItem ui="hac-bg-grey" class="mt-2">
+            <HcCardItem ui="hac-bg-grey" class="h-auto mt-4">
+                <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>
+            </HcCardItem>
+
+            <HcCardItem ui="hac-bg-grey" class="h-auto mt-4">
                 <template #header>
                     <div class="hac-card-title">详细信息</div>
                 </template>
@@ -66,21 +111,6 @@
                     <el-form-item label="身份证号:">
                         <el-input v-model="formUserModel.idNumber" placeholder=""/>
                     </el-form-item>
-                    <el-form-item label="机构信息:" 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-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-select v-model="formUserModel.roleId" class="ml-2" placeholder="是否为部门负责人" size="large">
-                            <!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/> -->
-                            <el-option label="是" :value="1">
-                            </el-option>
-                            <el-option label="否" :value="0">
-                            </el-option>
-                        </el-select>
-                    </el-form-item>
                     <el-form-item label="日单价:">
                         <el-input v-model="formUserModel.roleName" placeholder=""/>
                     </el-form-item>
@@ -104,35 +134,21 @@
                 </div>
             </template>
         </HcDialog>
+
     </HcCard>
 </template>
 
 <script setup>
-import {ref, watch, onMounted} from "vue";
+import {ref, onMounted} from "vue";
 import {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'
 
 onMounted(() => {
     getTableData()
 })
 
-const value = ref('')
-const postOptions = ref([
-    {label: '所有', value: '1'},
-    {label: '财务', value: '2'},
-    {label: '总经理', value: '3'},
-    {label: '会计', value: '4'},
-
-])
-
-const options = ref([
-    {label: 'xx', value: '1'},
-    {label: 'aa', value: '2'},
-    {label: 'cc', value: '3'},
-    {label: 'bb', value: '4'},
-])
-
 const searchForm = ref({deptId: null, realName: '', current: 1, size: 20, total: 0})
 
 //分页被点击
@@ -145,17 +161,14 @@ const searchClick = () => {
     searchForm.value.current = 1
     getTableData()
 }
-const keyUpEvent = () => {
-
-}
 
 //表格数据
 const tableColumn = [
     {key: 'name', name: '用户名称'},
-    {key: 'id', name: '账号ID'},
-    {key: 'password', name: '密码'},
-    {key: 'postName', name: '所属部门'},
-    {key: 'position', 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}
@@ -177,32 +190,20 @@ const getTableData = async()=>{
     }
 }
 
-
 const tableCheckedKeys = ref([]);
 const tableSelectionChange = (rows) => {
     tableCheckedKeys.value = rows
-    if (tableCheckedKeys.value.length > 1) {
-        window.$message.warning('只能选择一条数据')
-    }
-}
-const addModal = ref(false)
-const modalTitle = ref('新增')
-const eidtModal = () => {
-    modalTitle.value = '编辑'
-    addModal.value = true
-}
-//弹窗关闭
-const addModalClose = () => {
-    console.log('弹窗关闭')
-    addModal.value = false
 }
-const addClick = () => {
-    addModal.value = true
-}
-//基础信息表单
-const formUserRef = ref(null)
-const formUserModel = ref({})
-const formUserRules = {
+
+//用户信息弹窗
+const formModal = ref(false)
+
+//用户信息表单
+const formRef = ref(null)
+const formModel = ref({
+    organization: [{}],
+})
+const formRules = {
     phone: {
         required: true,
         validator: (rule, value, callback) => {
@@ -227,7 +228,7 @@ const formUserRules = {
         },
         trigger: "blur"
     },
-    newPassword: {
+    password: {
         required: true,
         validator: (rule, value, callback) => {
             if (!value) {
@@ -238,7 +239,7 @@ const formUserRules = {
         },
         trigger: "blur"
     },
-    newPassword1: {
+    password1: {
         required: true,
         validator: (rule, value, callback) => {
             if (!value) {
@@ -249,34 +250,47 @@ const formUserRules = {
         },
         trigger: "blur"
     },
+}
 
+//添加用户
+const addUserClick = () => {
+    formModel.value = {
+        organization: [{}],
+    }
+    formModal.value = true
 }
-const stateoptions = ref([
-    {label: '启用', value: '1'},
-    {label: '停用', value: '2'},
 
-])
-const cancelClick = () => {
-    window?.$messageBox?.alert('您确定要注销[xxx] 的账户信息吗? 一旦注销数据将彻底清除，请谨慎操作？', '注销提醒', {
-        showCancelButton: true,
-        confirmButtonText: '确认注销',
-        cancelButtonText: '取消',
-        type: 'warning',
-        callback: (action) => {
-            if (action === 'confirm') {
-                console.log(11111);
-            }
-        }
-    })
+//编辑用户信息
+const rowEidtClick = (row) => {
+    row.organization = row.organization ?? [{}]
+    formModel.value = row
+    formModal.value = true
 }
 
-const sureSignUserLoading = ref(false)
-const sureSignUserClick = () => {
+
+
+//保存
+const formModalSave = () => {
 
 }
 
+//关闭用户信息弹窗
+const formModalClose = () => {
+    formModal.value = false
+    formModel.value = {}
+}
 </script>
 
-<style lang="scss" scoped>
-
+<style lang="scss">
+.hc-card-item-box.h-auto {
+    height: auto;
+}
+.form-organization-row-btn {
+    position: relative;
+    margin-left: 8px;
+    top: 7px;
+    .el-button + .el-button {
+        margin-left: 18px;
+    }
+}
 </style>

yarn.lock

@@ -17,7 +17,7 @@
   resolved "http://47.110.251.215:9000/@ctrl/tinycolor/-/tinycolor-3.6.0.tgz#53fa5fe9c34faee89469e48f91d51a3766108bc8"
   integrity sha512-/Z3l6pXthq0JvMYdUFyX9j0MaCltlIn6mfh9jLyQwg5aPKxkyNa0PTHtU1AlFXLNk55ZuAeJRcpvq+tmLfKmaQ==
 
-"@element-plus/icons-vue@^2.0.6":
+"@element-plus/icons-vue@^2.0.6", "@element-plus/icons-vue@^2.1.0":
   version "2.1.0"
   resolved "http://47.110.251.215:9000/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz#7ad90d08a8c0d5fd3af31c4f73264ca89614397a"
   integrity sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA==