修改新增和修改共用弹框的设计

src/hooks/useClearDialog.js

@@ -1,15 +1,29 @@
 import { ref, watch } from 'vue';
 import { cloneDeep } from 'lodash';
 
-export default function useClearDialog(data, props) {
-  let resultData = ref(cloneDeep(data));
+export default function useClearDialog(data, props, getDetail) {
+  let formData = ref(cloneDeep(data));
+  let isEdit = ref(false);
   watch(
-    () => props.visible,
+    () => props.curRow,
     (val) => {
       if (!val) {
-        resultData.value = cloneDeep(data);
+        formData.value = cloneDeep(data);
+        isEdit.value = false;
+      } else {
+        isEdit.value = true;
+      }
+    }
+  );
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (!visible) {
+        formData.value = cloneDeep(data);
+      } else {
+        !!props.curRow && getDetail && getDetail();
       }
     }
   );
-  return { data: resultData };
+  return { formData, isEdit };
 }

src/hooks/useTableCrud.js

@@ -1,6 +1,6 @@
 import { computed, ref } from 'vue';
 import { cloneDeep } from 'lodash';
-
+import { MessagePlugin } from 'tdesign-vue-next';
 const ACTIONS = {
   edit: '修改',
   add: '新增',
@@ -46,11 +46,11 @@ export default function (
       const actions = {
         add: {
           api: () => doCreate(formData.value),
-          cb: () => $message.success('新增成功'),
+          cb: () => MessagePlugin.success('新增成功'),
         },
         edit: {
           api: () => doUpdate(formData.value),
-          cb: () => $message.success('编辑成功'),
+          cb: () => MessagePlugin.success('编辑成功'),
         },
       };
       const action = actions[type.value];
@@ -62,6 +62,7 @@ export default function (
         loading.value = visible.value = false;
         refresh(data);
       } catch (error) {
+        console.log('error:', error);
         loading.value = false;
       }
     });
@@ -77,7 +78,7 @@ export default function (
   //       try {
   //         loading.value = true;
   //         const data = await doDelete(id);
-  //         $message.success('删除成功');
+  //         MessagePlugin.success('删除成功');
   //         loading.value = false;
   //         refresh(data);
   //       } catch (error) {

src/views/resource-guard/device-guard/registration-query/index.vue

@@ -2,9 +2,6 @@
   <div class="registration-query flex flex-col h-full">
     <SearchForm :fields="fields" :params="params"></SearchForm>
     <div class="flex-1 page-wrap">
-      <div class="btn-group">
-        <t-button theme="success" @click="handleAdd">新增</t-button>
-      </div>
       <t-table
         size="small"
         row-key="id"

src/views/resource-guard/person-guard/person-files/add-person-file-dialog.vue

@@ -2,7 +2,7 @@
   <my-dialog
     :visible="visible"
     @close="emit('update:visible', false)"
-    :header="title"
+    :header="`${isEdit ? '修改' : '新增'}人员档案`"
     :width="900"
     :closeOnOverlayClick="false"
   >
@@ -116,24 +116,21 @@
       <t-button theme="default" @click="emit('update:visible', false)"
         >取消</t-button
       >
-      <t-button theme="primary" @click="handleSave">保存</t-button>
+      <t-button theme="primary" @click="save">保存</t-button>
     </template>
   </my-dialog>
 </template>
 <script setup name="AddPersonFileDialog">
+import useClearDialog from '@/hooks/useClearDialog';
 import { ref } from 'vue';
 const emit = defineEmits(['update:visible']);
 const formRef = ref(null);
 const file = ref([]);
 const props = defineProps({
   visible: Boolean,
-  title: String,
-  handleSave: Function,
-  formData: Object,
-});
-defineExpose({
-  formRef,
+  curRow: Object,
 });
+
 const requestMethod = (f) => {
   return new Promise((rs) => {
     rs({
@@ -145,4 +142,31 @@ const requestMethod = (f) => {
     });
   });
 };
+const getDetail = async () => {
+  //编辑状态下获取回显数据的接口请求业务,如果curRow里的字段够用，就直接把curRow里的字段赋值给formData
+  alert('获取详情中...');
+};
+const { formData, isEdit } = useClearDialog(
+  {
+    a: '',
+    b: '',
+    c: '',
+    d: '',
+    e: '',
+    f: '',
+    g: '',
+    h: '',
+    i: '',
+    j: '',
+    k: [],
+    l: '',
+    m: '',
+    n: '',
+    o: '',
+  },
+  props,
+  getDetail
+);
+
+const save = () => {};
 </script>

src/views/resource-guard/person-guard/person-files/index.vue

@@ -3,7 +3,14 @@
     <SearchForm :fields="fields" :params="params"></SearchForm>
     <div class="flex-1 page-wrap">
       <div class="btn-group">
-        <t-button theme="success" @click="handleAdd">新增</t-button>
+        <t-button
+          theme="success"
+          @click="
+            curRow = null;
+            showAddPersonFileDialog = true;
+          "
+          >新增</t-button
+        >
         <t-button theme="success" @click="multImport">批量导入</t-button>
         <t-button
           theme="success"
@@ -39,11 +46,7 @@
 
     <AddPersonFileDialog
       v-model:visible="showAddPersonFileDialog"
-      :title="title"
-      :type="type"
-      :handleSave="handleSave"
-      :formData="formData"
-      ref="formDialogRef"
+      :curRow="curRow"
     ></AddPersonFileDialog>
   </div>
 </template>
@@ -54,7 +57,8 @@ import { getTableData } from '@/api/test';
 import useFetchTable from '@/hooks/useFetchTable';
 import useTableCrud from '@/hooks/useTableCrud';
 import AddPersonFileDialog from './add-person-file-dialog';
-const formDialogRef = ref(null);
+const curRow = ref(null);
+const showAddPersonFileDialog = ref(false);
 const selectedRowKeys = ref([]);
 const selectChange = (value, { selectedRowData }) => {
   selectedRowKeys.value = value;
@@ -102,7 +106,8 @@ const columns = [
             hover="color"
             onClick={(e) => {
               e.stopPropagation();
-              handleEdit(row);
+              curRow.value = row;
+              showAddPersonFileDialog.value = true;
             }}
           >
             修改
@@ -119,50 +124,8 @@ const {
   fetchData,
   onChange,
 } = useFetchTable(getTableData);
-const add = async () => {
-  await 1;
-  alert(1);
-};
-const update = async () => {};
 const refresh = async () => {};
 
-const {
-  visible: showAddPersonFileDialog,
-  type,
-  title,
-  loading: dialogLoading,
-  handleAdd,
-  handleEdit,
-  handleSave,
-  formData,
-  formRef,
-} = useTableCrud(
-  {
-    name: '人员档案',
-    doCreate: add,
-    doUpdate: update,
-    refresh: refresh,
-    initForm: {
-      a: '',
-      b: '',
-      c: '',
-      d: '',
-      e: '',
-      f: '',
-      g: '',
-      h: '',
-      i: '',
-      j: '',
-      k: [],
-      l: '',
-      m: '',
-      n: '',
-      o: '',
-    },
-  },
-  formDialogRef
-);
-
 const fields = ref([
   {
     prop: 'a',

src/views/service-unit/dispatch/dispatch-manage/add-dispatch-dialog.vue

@@ -2,7 +2,7 @@
   <my-dialog
     :visible="visible"
     @close="emit('update:visible', false)"
-    :header="title"
+    :header="`${isEdit ? '修改' : '新增'}派单`"
     :width="600"
     :closeOnOverlayClick="false"
   >
@@ -45,22 +45,39 @@
       <t-button theme="default" @click="emit('update:visible', false)"
         >取消</t-button
       >
-      <t-button theme="primary" @click="handleSave">保存</t-button>
+      <t-button theme="primary" @click="save">保存</t-button>
     </template>
   </my-dialog>
 </template>
 <script setup name="AddDispatchDialog">
+import useClearDialog from '@/hooks/useClearDialog';
 import { ref } from 'vue';
-const emit = defineEmits(['update:visible']);
-const formRef = ref(null);
-
 const props = defineProps({
   visible: Boolean,
-  title: String,
-  handleSave: Function,
-  formData: Object,
-});
-defineExpose({
-  formRef,
+  curRow: Object,
 });
+const emit = defineEmits(['update:visible']);
+const formRef = ref(null);
+const getDetail = async () => {
+  //编辑状态下获取回显数据的接口请求业务,如果curRow里的字段够用，就直接把curRow里的字段赋值给formData
+  alert('获取详情中...');
+};
+const { formData, isEdit } = useClearDialog(
+  {
+    a: '',
+    b: '',
+    c: '',
+    d: '',
+    e: '',
+    f: '',
+    g: '',
+    h: '',
+    i: '',
+    j: '',
+    k: '',
+  },
+  props,
+  getDetail
+);
+const save = () => {};
 </script>

src/views/service-unit/dispatch/dispatch-manage/delineation-dialog.vue

@@ -29,9 +29,9 @@ const formRef = ref(null);
 
 const props = defineProps({
   visible: Boolean,
-  title: String,
+  curRow: Object,
 });
-const { data: formData } = useClearDialog(
+const { formData } = useClearDialog(
   {
     a: '',
   },

src/views/service-unit/dispatch/dispatch-manage/index.vue

@@ -3,7 +3,14 @@
     <SearchForm :fields="fields" :params="params"></SearchForm>
     <div class="flex-1 page-wrap">
       <div class="btn-group">
-        <t-button theme="success" @click="handleAdd">新增</t-button>
+        <t-button
+          theme="success"
+          @click="
+            curRow = null;
+            showAddDispatchDialog = true;
+          "
+          >新增</t-button
+        >
         <t-button theme="success" :disabled="!selectedRowKeys.length"
           >作废</t-button
         >
@@ -35,16 +42,9 @@
 
     <AddDispatchDialog
       v-model:visible="showAddDispatchDialog"
-      :title="title"
-      :type="type"
-      :handleSave="handleSave"
-      :formData="formData"
-      ref="formDialogRef"
+      :curRow="curRow"
     ></AddDispatchDialog>
-    <DelineationDialog
-      v-model:visible="showDelineationDialog"
-      :rowData="rowData"
-    >
+    <DelineationDialog v-model:visible="showDelineationDialog" :curRow="curRow">
     </DelineationDialog>
     <MultDelineationDialog
       v-model:visible="showMultDelineationDialog"
@@ -66,7 +66,8 @@ import MultDelineationDialog from './mult-delineation-dialog.vue';
 
 const showDelineationDialog = ref(false);
 const showMultDelineationDialog = ref(false);
-const formDialogRef = ref(null);
+const curRow = ref(null);
+const showAddDispatchDialog = ref(false);
 const selectedRowKeys = ref([]);
 const selectChange = (value, { selectedRowData }) => {
   selectedRowKeys.value = value;
@@ -74,9 +75,8 @@ const selectChange = (value, { selectedRowData }) => {
 const multDelineationHandle = () => {
   showMultDelineationDialog.value = true;
 };
-const rowData = ref({});
 const handleDelineation = (row) => {
-  rowData.value = row;
+  curRow.value = row;
   showDelineationDialog.value = true;
 };
 const columns = [
@@ -122,7 +122,8 @@ const columns = [
             hover="color"
             onClick={(e) => {
               e.stopPropagation();
-              handleEdit(row);
+              curRow.value = row;
+              showAddDispatchDialog.value = true;
             }}
           >
             修改
@@ -220,45 +221,7 @@ const {
   onChange,
 } = useFetchTable(getTableData);
 
-const add = async () => {
-  await 1;
-  alert(1);
-};
-const update = async () => {};
 const refresh = async () => {};
-
-const {
-  visible: showAddDispatchDialog,
-  type,
-  title,
-  loading: dialogLoading,
-  handleAdd,
-  handleEdit,
-  handleSave,
-  formData,
-  formRef,
-} = useTableCrud(
-  {
-    name: '派单',
-    doCreate: add,
-    doUpdate: update,
-    refresh: refresh,
-    initForm: {
-      a: '',
-      b: '',
-      c: '',
-      d: '',
-      e: '',
-      f: '',
-      g: '',
-      h: '',
-      i: '',
-      j: '',
-      k: '',
-    },
-  },
-  formDialogRef
-);
 </script>
 
 <style></style>

src/views/service-unit/dispatch/dispatch-manage/mult-delineation-dialog.vue

@@ -27,7 +27,6 @@ const formRef = ref(null);
 
 const props = defineProps({
   visible: Boolean,
-  title: String,
   selectedRowKeys: Array,
 });
 const formData = reactive({

src/views/service-unit/service-unit-manage/regional-planning/add-region-dialog.vue

@@ -2,7 +2,7 @@
   <my-dialog
     :visible="visible"
     @close="emit('update:visible', false)"
-    :header="title"
+    :header="`${isEdit ? '修改' : '新增'}大区`"
     :width="750"
     :closeOnOverlayClick="false"
   >
@@ -30,14 +30,32 @@
       <t-button theme="default" @click="emit('update:visible', false)"
         >取消</t-button
       >
-      <t-button theme="primary" @click="handleSave">保存</t-button>
+      <t-button theme="primary" @click="save">保存</t-button>
     </template>
   </my-dialog>
 </template>
 <script setup name="AddRegionDialog">
+import useClearDialog from '@/hooks/useClearDialog';
 import { ref } from 'vue';
 const emit = defineEmits(['update:visible']);
 const formRef = ref(null);
+const props = defineProps({
+  visible: Boolean,
+  curRow: Object,
+});
+const getDetail = async () => {
+  //编辑状态下获取回显数据的接口请求业务,如果curRow里的字段够用，就直接把curRow里的字段赋值给formData
+  alert('获取详情中...');
+};
+const { formData, isEdit } = useClearDialog(
+  {
+    a: '',
+    b: '',
+    c: [],
+  },
+  props,
+  getDetail
+);
 const checkedRef = ref([]);
 const leftData = [
   { value: 1, label: '1' },
@@ -71,13 +89,5 @@ const onChange = (newTargetValue) => {
   console.log('onChange', newTargetValue);
 };
 
-const props = defineProps({
-  visible: Boolean,
-  title: String,
-  handleSave: Function,
-  formData: Object,
-});
-defineExpose({
-  formRef,
-});
+const save = () => {};
 </script>

src/views/service-unit/service-unit-manage/regional-planning/index.vue

@@ -3,7 +3,14 @@
     <SearchForm :fields="fields" :params="params"></SearchForm>
     <div class="flex-1 page-wrap">
       <div class="btn-group">
-        <t-button theme="success" @click="handleAdd">新增</t-button>
+        <t-button
+          theme="success"
+          @click="
+            curRow = null;
+            showAddRegionDialog = true;
+          "
+          >新增</t-button
+        >
       </div>
       <t-table
         size="small"
@@ -26,11 +33,7 @@
 
     <AddRegionDialog
       v-model:visible="showAddRegionDialog"
-      :title="title"
-      :type="type"
-      :handleSave="handleSave"
-      :formData="formData"
-      ref="formDialogRef"
+      :curRow="curRow"
     ></AddRegionDialog>
   </div>
 </template>
@@ -41,7 +44,8 @@ import { getTableData } from '@/api/test';
 import useFetchTable from '@/hooks/useFetchTable';
 import useTableCrud from '@/hooks/useTableCrud';
 import AddRegionDialog from './add-region-dialog.vue';
-const formDialogRef = ref(null);
+const curRow = ref(null);
+const showAddRegionDialog = ref(false);
 const selectedRowKeys = ref([]);
 const selectChange = (value, { selectedRowData }) => {
   selectedRowKeys.value = value;
@@ -65,7 +69,8 @@ const columns = [
             hover="color"
             onClick={(e) => {
               e.stopPropagation();
-              handleEdit(row);
+              curRow.value = row;
+              showAddRegionDialog.value = true;
             }}
           >
             修改大区
@@ -86,38 +91,8 @@ const {
   onChange,
 } = useFetchTable(getTableData);
 
-const add = async () => {
-  await 1;
-  alert(1);
-};
-const update = async () => {};
 const refresh = async () => {};
 
-const {
-  visible: showAddRegionDialog,
-  type,
-  title,
-  loading: dialogLoading,
-  handleAdd,
-  handleEdit,
-  handleSave,
-  formData,
-  formRef,
-} = useTableCrud(
-  {
-    name: '大区',
-    doCreate: add,
-    doUpdate: update,
-    refresh: refresh,
-    initForm: {
-      a: '',
-      b: '',
-      c: [],
-    },
-  },
-  formDialogRef
-);
-
 const fields = ref([
   {
     prop: 'a',

src/views/service-unit/service-unit-manage/unit-manage/add-unit-dialog.vue

@@ -2,7 +2,7 @@
   <my-dialog
     :visible="visible"
     @close="emit('update:visible', false)"
-    :header="title"
+    :header="`${isEdit ? '修改' : '新增'}服务单元`"
     :width="600"
     :closeOnOverlayClick="false"
   >
@@ -48,22 +48,36 @@
       <t-button theme="default" @click="emit('update:visible', false)"
         >取消</t-button
       >
-      <t-button theme="primary" @click="handleSave">保存</t-button>
+      <t-button theme="primary" @click="save">保存</t-button>
     </template>
   </my-dialog>
 </template>
 <script setup name="AddUnitDialog">
+import useClearDialog from '@/hooks/useClearDialog';
 import { ref } from 'vue';
 const emit = defineEmits(['update:visible']);
 const formRef = ref(null);
 
 const props = defineProps({
   visible: Boolean,
-  title: String,
-  handleSave: Function,
-  formData: Object,
-});
-defineExpose({
-  formRef,
+  curRow: Object,
 });
+const getDetail = async () => {
+  //编辑状态下获取回显数据的接口请求业务,如果curRow里的字段够用，就直接把curRow里的字段赋值给formData
+  alert('获取详情中...');
+};
+const { formData, isEdit } = useClearDialog(
+  {
+    a: '',
+    b: '',
+    c: '',
+    d: '',
+    e: '',
+    f: '',
+    g: '',
+  },
+  props,
+  getDetail
+);
+const save = () => {};
 </script>

src/views/service-unit/service-unit-manage/unit-manage/index.vue

@@ -3,7 +3,14 @@
     <SearchForm :fields="fields" :params="params"></SearchForm>
     <div class="flex-1 page-wrap">
       <div class="btn-group">
-        <t-button theme="success" @click="handleAdd">新增</t-button>
+        <t-button
+          theme="success"
+          @click="
+            curRow = null;
+            showAddUnitDialog = true;
+          "
+          >新增</t-button
+        >
       </div>
       <t-table
         size="small"
@@ -23,11 +30,7 @@
 
     <AddUnitDialog
       v-model:visible="showAddUnitDialog"
-      :title="title"
-      :type="type"
-      :handleSave="handleSave"
-      :formData="formData"
-      ref="formDialogRef"
+      :curRow="curRow"
     ></AddUnitDialog>
   </div>
 </template>
@@ -36,9 +39,9 @@
 import { ref, reactive } from 'vue';
 import { getTableData } from '@/api/test';
 import useFetchTable from '@/hooks/useFetchTable';
-import useTableCrud from '@/hooks/useTableCrud';
 import AddUnitDialog from './add-unit-dialog.vue';
-const formDialogRef = ref(null);
+const showAddUnitDialog = ref(false);
+const curRow = ref(null);
 
 const columns = [
   { colKey: 'a', title: '服务单元名称' },
@@ -63,7 +66,8 @@ const columns = [
             hover="color"
             onClick={(e) => {
               e.stopPropagation();
-              handleEdit(row);
+              curRow.value = row;
+              showAddUnitDialog.value = true;
             }}
           >
             修改
@@ -93,42 +97,8 @@ const {
   onChange,
 } = useFetchTable(getTableData);
 
-const add = async () => {
-  await 1;
-  alert(1);
-};
-const update = async () => {};
 const refresh = async () => {};
 
-const {
-  visible: showAddUnitDialog,
-  type,
-  title,
-  loading: dialogLoading,
-  handleAdd,
-  handleEdit,
-  handleSave,
-  formData,
-  formRef,
-} = useTableCrud(
-  {
-    name: '服务管理单元',
-    doCreate: add,
-    doUpdate: update,
-    refresh: refresh,
-    initForm: {
-      a: '',
-      b: '',
-      c: '',
-      d: '',
-      e: '',
-      f: '',
-      g: '',
-    },
-  },
-  formDialogRef
-);
-
 const fields = ref([
   {
     prop: 'a',

src/views/sop/sop-manage/office-sop/index.vue

@@ -28,7 +28,7 @@
     </div>
     <PlanChangeDialog
       v-model:visible="showPlanChangeDialog"
-      :rowData="rowData"
+      :curRow="curRow"
     ></PlanChangeDialog>
   </div>
 </template>
@@ -40,7 +40,7 @@ import useFetchTable from '@/hooks/useFetchTable';
 import { useRouter } from 'vue-router';
 import PlanChangeDialog from './plan-change-dialog.vue';
 const showPlanChangeDialog = ref(false);
-const rowData = ref({});
+const curRow = ref(null);
 const selectedRowKeys = ref([]);
 const selectChange = (value, { selectedRowData }) => {
   selectedRowKeys.value = value;
@@ -145,7 +145,7 @@ const toCurSopFlow = (row) => {
 };
 
 const planChange = (row) => {
-  rowData.value = row;
+  curRow.value = row;
   showPlanChangeDialog.value = true;
 };
 </script>

src/views/sop/sop-manage/office-sop/plan-change-dialog.vue

@@ -146,9 +146,13 @@ const formRef = ref(null);
 
 const props = defineProps({
   visible: Boolean,
-  title: String,
+  curRow: Object,
 });
-const { data: formData } = useClearDialog(
+const getDetail = async () => {
+  //编辑状态下获取回显数据的接口请求业务,如果curRow里的字段够用，就直接把curRow里的字段赋值给formData
+  alert('获取详情中...');
+};
+const { formData, isEdit } = useClearDialog(
   {
     a: '',
     b: '',
@@ -164,7 +168,8 @@ const { data: formData } = useClearDialog(
     l: '',
     m: [],
   },
-  props
+  props,
+  getDetail
 );
 const save = () => {
   //ajax...

src/views/user/auth-manage/user-manage/add-user-dialog.vue

@@ -0,0 +1,80 @@
+<template>
+  <my-dialog
+    :visible="visible"
+    @close="emit('update:visible', false)"
+    :header="`${isEdit ? '修改' : '新增'}用户`"
+    :width="600"
+    :closeOnOverlayClick="false"
+  >
+    <t-form ref="formRef" :model="formData" labelWidth="120px">
+      <t-form-item label="姓名">
+        <t-input v-model="formData.a"></t-input>
+      </t-form-item>
+      <t-form-item label="性别">
+        <t-radio-group v-model="formData.b">
+          <t-radio value="1">男</t-radio>
+          <t-radio value="2">女</t-radio>
+        </t-radio-group>
+      </t-form-item>
+      <t-form-item label="手机">
+        <t-input v-model="formData.c"></t-input>
+      </t-form-item>
+      <t-form-item label="所属节点">
+        <t-tree-select v-model="formData.d" :data="treeData" />
+      </t-form-item>
+      <t-form-item label="角色">
+        <t-select v-model="formData.e"></t-select>
+      </t-form-item>
+      <t-form-item label="状态">
+        <t-select v-model="formData.c">
+          <t-option value="1">启用</t-option>
+          <t-option value="2">禁用</t-option>
+        </t-select>
+      </t-form-item>
+    </t-form>
+    <template #foot>
+      <t-button theme="default" @click="emit('update:visible', false)"
+        >取消</t-button
+      >
+      <t-button theme="primary" @click="save">保存</t-button>
+    </template>
+  </my-dialog>
+</template>
+<script setup name="AddUserDialog">
+import useClearDialog from '@/hooks/useClearDialog';
+import { ref, watch } from 'vue';
+const props = defineProps({
+  visible: Boolean,
+  curRow: Object,
+});
+const emit = defineEmits(['update:visible']);
+const formRef = ref(null);
+const getDetail = async () => {
+  //编辑状态下获取回显数据的接口请求业务,如果curRow里的字段够用，就直接把curRow里的字段赋值给formData
+  alert('获取详情中...');
+};
+const { formData, isEdit } = useClearDialog(
+  {
+    a: '',
+    b: '',
+    c: '',
+    d: '',
+    e: '',
+    f: '',
+  },
+  props,
+  getDetail
+);
+const treeData = ref([
+  {
+    label: '节点0',
+    value: '0',
+    children: [
+      { label: '节点1', value: '1' },
+      { label: '节点2', value: '2' },
+    ],
+  },
+]);
+
+const save = () => {};
+</script>

src/views/user/auth-manage/user-manage/index.vue

@@ -1,7 +1,117 @@
 <template>
-  <div class="user">用户管理</div>
+  <div class="user h-full">
+    <div class="flex-1 page-wrap">
+      <div class="btn-group">
+        <t-button
+          theme="success"
+          @click="
+            curRow = null;
+            showAddUserDialog = true;
+          "
+          >新增用户</t-button
+        >
+      </div>
+      <t-table
+        size="small"
+        row-key="id"
+        :columns="columns"
+        :data="tableData"
+        bordered
+        :pagination="{
+          defaultCurrent: 1,
+          defaultPageSize: 10,
+          onChange,
+          total: pagination.total,
+        }"
+      >
+      </t-table>
+    </div>
+    <AddUserDialog
+      v-model:visible="showAddUserDialog"
+      :curRow="curRow"
+    ></AddUserDialog>
+  </div>
 </template>
 
-<script setup name="User"></script>
+<script setup name="User" lang="jsx">
+import { reactive, ref } from 'vue';
+import { useRequest } from 'vue-request';
+import { getTableData } from '@/api/test';
+import useFetchTable from '@/hooks/useFetchTable';
+import AddUserDialog from './add-user-dialog.vue';
+const showAddUserDialog = ref(false);
+const curRow = ref(null);
+const columns = [
+  { colKey: 'a', title: '用户ID' },
+  { colKey: 'b', title: '姓名' },
+  { colKey: 'c', title: '性别' },
+  { colKey: 'd', title: '手机' },
+  { colKey: 'e', title: '所属节点' },
+  { colKey: 'f', title: '角色' },
+  { colKey: 'g', title: '状态' },
+  { colKey: 'h', title: '创建人' },
+  { colKey: 'i', title: '创建时间' },
+  {
+    title: '操作',
+    colKey: 'operate',
+    fixed: 'right',
+    width: 230,
+    cell: (h, { row }) => {
+      return (
+        <div class="table-operations">
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+              curRow.value = row;
+              showAddUserDialog.value = true;
+            }}
+          >
+            修改
+          </t-link>
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            启用
+          </t-link>
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            禁用
+          </t-link>
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            分配角色
+          </t-link>
+        </div>
+      );
+    },
+  },
+];
+
+const {
+  loading: tableLoading,
+  pagination,
+  tableData,
+  fetchData,
+  onChange,
+} = useFetchTable(getTableData);
+
+const refresh = async () => {};
+</script>
 
 <style></style>

src/views/user/org-struct-manage/struct-manage/add-node-dialog.vue

@@ -0,0 +1,65 @@
+<template>
+  <my-dialog
+    :visible="visible"
+    @close="emit('update:visible', false)"
+    :header="`${isEdit ? '修改' : '新增'}管理节点`"
+    :width="600"
+    :closeOnOverlayClick="false"
+  >
+    <t-form ref="formRef" :model="formData" labelWidth="120px">
+      <t-form-item label="节点名称">
+        <t-input v-model="formData.a"></t-input>
+      </t-form-item>
+      <t-form-item label="父节点">
+        <t-tree-select v-model="formData.b" :data="treeData" />
+      </t-form-item>
+      <t-form-item label="状态">
+        <t-select v-model="formData.c">
+          <t-option value="1">启用</t-option>
+          <t-option value="2">禁用</t-option>
+        </t-select>
+      </t-form-item>
+    </t-form>
+    <template #foot>
+      <t-button theme="default" @click="emit('update:visible', false)"
+        >取消</t-button
+      >
+      <t-button theme="primary" @click="save">保存</t-button>
+    </template>
+  </my-dialog>
+</template>
+<script setup name="AddNodeDialog">
+import { ref } from 'vue';
+import useClearDialog from '@/hooks/useClearDialog';
+const props = defineProps({
+  visible: Boolean,
+  curRow: Object,
+});
+const emit = defineEmits(['update:visible']);
+const formRef = ref(null);
+const getDetail = async () => {
+  //编辑状态下获取回显数据的接口请求业务,如果curRow里的字段够用，就直接把curRow里的字段赋值给formData
+  alert('获取详情中...');
+};
+const { formData, isEdit } = useClearDialog(
+  {
+    a: '',
+    b: '',
+    c: '',
+  },
+  props,
+  getDetail
+);
+const treeData = ref([
+  {
+    label: '节点0',
+    value: '0',
+    children: [
+      { label: '节点1', value: '1' },
+      { label: '节点2', value: '2' },
+    ],
+  },
+]);
+
+const save = () => {};
+</script>

src/views/user/org-struct-manage/struct-manage/index.vue

@@ -1,7 +1,95 @@
 <template>
-  <div class="struct-manage">组织架构管理</div>
+  <div class="struct-manage h-full">
+    <div class="flex-1 page-wrap">
+      <div class="btn-group">
+        <t-button
+          theme="success"
+          @click="
+            curRow = null;
+            showAddNodeDialog = true;
+          "
+          >新增管理节点</t-button
+        >
+      </div>
+      <t-table
+        size="small"
+        row-key="id"
+        :columns="columns"
+        :data="tableData"
+        bordered
+        :pagination="{
+          defaultCurrent: 1,
+          defaultPageSize: 10,
+          onChange,
+          total: pagination.total,
+        }"
+      >
+      </t-table>
+    </div>
+    <AddNodeDialog
+      v-model:visible="showAddNodeDialog"
+      :curRow="curRow"
+    ></AddNodeDialog>
+  </div>
 </template>
 
-<script setup name="StructManage"></script>
+<script setup name="StructManage" lang="jsx">
+import { reactive, ref } from 'vue';
+import { useRequest } from 'vue-request';
+import { getTableData } from '@/api/test';
+import useFetchTable from '@/hooks/useFetchTable';
+import AddNodeDialog from './add-node-dialog.vue';
+const showAddNodeDialog = ref(false);
+const curRow = ref(null);
+const columns = [
+  { colKey: 'a', title: '管理节点' },
+  { colKey: 'b', title: '类型' },
+  { colKey: 'c', title: '父节点' },
+  { colKey: 'd', title: '状态' },
+  { colKey: 'e', title: '创建人' },
+  { colKey: 'f', title: '创建时间' },
+  {
+    title: '操作',
+    colKey: 'operate',
+    fixed: 'right',
+    width: 120,
+    cell: (h, { row }) => {
+      return (
+        <div class="table-operations">
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+              curRow.value = row;
+              showAddNodeDialog.value = true;
+            }}
+          >
+            修改
+          </t-link>
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            禁用
+          </t-link>
+        </div>
+      );
+    },
+  },
+];
+
+const refresh = async () => {};
+const {
+  loading: tableLoading,
+  pagination,
+  tableData,
+  fetchData,
+  onChange,
+} = useFetchTable(getTableData);
+</script>
 
 <style></style>