baozhida_erp/src/views/storehouse/inventory/IOTNetworkCard.vue

<script setup lang="ts">
import {
	stockInEditSort,
	Storehouse_IOTNetworkCard_Add,
	Storehouse_IOTNetworkCard_Del,
	Storehouse_IOTNetworkCard_Edit, Storehouse_IOTNetworkCard_Edit_Device_Number,
	Storehouse_IOTNetworkCard_Import,
	Storehouse_IOTNetworkCard_List,
	Storehouse_IOTNetworkCard_Export, exportOperationFile,
} from '@/api/storehouse/index'
import {nextTick, reactive, ref} from 'vue'
import Upload from '@/components/Upload/index.vue'
import Drawer from '@/components/Drawer/index.vue'
import type {FormInstance, FormRules} from 'element-plus'
import {ElLoading, ElMessage, ElMessageBox} from 'element-plus'
import {Delete, Edit, Finished, View} from '@element-plus/icons-vue'
import type {ColumnProps} from '@/components/TableBase/interface/index'
import {useTablePublic} from '@/hooks/useTablePublic'
import ReceiveUser from "@/views/storehouse/outStock/receiveUser.vue";

let total = 0
let editStateTitle = ""
const isNew = ref(true)
const formLabelWidth = ref('100px')
const ruleFormRef = ref<FormInstance>()
const drawerRef = ref<InstanceType<typeof Drawer> | null>(null)
const uploadRef = ref<InstanceType<typeof Upload> | null>(null)
const {resetForm, globalStore, searchOnTableList} = useTablePublic()
const receiveUserdialog = ref<InstanceType<typeof ReceiveUser> | null>(null)
const uploadFiles = ref<File[]>([]) // 新增：用于存储上传的文件
const ImportEdit = ref(false)
const tableData = ref<any[]>([])
const multipleSelection = ref<any[]>([])
const dialogTableVisible = ref(false)
const editStateVisible = ref(false)

const columns: ColumnProps[] = [
	{type: 'selection', width: '44px', fixed: 'left'},
	{type: 'index', label: '序号', width: 80},
	{prop: 'T_company_name', label: '公司名称'},
	{prop: 'T_in_date', label: '入库日期',width: 120},
	{prop: 'T_meal_type', label: '套餐类型'},
	{prop: 'T_meal', label: '套餐'},
	{prop: 'T_expire', label: '到期&欠费'},
	{prop: 'T_State', label: '状态',width: 85},
	{prop: 'T_iccid', label: '串码', width: 220},
	{prop: 'T_device_number', label: '移动端设备编号',name: 'T_device_number',width: 180},
	{prop: 'T_MSISDN', label: 'MSISDN',width: 150},
	{prop: 'T_out_date', label: '出库日期',width: 120},
	{prop: 'T_out_project', label: '出库项目',width: 120},
	{prop: 'T_receive_name', label: '领用人'},
	// {prop: 'T_remark', label: '备注'},
	// {prop: 'operation', label: '操作', width: 150, fixed: 'right'}
]

const rules = reactive<FormRules>({
	T_in_date: [{required: true, message: '请输入入库日期', trigger: 'blur'}],
	T_State: [{required: true, message: '请选择状态', trigger: 'blur'}],
	T_iccid: [{required: true, message: '请输入串码', trigger: 'blur'}],
	T_MSISDN: [{required: true, message: '请输入MSISDN', trigger: 'blur'}],
})
const editStateRules = reactive<FormRules>({
	T_out_date: [{required: true, message: '请输入出库日期', trigger: 'blur'}],
	T_out_project: [{required: true, message: '请输入出库项目', trigger: 'blur'}],
	T_receive_name: [{required: true, message: '请选择领用人', trigger: 'blur'}],
})
const form: any = ref({
	T_id: '',
	T_company_name: '',
	T_in_date: '',
	T_meal_type: '',
	T_meal: '',
	T_expire: '',
	T_iccid: '',
	T_MSISDN: '',
	T_out_date: '',
	T_out_project: '',
	T_receive: '',
	T_receive_name: '',
	T_remark: '',
	T_State: 1,
})
const editStateform: any = ref({
	T_out_date: '',
	T_out_project: '',
	T_receive: '',
	T_receive_name: '',
	T_remark: '',
	T_State: 1,
})

// 搜索
const options = reactive([
	{name: '新卡入库', id: 1},
	{name: '退还入库', id: 2},
	{name: '已出库', id: 3},
	{name: '损坏退还', id: 4},
	{name: '待注销', id: 5},
	{name: '已注销', id: 6}
])

const openDrawer = (type: string, row?: any) => {
	isNew.value = type === 'new' ? true : false
	if (type == 'edit') {
		for (let key in form.value) {
			if (row.hasOwnProperty(key)) {
				form.value[key] = row[key];
			}
			form.value.T_id = row.Id
		}
	} else {
		delete form.value.T_id
		form.value.T_company_name = ''
		form.value.T_in_date = ''
		form.value.T_meal_type = ''
		form.value.T_meal = ''
		form.value.T_expire = ''
		form.value.T_device_number = ''
		form.value.T_iccid = ''
		form.value.T_MSISDN = ''
		form.value.T_remark = ''
		form.value.T_State = 1
	}
	drawerRef.value?.openDrawer()
}

const AddIOTNetworkCard = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate(async (valid: boolean) => {
		if (valid) {
			let res: any = {}
			if (isNew.value) {//新增
				res = await Storehouse_IOTNetworkCard_Add({User_tokey: globalStore.GET_User_tokey, ...form.value})
			} else {//编辑
				res = await Storehouse_IOTNetworkCard_Edit({
					User_tokey: globalStore.GET_User_tokey,
					...form.value,
				})
			}
			if (res.Code === 200) {
				ElMessage.success(`物联网卡${isNew.value ? '添加' : '修改'}成功！！`)
				nextTick(() => {
					drawerRef.value?.closeDrawer()
					// updateOnTableList(TableRef.value)
					resetForm(ruleFormRef.value)
					isNew.value = true
					getIOTNetworkCard_List()
				})
			}
		}
	})
}

const IOTNetworkCardDelete = (row: any) => {
	ElMessageBox.confirm('您确定要删除该物联网卡吗?', '警告', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(async () => {
			const res: any = await Storehouse_IOTNetworkCard_Del({
				User_tokey: globalStore.GET_User_tokey,
				T_id: row.Id
			})
			if (res.Code === 200) {
				ElMessage.success('删除成功！')
				// nextTick(() => updateOnTableList(TableRef.value))
				getIOTNetworkCard_List()
			}
		})
		.catch(() => {
			ElMessage.warning('取消成功！')
		})
}

const callbackDrawer = (done: () => void) => {
	resetForm(ruleFormRef.value)
	uploadRef.value?.clearfileList()
	done()
}
// 搜索
const initParam = reactive({
	User_tokey: globalStore.GET_User_tokey,
	page: 1,
	page_z: 10,
	T_name: '',
	T_company_name: '',
	T_state: ''
})

/**
 * 选择领用人
 */
const selectApprover = () => receiveUserdialog.value?.openDrawer()
const getReceiveInfo = ({T_uuid, T_name}: { T_uuid: string; T_name: string }) => {
	form.value.T_receive = T_uuid
	form.value.T_receive_name = T_name
}

const geteditStateReceiveInfo = ({T_uuid, T_name}: { T_uuid: string; T_name: string }) => {
	editStateform.value.T_receive = T_uuid
	editStateform.value.T_receive_name = T_name
}

const handleFileChange = (file: any, fileList: any) => {
	uploadFiles.value = fileList.map((item: any) => item.raw) // 新增：更新上传文件列表
}
const submitUpload = async () => {
	if (uploadFiles.value.length === 0) {
		// 修改：使用 uploadFiles.value
		ElMessage.warning('请先选择文件')
		return
	}
	const formData = new FormData()
	uploadFiles.value.forEach((file: File) => {
		// 修改：遍历 uploadFiles.value
		formData.append('file', file)
	})
	const loading = ElLoading.service({
		// 新增：显示加载动画
		lock: true,
		text: '正在上传文件...',
		background: 'rgba(0, 0, 0, 0.7)'
	})
	try {
		const result: any = await Storehouse_IOTNetworkCard_Import(formData)
		if (result.Code === 200) {
			ElMessage.success('文件上传成功')
			// 处理上传成功后的逻辑
			getIOTNetworkCard_List()
			uploadFiles.value = [] // 新增：清除文件上传列表
			ImportEdit.value = false
		} else {
			ElMessage.error('文件上传失败')
		}
	} catch (error) {
		ElMessage.error('文件上传失败，请检查网络连接')
	} finally {
		loading.close() // 新增：关闭加载动画
	}
}

const getIOTNetworkCard_List = async () => {
	const res: any = await Storehouse_IOTNetworkCard_List(initParam)
	tableData.value = res.Data.Data || []
	total = res.Data.Num
}
getIOTNetworkCard_List()
// 搜索模型
const searchModelHandle = () => {
	total = 0
	initParam.page = 1
	getIOTNetworkCard_List()
}

const handleSelectionChange = (val: any[]) => {
	multipleSelection.value = val
	console.log(multipleSelection.value)
}
const selectableDisable = (row: any) => {
	if (row.Id === 0) return false
	return true
}
const handleSizeChange = (val: number) => {//分页改变
	initParam.page_z = val
	//下面调用列表的接口
	getIOTNetworkCard_List()
}
const handleCurrentChange = (val: number) => {//条数改变
	initParam.page = val
	//下面调用列表的接口
	getIOTNetworkCard_List()
}
// 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
const getRowKey = (row: any) => {
	return row.Id
}

// 修改状态
const openEditStateDialog =  (state: number) => {
	if (multipleSelection.value.length === 0) {
		ElMessage.warning('请选择物联网卡!!!')
		return
	}
	editStateform.value.T_out_date = ''
	editStateform.value.T_out_project = ''
	editStateform.value.T_receive = ''
	editStateform.value.T_receive_name = ''
	editStateform.value.T_remark = ''
	editStateform.value.T_State = state
	if (state === 3) {
		editStateTitle = '出库'
	}
	if (state === 4) {
		editStateTitle = '退还'
	}
	if (state === 5) {
		editStateTitle = '待注销'
	}
	if (state === 6) {
		editStateTitle = '注销'
	}
	editStateVisible.value = true

}
const editState = async (formEl: FormInstance | undefined) => {
	if (multipleSelection.value.length === 0) {
		ElMessage.warning('请选择物联网卡!!!')
		return
	}
	if (!formEl) return
	formEl.validate(async (valid: boolean) => {
		if (valid) {
			for await (let item of multipleSelection.value) {
				Storehouse_IOTNetworkCard_Edit({ T_id: item.Id , ...editStateform.value})
			}
			ElMessage.success('提交成功!!!')

			nextTick(() => {
				multipleSelection.value = []
				editStateVisible.value = false
			})
			getIOTNetworkCard_List()
		}
	})
}
const gridData:any = ref([])
const preview = (list:any) => {
	gridData.value = list || []

	dialogTableVisible.value = true
}

const onclickT_device_number = async (row:any)=>{
	const result:any = await Storehouse_IOTNetworkCard_Edit_Device_Number({T_id:row.Id,T_device_number:row.T_device_number})
	if(result.Code==200){
		ElMessage.success('设备编号录入成功')
		getIOTNetworkCard_List()
	}

}
const exportStatExcel = async () => {
	// const result:any = await Storehouse_IOTNetworkCard_Export({
	// 	User_tokey: globalStore.GET_User_tokey,
	// 	T_name: initParam.T_name,
	// 	T_company_name: initParam.T_company_name,
	// 	T_state: initParam.T_state,
	// })
	// if (result.Code === 200) {
	// 	window.open(result.Data)
	// }

	try {
		const response: any = await Storehouse_IOTNetworkCard_Export({
				User_tokey: globalStore.GET_User_tokey,
				T_name: initParam.T_name,
				T_company_name: initParam.T_company_name,
				T_state: initParam.T_state,
			})

		// 处理返回的二进制文件并触发下载
		const blob = new Blob([response], {type: 'application/vnd.ms-excel;charset=utf8'})
		const url = window.URL.createObjectURL(blob)
		const a = document.createElement('a')
		a.href = url
		const now = new Date();
		const formattedDate = `${now.getFullYear()}${(now.getMonth()+1).toString().padStart(2, '0')}${now.getDate().toString().padStart(2, '0')}_${now.getHours().toString().padStart(2, '0')}${now.getMinutes().toString().padStart(2, '0')}`;
		a.download = `物联网卡_${formattedDate}.xlsx`;
		document.body.appendChild(a)
		a.click()
		a.remove()
		window.URL.revokeObjectURL(url)
		ElMessage.success('导出成功')
	} catch (error) {
		ElMessage.error('导出失败，请检查网络连接')
	}
}
</script>

<template>
	<div class="iotnetworkcard-list">
		<el-card class="m-b-3">
			<div class="input-suffix">
			<el-row :gutter="20" style="margin-bottom: 0">
				<el-col :xl="5" :lg="5" :md="4">
					<span class="inline-flex items-center">关键字：</span>
					<el-input
						v-model="initParam.T_name"
						type="text"
						class="w-50 m-2"
						placeholder="按串码、MSISDN、出库项目搜索"
						@change="searchOnTableList"
					/>
				</el-col>
				<el-col :xl="5" :lg="5" :md="4">
					<span class="inline-flex items-center">公司名称：</span>
					<el-input
						v-model="initParam.T_company_name"
						type="text"
						class="w-50 m-2"
						placeholder="按公司名称搜索"
						@change="searchOnTableList"
					/>
				</el-col>
				<el-col :xl="6" :lg="6" :md="5">
					<span class="inline-flex items-center">状态：</span>
					<el-select v-model="initParam.T_state" class="w-50 m-2" clearable placeholder="请选择状态~">
						<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"/>
					</el-select>
					<el-button type="primary" @click="searchModelHandle">搜索</el-button>
					<el-button type="success" @click="exportStatExcel">导出</el-button>
				</el-col>
				<el-col :xl="8" :lg="8" :md="11" class="btn">
					<el-button type="primary" @click="openDrawer('new')">入库</el-button>
					<el-button type="success" @click="ImportEdit = true">导入</el-button>
					<el-button type="primary" @click="openEditStateDialog(3)">出库</el-button>
					<el-button type="success" @click="openEditStateDialog(4)">退还</el-button>
					<el-button type="warning" @click="openEditStateDialog(5)">待注销</el-button>
					<el-button type="info" @click="openEditStateDialog(6)">注销</el-button>
				</el-col>
			</el-row>
			</div>
		</el-card>
		<el-card class="table-card">
			<el-table
				:data="tableData"
				:row-key="getRowKey"
				:highlight-current-row="true"
				@selection-change="handleSelectionChange"
				height="580px"
				style="width: 100%"
			>
				<template v-for="(item, index) in columns" :key="index">
					<el-table-column
						show-overflow-tooltip
						v-if="item.type === 'index' || item.fixed === 'left'"
						:selectable="selectableDisable"
						:type="item.type"
						align="center"
						v-bind="item"
					/>
					<el-table-column
						v-else-if="item.prop === 'T_State'"
						:selectable="selectableDisable"
						:label="item.label"
						:width="item.width"
						align="center"
					>
						<template #default="scope">
							<el-text v-if="scope.row.T_State === 1" type="success">新卡入库</el-text>
							<el-text v-if="scope.row.T_State === 2" type="success">退还入库</el-text>
							<el-text v-if="scope.row.T_State === 3" type="primary">已出库</el-text>
							<el-text v-if="scope.row.T_State === 4" type="danger">损坏退还</el-text>
							<el-text v-if="scope.row.T_State === 5" type="warning">待注销</el-text>
							<el-text v-if="scope.row.T_State === 6" type="info">已注销</el-text>
						</template>
					</el-table-column>
					<el-table-column
						v-else-if="item.prop === 'T_device_number'"
						:selectable="selectableDisable"
						:label="item.label"
						:width="item.width"
						align="center"
					>
						<template v-slot="scope">
<!--							<el-input v-model="scope.row.T_device_number" placeholder="请输入" class="input" />-->
							<el-input v-model="scope.row.T_device_number" type="text" autocomplete="off" class="w-20"
									  placeholder="" @keyup.enter="onclickT_device_number(scope.row)"/>
						</template>
					</el-table-column>
					<el-table-column
						v-else
						:selectable="selectableDisable"
						:prop="item.prop"
						:label="item.label"
						:width="item.width"
						align="center"
						label-class-name="label-table"
						show-overflow-tooltip
					>
					</el-table-column>

				</template>

				<el-table-column
					fixed="right"
					label="操作"
					align="center"
					width="230">
					<template #default="scope">
						<el-button link type="primary" size="small" :icon="View" @click="preview(scope.row.T_record)">查看记录</el-button>
						<el-button link type="primary" size="small" :icon="Edit" @click="openDrawer('edit', scope.row)">编辑
						</el-button>
						<el-button link type="danger" size="small" :icon="Delete"
								   @click="IOTNetworkCardDelete(scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
					v-model:current-page="initParam.page"
					v-model:page-size="initParam.page_z"
					:page-sizes="[10, 50, 100,500,1000,5000]"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				/>
			</div>

		</el-card>
		<Drawer ref="drawerRef" :handleClose="callbackDrawer" size="45%">
			<template #header="{ params }">
				<h4 :id="params.titleId" :class="params.titleClass">{{ isNew ? '入库' : '编辑' }} - 物联网卡</h4>
			</template>
			<el-form ref="ruleFormRef" :model="form" :rules="rules">
				<el-form-item label="公司名称：" class="m-b-6" :label-width="formLabelWidth" prop="T_company_name">
					<el-input v-model="form.T_company_name" type="text" class="w-50" placeholder="请填写公司名称"/>
				</el-form-item>
				<el-form-item label="入库日期：" class="m-b-6" :label-width="formLabelWidth" prop="T_in_date">
					<el-date-picker
						class="my-date-picker"
						style="width: 21.5rem"
						v-model="form.T_in_date"
						type="date"
						placeholder="选择日期"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
					/>
				</el-form-item>
				<el-form-item label="套餐类型：" class="m-b-6" :label-width="formLabelWidth" prop="T_meal_type">
					<el-input v-model="form.T_meal_type" type="text" class="w-50" placeholder="请填写套餐类型"/>
				</el-form-item>
				<el-form-item label="套餐：" class="m-b-6" :label-width="formLabelWidth" prop="T_meal">
					<el-input v-model="form.T_meal" type="text" autocomplete="off" class="w-50"
							  placeholder="请填写套餐"/>
				</el-form-item>
				<el-form-item label="到期&欠费：" class="m-b-6" :label-width="formLabelWidth" prop="T_expire">
					<el-input v-model="form.T_expire" type="text" autocomplete="off" class="w-50"
							  placeholder="请填写到期&欠费"/>
				</el-form-item>
				<el-form-item label="状态：" class="m-b-6" :label-width="formLabelWidth" prop="T_State">
					<el-select v-model="form.T_State" class="w-50 m-2" clearable placeholder="请选择状态~">
						<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"/>
					</el-select>
				</el-form-item>
				<el-form-item label="串码：" class="m-b-6" :label-width="formLabelWidth" prop="T_iccid">
					<el-input v-model="form.T_iccid" type="text" autocomplete="off" class="w-50"
							  placeholder="请填写串码"/>
				</el-form-item>
				<el-form-item label="移动端设备编号：" class="m-b-6" :label-width="formLabelWidth" prop="T_device_number">
					<el-input v-model="form.T_device_number" type="text" autocomplete="off" class="w-50"
							  placeholder="请填写移动端设备编号"/>
				</el-form-item>
				<el-form-item label="MSISDN：" class="m-b-6" :label-width="formLabelWidth" prop="T_MSISDN">
					<el-input v-model="form.T_MSISDN" type="text" autocomplete="off" class="w-50"
							  placeholder="请填写MSISDN"/>
				</el-form-item>
				<el-form-item v-if="!isNew" label="出库日期：" class="m-b-6" :label-width="formLabelWidth"
							  prop="T_out_date">
					<el-date-picker
						class="my-date-picker"
						style="width: 21.5rem"
						v-model="form.T_out_date"
						type="date"
						placeholder="选择日期"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
					/>
				</el-form-item>
				<el-form-item v-if="!isNew" label="出库项目：" :label-width="formLabelWidth" prop="T_out_project">
					<el-input v-model="form.T_out_project" type="text" class="w-50" placeholder="请填写出库项目"/>
				</el-form-item>
				<el-form-item v-if="!isNew" label="领用人：" class="m-b-6" :label-width="formLabelWidth"
							  prop="T_receive_name">
					<el-input v-model="form.T_receive_name" placeholder="请选择领用人" class="w-50"
							  @focus="selectApprover"/>
				</el-form-item>
				<el-form-item label="备注：" :label-width="formLabelWidth" prop="T_remark">
					<el-input v-model="form.T_remark" type="text" class="w-50" placeholder="请填写备注"/>
				</el-form-item>


				<el-form-item :label-width="formLabelWidth">
					<el-button v-if="isNew" color="#626aef" @click="AddIOTNetworkCard(ruleFormRef)">提交</el-button>
					<el-button v-else color="#626aef" @click="AddIOTNetworkCard(ruleFormRef)">修改</el-button>
				</el-form-item>
			</el-form>
			<ReceiveUser ref="receiveUserdialog" :dept_leader="0" @onUserInfo="getReceiveInfo" title="选择领用人"/>

		</Drawer>
		<el-dialog title="导入" v-model="ImportEdit" width="50%">
			<el-upload ref="uploadRef" class="upload-demo" :auto-upload="false" @change="handleFileChange">
				<template #trigger>
					<el-button type="primary">选择文件</el-button>
				</template>
				<el-button style="margin-left: 10px;" type="success" @click="submitUpload"> 导入</el-button>

				<template #tip>
					<div class="el-upload__tip">
						只能上传excel文件
					</div>
				</template>
			</el-upload>
		</el-dialog>

		<el-dialog v-model="dialogTableVisible" title="查看记录" draggable>
			<el-table :data="gridData" border max-height="500">
				<el-table-column type="index" label="序号" width="100" />
				<el-table-column property="T_data" label="日期" />
				<el-table-column property="T_State_name" label="状态" />
				<el-table-column property="T_out_project" label="出库项目" />
				<el-table-column property="T_remark" label="备注" />
			</el-table>
		</el-dialog>

		<el-dialog v-model="editStateVisible" :title=editStateTitle draggable :destroy-on-close=true>
			<el-form ref="ruleFormRef" :model="editStateform" :rules="editStateRules">
				<el-form-item v-if="editStateTitle==='出库'" label="出库日期：" class="m-b-6" :label-width="formLabelWidth"
							  prop="T_out_date">
					<el-date-picker
						class="my-date-picker"
						style="width: 21.5rem"
						v-model="editStateform.T_out_date"
						type="date"
						placeholder="选择日期"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
					/>
				</el-form-item>
				<el-form-item v-if="editStateTitle==='出库'" label="出库项目：" :label-width="formLabelWidth" prop="T_out_project">
					<el-input v-model="editStateform.T_out_project" type="text" class="w-50" placeholder="请填写出库项目"/>
				</el-form-item>
				<el-form-item v-if="editStateTitle==='出库'" label="领用人：" class="m-b-6" :label-width="formLabelWidth"
							  prop="T_receive_name">
					<el-input v-model="editStateform.T_receive_name" placeholder="请选择领用人" class="w-50"
							  @focus="selectApprover"/>
				</el-form-item>
				<el-form-item label="备注：" :label-width="formLabelWidth" prop="T_remark">
					<el-input v-model="editStateform.T_remark" type="text" class="w-50" placeholder="请填写备注"/>
				</el-form-item>
				<el-form-item :label-width="formLabelWidth">
					<el-button color="#626aef" @click="editState(ruleFormRef)">提交</el-button>
				</el-form-item>
			</el-form>
			<ReceiveUser ref="receiveUserdialog" :dept_leader="0" @onUserInfo="geteditStateReceiveInfo" title="选择领用人"/>
		</el-dialog>

	</div>

</template>

<style scoped lang="scss">
.iotnetworkcard-list {
	.input-suffix {
		width: 100%;
		.inline-flex {
			white-space: nowrap;
		}
		.btn {
			display: flex;
			justify-content: end;
		}
		.w-50 {
			width: 12.5rem
		}
	}
	.w-50 {
		width: 21.5rem
	}
	.w-20 {
		width: 8.6rem
	}
}
.pagination {
	display: flex;
	justify-content: end;
	margin-top: 1rem;
}
</style>