账号管理

src/components/ProTable/index.vue

@@ -184,6 +184,7 @@
 
   const _search = () => {
     search();
+    emit('search', searchParam.value);
   };
 
   const _reset = () => {

src/views/system/accountManage/components/AccountFormModal.vue

@@ -25,6 +25,31 @@
             <el-input v-model="form.username" placeholder="请输入用户名称" />
           </el-form-item>
         </el-col>
+        <el-col :span="24">
+          <el-form-item class="w-full" label="调解中心" >
+            <el-select v-model="form.tenant" placeholder="请选择调解中心">
+              <el-option
+                v-for="item in Tenantlist"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item class="w-full" label="部门" >
+            <el-tree-select
+            placeholder="请选择部门"
+              v-model="form.departmentId"
+              ref="treeselect"
+              :props="{ value: 'id', label: 'name', children: 'children' }"
+              :data="departlist"
+              :render-after-expand="false"
+            />
+          </el-form-item>
+        </el-col>
+        
         <el-col :span="24">
           <el-form-item class="w-full" label="角色" prop="roles">
             <el-select v-model="form.roles" multiple collapse-tags placeholder="请选择角色">
@@ -61,19 +86,28 @@
   import { saveUser } from '@/api/user';
   import { getDefualtRoles } from '@/api/role';
   import { ElMessage } from 'element-plus';
+  import { getTenantPage } from '@/api/tenant';
+  import { getdepartmentTree } from '@/api/departmentManage';
 
   const emits = defineEmits(['success']);
   const formRef = ref();
+  const treeselect = ref();
   const showModal = ref(false);
   const loading = ref(false);
   const form = ref({
     username: '',
     roles: [],
+    departmentCode: '',
+    departmentName: '',
     password: '',
     phone: '',
+    departmentId: '',
+    tenant: '',
     status: 'enable',
   });
   const options = ref([]);
+  const departlist = ref([]);
+  const Tenantlist = ref([]);
   const validatePhone = (rule, value, callback) => {
     const reg = /^1[3-9]\d{9}$/;
     if (!value) {
@@ -96,14 +130,32 @@
   const currentAccount = ref(null);
   const isEdit = computed(() => !!currentAccount.value);
   const modalTitle = computed(() => (isEdit.value ? '编辑账号' : '新增账号'));
-
+  const treeToArray = (tree) => {
+    return tree.reduce((res, item) => {
+    const { children, ...i } = item;
+    return res.concat(i, children && children.length ? treeToArray(children) : []);
+    }, []);
+    }
   const submitForm = async () => {
     try {
       await formRef.value.validate();
       loading.value = true;
-
+      form.value.departmentName = ''
+      form.value.departmentCode = ''
+      if (form.value.tenant) {
+        console.log(form.value.tenant, Tenantlist.value)
+        const item = Tenantlist.value.find(v => v.id === form.value.tenant)
+        form.value.tenant = item
+      }
+      if (form.value.departmentId) {
+        const list = treeToArray(departlist.value)
+        const item = list.find(v => v.id === form.value.departmentId)
+        if (item) {
+          form.value.departmentName = item.name
+          form.value.departmentCode = item.departmentCode
+        }
+      }
       await saveUser(form.value);
-
       ElMessage({
         type: 'success',
         message: isEdit.value ? '修改成功！' : '添加成功！',
@@ -118,20 +170,40 @@
   const onHide = () => {
     form.value = {
       username: '',
+      departmentCode: '',
+      departmentName: '',
       roles: [],
       password: '',
       phone: '',
+      departmentId: '',
+      tenant: '',
       status: 'enable',
     };
     formRef.value.clearValidate();
     currentAccount.value = null;
     showModal.value = false;
   };
+ 
   const openModal = (account) => {
-    account && (form.value = account);
+    if (account){
+      form.value = account
+      if (account.tenant) {
+        form.value.tenant = account.tenant.id
+      }
+    }
     getDefualtRoles().then((res) => {
       options.value = res.result;
     });
+    getTenantPage({ current: 1, size: 9999999, status: 'enable' }).then(res => {
+      if (res.success) {
+        Tenantlist.value = res.result.content
+      }
+    })
+    getdepartmentTree().then(res => {
+      if (res.success) {
+        departlist.value = res.result
+      }
+    })
     currentAccount.value = account;
     showModal.value = true;
   };

src/views/system/accountManage/index.vue

@@ -29,12 +29,14 @@
   import { useDict } from '@/hooks/useDict';
   import { onMounted } from 'vue';
   import { getTenantPage } from '@/api/tenant';
+import { getdepartmentTree } from '@/api/departmentManage';
   import { getRolePage } from '@/api/role';
   const { Status } = useDict("Status");
 
   const proTable = ref();
   const accountFormModalRef = ref();
   const Rolelist = ref([]);
+  const departlist = ref([]);
   const Tenantlist = ref([]);
   const config = reactive({
     columns: [
@@ -70,6 +72,15 @@
         fieldNames: { label: 'roleName', value: 'roleCode' },
         title: '角色'
       },
+      
+      {
+        field: 'departmentName',
+        title: '部门',
+        width: 160,
+        enum: departlist,
+        fieldNames: { label: 'name', value: 'id' },
+        search: { el: 'tree-select', props: { filterable: true}, labelWidth: 85, key: 'departmentId' },
+      },
       {
         field: 'phone',
         title: '手机号',
@@ -187,6 +198,11 @@
         console.log('Tenantlist.value', Tenantlist.value)
       }
     })
+    getdepartmentTree().then(res => {
+      if (res.success) {
+        departlist.value = res.result
+      }
+    })
   });
 </script>
 <style lang="scss" scoped></style>

src/views/system/departmentManage/components/DepartmentFormModal.vue

@@ -43,7 +43,7 @@
     const form = ref({
     //   code: '',
       name: '',
-      parent: {}
+      parent: null
     });
     const rules = ref({
     //   code: { required: true, message: '请输入部门编码', trigger: 'blur' },
@@ -87,7 +87,7 @@
     const openModal = (type, department) => {
       if (type === 'add') {
         department && (form.value.parent = department);
-        !department && (form.value.parent = {});
+        !department && (form.value.parent = null);
         currentdepartment.value = null;
       } else {
         department && (form.value = department);

src/views/system/departmentManage/index.vue

 <template>
   <div>
-    <ProTable ref="proTable" :config="config" :api="getdepartmentTree" :paramCallback="paramCallback">
+    <ProTable ref="proTable" :config="config" :show-pagination="false"
+      @search="handleSearch"
+      :data="tableData">
       <template #left_buttons>
           <!-- v-permission="'risk_member_add'" -->
         <el-button
@@ -14,7 +16,7 @@
         > -->
       </template>
     </ProTable>
-    <DepartmentFormModal ref="DepartmentFormModalRef" @success="query" />
+    <DepartmentFormModal ref="DepartmentFormModalRef" @success="handleSearch" />
 
   </div>
 </template>
@@ -23,18 +25,15 @@
 import DepartmentFormModal from './components/DepartmentFormModal.vue';
 import { Delete, Edit, Plus } from '@element-plus/icons-vue';
 import { ref,reactive  } from 'vue';
+import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
 import { onMounted } from 'vue';
 import { saveDepartment, getdepartmentTree, batchDeleteByIds } from '@/api/departmentManage';
 const proTable = ref();
+const tableData = ref([]);
 const DepartmentFormModalRef = ref();
 const current = ref();
-const query = () => proTable.value?.search();
-const paramCallback = (param) => {
-    const obj = JSON.parse(JSON.stringify(param));
-    obj['staffRole'] = 'risk_control_commissioner'
-    return obj;
-  };
 const onRadioChange = ({newValue}) => {
+  console.log('onRadioChange', newValue)
   current.value = newValue
 }
 const addDeparment = () => {
@@ -43,10 +42,30 @@ const addDeparment = () => {
 const editDepartment = (row) => {
   DepartmentFormModalRef.value?.openModal('edit', row)
 }
-const handleDelete = () => {
+const handleDelete = async (row) => {
+  await ElMessageBox.confirm('是否确认删除该菜单？', '提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
+
+  await batchDeleteByIds(row.id);
 
+  ElMessage({
+    type: 'success',
+    message: '删除成功！',
+    plain: true,
+  });
+  handleSearch();
 }
+const handleSearch = async (params) => {
+    current.value = null
+    const { result } = await getdepartmentTree(params ?? {});
+    tableData.value = result;
+  };
 const config = reactive({
+  stripe: false, // tree 不支持 stripe
+  radioConfig: {strict: false},
   onRadioChange: onRadioChange,
   treeConfig: {
     rowField: 'id',
@@ -54,7 +73,7 @@ const config = reactive({
   },
   columns: [
     { type: 'radio', width: 60, fixed: 'left' },
-    { field: 'name', title: '部门名称', search: { el: 'input', labelWidth: 85 } },
+    { field: 'name', title: '部门名称', treeNode: true },
     // { field: 'code', title: '部门编码', search: { el: 'input', labelWidth: 85 } },
     {
       field: 'action',
@@ -78,36 +97,7 @@ const config = reactive({
   ],
 });
  
-// 添加
-function append(data) {
-    const newChild = { id: id++, label: 'testtest', children: [] };
-    if (!data.children) {
-        data.children = []
-    }
-    data.children.push(newChild);
-}
- 
-// 删除
-function remove(node, data) {
-    const parent = node.parent;
-    const children = parent.data.children || parent.data;
-    const index = children.findIndex(d => d.id === data.id);
-    children.splice(index, 1);
-}
- 
-// 编辑
-function edit(data) {
-    ElMessageBox.prompt('请输入标题', '编辑', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-    }).then(({ value }) => {
-        if (value != null) {
-            data.label = value;
-        }
-    }).catch(() => { });
-}
- 
 onMounted(() => {
-    query();
+    handleSearch();
   });
 </script>
\ No newline at end of file