增加租户管理的页面及操作

src/api/modules/index.ts

@@ -0,0 +1,15 @@
+import { get, post, del, put } from '/@/utils/request';
+
+export default {
+  tenant: {
+    getAll: () => get('/tenant/getAll'),
+    list: (params: object) => get('/tenant/list', params),
+    get: (code: string) => get('/tenant/getInfoByCode', { code }),
+    add: (data: object) => post('/tenant/add', data),
+    del: (ids: number[]) => del('/tenant/del', { ids }),
+    edit: (data: object) => put('/tenant/edit', data),
+    editStatus: (id: number, status: number) => put('/tenant/editStatus', { id, status }),
+    addItem: (data: object) => post('/device/add', data),
+    getFlowDataByDateRange: (data: object) => post('/sim/collect/flow_date', data),
+  },
+}

src/views/modules/iotCard/index/index.vue

@@ -21,12 +21,7 @@
           </el-button>
         </el-form-item>
       </el-form>
-      <el-table
-        :data="tableData"
-        max-height="calc(100vh  - 210px);"
-        v-loading="loading"
-        style="width: 100%"
-      >
+      <el-table :data="tableData" max-height="calc(100vh  - 210px);" v-loading="loading" style="width: 100%">
         <el-table-column v-col="'accNumber'" fixed="left" min-width="130" label="卡号" prop="accNumber" align="center" />
         <el-table-column v-col="'ICCID'" min-width="180" label="ICCID" prop="iccid" align="center" />
         <el-table-column v-col="'bindDeviceName'" label="绑定设备" prop="bindDeviceName" align="center" />
@@ -52,13 +47,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <pagination
-        v-if="params.total"
-        :total="params.total"
-        v-model:page="params.pageNum"
-        v-model:limit="params.pageSize"
-        @pagination="getList()"
-      />
+      <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
     </el-card>
   </div>
 </template>
@@ -79,7 +68,7 @@ const router = useRouter();
 
 /** 重置按钮操作 */
 const resetQuery = () => {
-	params.keyWord = ""
+  params.keyWord = ""
   getList();
 };
 
@@ -87,33 +76,33 @@ const resetQuery = () => {
  * 单一删除
  */
 const onDel = (row: any) => {
-	ElMessageBox.confirm(`此操作将卡号为：“${row.accNumber}”进行删除，是否继续?`, '提示', {
-		confirmButtonText: '确认',
-		cancelButtonText: '取消',
-		type: 'warning',
-	}).then(async () => {
-		await api.simCard.deleteItem({ ids: [row.id] });
-		ElMessage.success('删除成功');
-		getList();
-	});
+  ElMessageBox.confirm(`此操作将卡号为：“${row.accNumber}”进行删除，是否继续?`, '提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(async () => {
+    await api.simCard.deleteItem({ ids: [row.id] });
+    ElMessage.success('删除成功');
+    getList();
+  });
 };
 
-const formatOperator = (val:number) => {
+const formatOperator = (val: number) => {
   // 1电信,2联通,3移动
   return ['', '电信', '联通', '移动'][val];
 }
 
-const formatType = (val:number) => {
+const formatType = (val: number) => {
   // 1月卡，2季卡，3年卡，4其他
   return ['', '月卡', '季卡', '年卡', '其他'][val];
 }
 
-const formatStatus = (val:number) => {
+const formatStatus = (val: number) => {
   // 1：可激活 2：测试激活 3：测试去激活 4：在用5：停机6：运营商管理状态
   return ['', '可激活', '测试激活', '测试去激活', '在用', '停机', '运营商管理状态'][val];
 }
 
-const onOpenDetail = (item:any) => {
-  router.push('/iotmanager/iotCard/index/detail/'+item.id);
+const onOpenDetail = (item: any) => {
+  router.push('/iotmanager/iotCard/index/detail/' + item.id);
 }
 </script>

src/views/modules/tenant/edit.vue

@@ -0,0 +1,100 @@
+<template>
+	<el-dialog class="api-edit" v-model="showDialog" :title="`${formData.id ? '编辑租户' : '新增租户'}`" width="600px" :close-on-click-modal="false" :close-on-press-escape="false">
+		<el-form ref="formRef" :model="formData" :rules="ruleForm" label-width="85px" @keyup.enter="onSubmit" v-if="showDialog">
+			<el-form-item label="租户名称" prop="name">
+				<el-input v-model="formData.name" placeholder="请输入租户名称" />
+			</el-form-item>
+			<el-form-item label="租户编码" prop="code">
+				<el-input v-model="formData.code" placeholder="请输入租户编码" />
+			</el-form-item>
+			<el-form-item label="系统名称" prop="systemName">
+				<el-input v-model="formData.systemName" placeholder="请输入系统名称" />
+			</el-form-item>
+			<el-form-item label="系统版权" prop="systemCopyright">
+				<el-input v-model="formData.systemCopyright" placeholder="请输入系统版权" />
+			</el-form-item>
+			<el-form-item label="系统LOGO（小图标）" prop="logoMini">
+				<upload-vue :img="formData.logoMini" @set-img="setImg('logoMini', $event)"></upload-vue>
+			</el-form-item>
+			<el-form-item label="登录展示图" prop="logoPic">
+				<upload-vue :img="formData.logoPic" @set-img="setImg('logoPic', $event)"></upload-vue>
+			</el-form-item>
+			<el-form-item label="系统LOGO" prop="logo">
+				<upload-vue :img="formData.logo" @set-img="setImg('logo', $event)"></upload-vue>
+			</el-form-item>
+			<el-form-item label="简介" prop="description">
+				<el-input v-model="formData.description" type="textarea" :rows="3" />
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<div class="dialog-footer">
+				<el-button @click="cancel">取消</el-button>
+				<el-button type="primary" @click="onSubmit">确定</el-button>
+			</div>
+		</template>
+	</el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue';
+import api from '/@/api/modules';
+import { ruleRequired } from '/@/utils/validator';
+import { ElMessage, UploadProps } from 'element-plus';
+import UploadVue from '/@/components/upload/index.vue';
+
+const emit = defineEmits(['getList']);
+
+const showDialog = ref(false);
+const formRef = ref();
+
+const baseForm: any = {
+	id: undefined,
+	name: '',
+	code: '',
+	systemName: '',
+	systemCopyright: '',
+	description: '',
+};
+
+const formData = reactive<any>(JSON.parse(JSON.stringify(baseForm)));
+
+const ruleForm = {
+	name: [ruleRequired('租户名称不能为空', 'change')],
+	code: [ruleRequired('租户编码不能为空', 'change')],
+};
+
+const onSubmit = async () => {
+	await formRef.value.validate();
+
+	const theApi = formData.id ? api.tenant.edit : api.tenant.add;
+
+	await theApi(formData);
+
+	ElMessage.success('操作成功');
+	resetForm();
+	showDialog.value = false;
+	emit('getList');
+};
+
+const resetForm = async () => {
+	const types = formData.types
+	Object.assign(formData, { ...JSON.parse(JSON.stringify(baseForm)) });
+	formRef.value && formRef.value.resetFields(formData);
+};
+const cancel = async () => {
+	resetForm()
+	showDialog.value = false
+};
+
+const open = async (row: any) => {
+	resetForm();
+	if(row) Object.assign(formData, row)
+	showDialog.value = true;
+};
+
+const setImg = (key: string, val: string) => {
+	formData[key] = val
+}
+
+defineExpose({ open });
+</script>

src/views/modules/tenant/index.vue

@@ -0,0 +1,128 @@
+<template>
+	<div class="page">
+		<el-card shadow="nover">
+			<el-form :model="params" inline ref="queryRef">
+				<el-form-item label="名称搜索" prop="name">
+					<el-input v-model="params.name" placeholder="请输入接口名称" clearable style="width: 180px" @keyup.enter.native="getList(1)" />
+				</el-form-item>
+				<el-form-item label="状态" prop="status">
+					<el-select v-model="params.status" placeholder="接口状态" clearable style="width: 120px">
+						<el-option label="全部" :value="-1" />
+						<el-option label="启用" :value="1" />
+						<el-option label="禁用" :value="0" />
+					</el-select>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" class="ml10" @click="getList(1)">
+						<el-icon>
+							<ele-Search />
+						</el-icon>
+						查询
+					</el-button>
+					<el-button type="primary" @click="addOrEdit()" v-auth="'add'">
+						<el-icon>
+							<ele-FolderAdd />
+						</el-icon>
+						新增租户
+					</el-button>
+				</el-form-item>
+			</el-form>
+			<el-table :data="tableData" @selection-change="handleSelectionChange" style="width: 100%" v-loading="loading" row-key="id">
+				<!-- <el-table-column v-col="'selection'" type="selection" width="55" align="center" /> -->
+				<el-table-column prop="name" label="租户名称" min-width="150" align="center" />
+				<el-table-column prop="code" label="租户编码" min-width="120" align="center" />
+				<el-table-column prop="systemName" label="系统名称" min-width="120" align="center" />
+				<el-table-column prop="systemCopyright" label="系统版权" min-width="120" align="center" />
+				<el-table-column prop="logoMini" label="系统LOGO（小图标）" width="120" align="center">
+					<template #default="{ row }">
+						<el-image v-if="row.logoMini" :src="row.logoMini" style="width: 90px; height: 90px" preview-teleported :preview-src-list="[row.logoMini]" />
+					</template>
+				</el-table-column>
+				<el-table-column prop="logoPic" label="登录展示图" width="120" align="center">
+					<template #default="{ row }">
+						<el-image v-if="row.logoPic" :src="row.logoPic" style="width: 90px; height: 90px" preview-teleported :preview-src-list="[row.logoPic]" />
+					</template>
+				</el-table-column>
+				<el-table-column prop="logo" label="系统LOGO" width="120" align="center">
+					<template #default="{ row }">
+						<el-image v-if="row.logo" :src="row.logo" style="width: 90px; height: 90px" preview-teleported :preview-src-list="[row.logo]" />
+					</template>
+				</el-table-column>
+				<el-table-column prop="status" label="租户状态" width="100" align="center">
+					<template #default="scope">
+						<el-switch v-model="scope.row.status" inline-prompt :active-value="1" :inactive-value="0" active-text="启" inactive-text="禁" @change="handleStatusChange(scope.row)">
+						</el-switch>
+					</template>
+				</el-table-column>
+				<el-table-column label="操作" width="100" align="center" v-col="'handle'">
+					<template #default="scope">
+						<el-button size="small" text type="warning" @click="addOrEdit(scope.row)" v-auth="'edit'">修改</el-button>
+						<el-button size="small" text type="info" @click="onDel(scope.row)" v-auth="'del'">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+			<pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
+		</el-card>
+		<EditForm ref="editFormRef" @getList="getList(1)"></EditForm>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import EditForm from './edit.vue'
+import api from '/@/api/modules'
+import { ElMessageBox, ElMessage } from 'element-plus'
+import { useSearch } from '/@/hooks/useCommon'
+
+const editFormRef = ref()
+const queryRef = ref()
+const ids = ref<number[]>([])
+
+const { params, tableData, getList, loading } = useSearch(api.tenant.list, 'Data', { name: '', keyWord: '', status: -1 })
+
+getList()
+
+const addOrEdit = async (row?: any) => {
+	if (row) {
+		editFormRef.value.open(row)
+		return
+	} else {
+		editFormRef.value.open()
+	}
+}
+
+const handleSelectionChange = (selection: any[]) => {
+	ids.value = selection.filter(item => item.types === 2).map((item) => item.id);
+};
+
+const onDel = (row: any) => {
+	ElMessageBox.confirm(`此操作将删除接口：“${row.name}”，是否继续?`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+	}).then(async () => {
+		await api.tenant.del([row.id as number])
+		ElMessage.success('删除成功')
+		getList()
+	})
+}
+
+// 状态修改
+const handleStatusChange = (row: any) => {
+	let text = row.status === 1 ? '启用' : '停用';
+	ElMessageBox.confirm('确认要"' + text + '"："' + row.name + '"吗?', '警告', {
+		confirmButtonText: '确定',
+		cancelButtonText: '取消',
+		type: 'warning',
+	})
+		.then(function () {
+			return api.tenant.editStatus(row.id, row.status);
+		})
+		.then(() => {
+			ElMessage.success(text + '成功');
+		})
+		.catch(function () {
+			row.status = row.status === 0 ? 1 : 0;
+		});
+};
+</script>