添加租户管理

src/api/tenant.js

@@ -4,8 +4,8 @@ export const saveTenant = (data) => {
   return request.post('/tenant/save', data);
 };
 
-export const getTenantPage = () => {
-  return request.get('/tenant/page');
+export const getTenantPage = (params) => {
+  return request.get('/tenant/page', params);
 };
 
 export const deleteTenants = (ids) => {

src/assets/json/authMenuList.json

@@ -285,6 +285,20 @@
           "isKeepAlive": true
         }
       },
+      {
+        "path": "/system/tenantManage",
+        "name": "tenantManage",
+        "component": "/system/tenantManage/index",
+        "meta": {
+          "icon": "",
+          "title": "租户管理",
+          "isLink": "",
+          "isHide": false,
+          "isFull": false,
+          "isAffix": false,
+          "isKeepAlive": true
+        }
+      },
       {
         "path": "/system/roleManage",
         "name": "roleManage",

src/views/system/tenantManage/components/TenantFormModal.vue

+<template>
+  <vxe-modal
+    v-model="showModal"
+    :title="modalTitle"
+    @hide="onHide"
+    width="500px"
+    show-maximize
+    show-footer
+    esc-closable
+  >
+    <el-form ref="formRef" :model="form" :rules="rules" inline label-width="80px">
+      <el-row :gutter="10">
+        <el-col :span="24">
+          <el-form-item class="w-full" label="租户名称" prop="name">
+            <el-input v-model="form.name" placeholder="请输入租户名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item class="w-full" label="租户编码" prop="code">
+            <el-input v-model="form.code" placeholder="租户编码" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item class="w-full" label="状态" prop="status">
+            <el-radio-group v-model="form.status">
+              <el-radio value="enable">启用</el-radio>
+              <el-radio value="disable">禁用</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <template #footer>
+      <el-button type="default" @click="showModal = false">取消</el-button>
+      <el-button :loading="loading" type="primary" @click="submitForm">提交</el-button>
+    </template>
+  </vxe-modal>
+</template>
+
+<script setup name="tenantFormModal">
+  import { ref, computed } from 'vue';
+  import { saveTenant } from '@/api/tenant';
+  import { ElMessage } from 'element-plus';
+
+  const emits = defineEmits(['success']);
+  const currentTenant = ref(null);
+  const showModal = ref(false);
+  const formRef = ref(null);
+
+  const isEdit = computed(() => !!currentTenant.value);
+  const modalTitle = computed(() => (isEdit.value ? '编辑租户' : '新增租户'));
+
+  const form = ref({
+    name: '',
+    code: '',
+    status: 'enable',
+  });
+  const rules = ref({
+    name: { required: true, message: '请输入租户名称', trigger: 'blur' },
+    code: { required: true, message: '请输入租户编码', trigger: 'blur' },
+  });
+
+  const loading = ref(false);
+  const submitForm = async () => {
+    try {
+      await formRef.value.validate();
+      loading.value = true;
+
+      await saveTenant(form.value);
+      emits('success');
+      ElMessage({
+        type: 'success',
+        message: isEdit.value ? '修改成功！' : '添加成功!',
+        plain: true,
+      });
+      showModal.value = false;
+    } catch {}
+    loading.value = false;
+  };
+  const onHide = () => {
+    form.value = {
+      name: '',
+      code: '',
+      status: 'enable',
+    };
+    formRef.value.clearValidate();
+    currentTenant.value = null;
+  };
+  const openModal = (role) => {
+    role && (form.value = role);
+    currentTenant.value = role;
+    showModal.value = true;
+  };
+
+  defineExpose({
+    openModal,
+  });
+</script>

src/views/system/tenantManage/index.vue

+<template>
+  <div class="table-box">
+    <ProTable ref="proTable" :config="config" :api="getTenantPage">
+      <template #left_buttons>
+        <el-button type="primary" :icon="Plus" @click="tenatModalRef?.openModal()">新增</el-button>
+        <el-button type="danger" :icon="Delete" @click="onDelete">删除</el-button>
+      </template>
+    </ProTable>
+
+    <TenantFormModal ref="tenatModalRef" @success="query" />
+  </div>
+</template>
+
+<script setup lang="jsx" name="tenantManage">
+  import { ref, reactive, onMounted } from 'vue';
+  import { Plus, Delete, Edit, Setting } from '@element-plus/icons-vue';
+  import { getTenantPage, deleteTenants } from '@/api/tenant';
+  import TenantFormModal from './components/TenantFormModal.vue';
+  import { ElMessageBox, ElMessage, ElButton, ElTag } from 'element-plus';
+
+  const proTable = ref(null);
+  const tenatModalRef = ref(null);
+  const config = reactive({
+    columns: [
+      { type: 'checkbox', width: 50 },
+      { field: 'name', title: '租户名称', search: { el: 'input' } },
+      { field: 'code', title: '租户编码', search: { el: 'input' } },
+      {
+        field: 'status',
+        title: '状态',
+        width: 80,
+        slots: {
+          default: ({ row }) => {
+            return (
+              <ElTag type={row.status == 'enable' ? 'primary' : 'danger'}>
+                {row.status == 'enable' ? '启用' : '禁用'}
+              </ElTag>
+            );
+          },
+        },
+      },
+      {
+        width: 200,
+        title: '操作',
+        slots: {
+          default: ({ row }) => (
+            <>
+              <ElButton type="primary" link icon={Edit} onClick={() => handleEdit(row)}>
+                编辑
+              </ElButton>
+              <ElButton type="primary" link icon={Setting}>
+                设置成员
+              </ElButton>
+            </>
+          ),
+        },
+      },
+    ],
+  });
+
+  const query = () => proTable.value?.search();
+  const handleEdit = (row) => tenatModalRef.value.openModal(JSON.parse(JSON.stringify(row)));
+  const onDelete = async () => {
+    const list = proTable.value.element.getCheckboxRecords();
+    if (list.length > 0) {
+      await ElMessageBox.confirm('是否确认删除选中的数据？', '删除提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      });
+
+      const ids = list.map((v) => v.id).join(',');
+      await deleteTenants(ids);
+
+      ElMessage.success({
+        message: '删除成功',
+        plain: true,
+      });
+
+      query();
+    }
+  };
+
+  onMounted(() => {
+    query();
+  });
+</script>