修改文件

src/views/system/modules/user/data.vue

@@ -0,0 +1,93 @@
+<template>
+    <hc-dialog v-model="isShow" widths="800px" :padding="false" :title="`${isNullES(rowInfo.id) ? '新增' : '编辑'}用户信息`" is-table is-footer-center @close="dialogClose">
+        <el-tabs tab-position="left" class="hc-user-data-dialog h-full w-full">
+            <el-tab-pane label="基础信息">
+                11111
+            </el-tab-pane>
+            <el-tab-pane label="详细信息">
+                11111
+            </el-tab-pane>
+            <el-tab-pane label="职能描述">
+                11111
+            </el-tab-pane>
+        </el-tabs>
+        <template #footer>
+            <el-button hc-btn @click="dialogClose">取消</el-button>
+            <el-button hc-btn type="primary" :loading="submitLoading" @click="dialogSubmit">提交</el-button>
+        </template>
+    </hc-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { isNullES } from 'js-fast-way'
+import mainApi from '~api/system/user'
+
+const props = defineProps({
+    info: {
+        type: Object,
+        default: () => ({}),
+    },
+})
+
+//事件
+const emit = defineEmits(['close', 'finish'])
+
+//双向绑定
+const isShow = defineModel('modelValue', {
+    default: false,
+})
+
+//监听内容
+const rowInfo = ref(props.info)
+watch(() => props.info, (data) => {
+    rowInfo.value = data
+}, { immediate: true, deep: true })
+
+//监听显示
+watch(isShow, (val) => {
+    if (val) {
+        getDataApi()
+    }
+})
+
+//获取数据
+const getDataApi = () => {
+    const { id } = rowInfo.value
+    if (isNullES(id)) return
+    console.log(rowInfo.value)
+}
+
+//提交表单
+const submitLoading = ref(false)
+const dialogSubmit = async () => {
+    dialogClose()
+    emit('finish')
+}
+
+//关闭弹窗
+const dialogClose = () => {
+    isShow.value = false
+    submitLoading.value = false
+    emit('close')
+}
+</script>
+
+<style lang="scss">
+.el-tabs.el-tabs--left.hc-user-data-dialog {
+    position: relative;
+    .el-tabs__header.is-left {
+        margin-right: 0;
+    }
+    .el-tabs__content {
+        position: relative;
+        height: 100%;
+        .el-tab-pane {
+            position: relative;
+            height: 100%;
+            width: 100%;
+            overflow: auto;
+        }
+    }
+}
+</style>

src/views/system/user.vue

@@ -49,6 +49,8 @@
                 <hc-pages :pages="searchForm" @change="pageChange" />
             </template>
         </hc-card>
+        <!-- 新增编辑 -->
+        <HcDataDialog v-model="isUserDataShow" :info="userItem" @finish="getTableData" />
     </hc-body>
 </template>
 
@@ -58,6 +60,7 @@ import { getArrValue } from 'js-fast-way'
 import deptApi from '~api/system/dept'
 import { getDictionaryData } from '~uti/tools.js'
 import mainApi from '~api/system/user'
+import HcDataDialog from './modules/user/data.vue'
 
 onActivated(()=> {
     getUserTypeData()
@@ -144,9 +147,13 @@ const tableCheckChange = (rows) => {
     tableCheckKeys.value = rows
 }
 
+const isUserDataShow = ref(false)
+
 //修改账号
+const userItem = ref({})
 const editRowClick = (row) => {
-
+    userItem.value = row
+    isUserDataShow.value = true
 }
 
 //删除账号