226 lines
6.6 KiB
Vue
226 lines
6.6 KiB
Vue
<!-- 用户管理 -->
|
|
<template>
|
|
<div class="app-container model-detail">
|
|
<!-- 用户新增/编辑表单 -->
|
|
<el-card v-loading="loading">
|
|
<template #header><svg-icon icon-class="pause" style="width:20px;height:20px;" />未注册网络设备</template>
|
|
<el-row>
|
|
<el-col :lg="24" :xs="24">
|
|
<el-form
|
|
ref="userFormRef"
|
|
:model="formData"
|
|
:rules="rules"
|
|
label-width="100px"
|
|
>
|
|
<el-table :data="list" style="width: 100%" stripe>
|
|
<el-table-column label="选择" width="60" align="center">
|
|
<template #default="scope">
|
|
<el-radio v-model="radioSelected" :label="scope.row.csmc" @change.native="getCurrentRow(scope.row.csmc)">{{ '' }}</el-radio>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="csmc" label="IP地址" align="left" />
|
|
<el-table-column prop="csms" label="芯片信息" align="left" />
|
|
<el-table-column prop="csmc1" label="设备型号" align="left" />
|
|
<el-table-column prop="csmc2" label="设备类型" align="left" />
|
|
<el-table-column prop="csmc3" label="厂商名称" align="left" />
|
|
<el-table-column prop="csmc4" label="服务程序版本" align="left" />
|
|
<el-table-column prop="csmc5" label="连接状态" align="left" />
|
|
</el-table>
|
|
<!-- <el-divider content-position="left"
|
|
><strong style="color: #409eff">设备信息</strong></el-divider
|
|
>
|
|
<el-form-item label="设备ID号" prop="username">
|
|
<el-input
|
|
v-model="formData.username"
|
|
:readonly="!!formData.id"
|
|
placeholder="请输入设备ID号"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="设备名称" prop="nickname">
|
|
<el-input v-model="formData.nickname" placeholder="请输入设备名称" />
|
|
</el-form-item>
|
|
<el-form-item label="设备标签" prop="nickname22">
|
|
<el-input v-model="formData.nickname22" placeholder="请输入设备标签" />
|
|
</el-form-item>
|
|
<el-form-item label="详细信息" prop="nickname33">
|
|
<el-input
|
|
v-model="formData.nickname33"
|
|
:rows="2"
|
|
type="textarea"
|
|
placeholder="请输入详细信息"
|
|
/>
|
|
</el-form-item> -->
|
|
</el-form>
|
|
</el-col>
|
|
<el-col :lg="12" :xs="24"> </el-col>
|
|
</el-row>
|
|
</el-card>
|
|
<el-card v-loading="loading" style="margin-top: 12px;">
|
|
<el-row>
|
|
<el-col :lg="12" :xs="24">
|
|
<el-form
|
|
ref="userFormRef"
|
|
:model="formData"
|
|
:rules="rules"
|
|
label-width="100px"
|
|
>
|
|
<el-form-item label="设备ID号" prop="username">
|
|
<el-input
|
|
v-model="formData.username"
|
|
:readonly="!!formData.id"
|
|
placeholder="请输入设备ID号"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="设备名称" prop="nickname">
|
|
<el-input v-model="formData.nickname" placeholder="请输入设备名称" />
|
|
</el-form-item>
|
|
<el-form-item label="设备标签" prop="nickname22">
|
|
<el-input v-model="formData.nickname22" placeholder="请输入设备标签" />
|
|
</el-form-item>
|
|
<el-form-item label="详细信息" prop="nickname33">
|
|
<el-input
|
|
v-model="formData.nickname33"
|
|
:rows="2"
|
|
type="textarea"
|
|
placeholder="请输入详细信息"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-col>
|
|
<el-col :lg="12" :xs="24"> </el-col>
|
|
</el-row>
|
|
</el-card>
|
|
<el-card class="card-footer">
|
|
<el-button type="primary" @click="handleSubmit"><i-ep-check />确 定</el-button>
|
|
<el-button @click="closeBack"><i-ep-close />取 消</el-button>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineOptions({
|
|
name: "User",
|
|
inheritAttrs: false,
|
|
});
|
|
|
|
import UserAPI from "@/api/user";
|
|
import { UserForm } from "@/api/user/model";
|
|
|
|
const router = useRouter();
|
|
const loading = ref(false); // 加载状态
|
|
|
|
const calTypeList = ref<OptionType[]>(); // 角色下拉数据源
|
|
|
|
// 用户表单数据
|
|
const formData = reactive<UserForm>({
|
|
status: 1,
|
|
});
|
|
|
|
const radioSelected = ref('');
|
|
|
|
// 校验规则
|
|
const rules = reactive({
|
|
username: [{ required: true, message: "不能为空", trigger: "blur" }],
|
|
nickname: [{ required: true, message: "不能为空", trigger: "blur" }],
|
|
deptId: [{ required: true, message: "不能为空", trigger: "blur" }],
|
|
roleIds: [{ required: true, message: "不能为空", trigger: "blur" }],
|
|
email: [
|
|
{
|
|
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
|
|
message: "请输入正确的邮箱地址",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
mobile: [
|
|
{
|
|
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
|
message: "请输入正确的手机号码",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
});
|
|
|
|
const list = [
|
|
{
|
|
csmc: "10.0.8.12",
|
|
csms: "异腾310",
|
|
csmc1: "Atlas 2000 DK A2",
|
|
csmc2: "PCIE-AI-NPU",
|
|
csmc3: "华为",
|
|
csmc4: "1.2",
|
|
csmc5: "已连接",
|
|
},
|
|
{
|
|
csmc: "192.168.1.44",
|
|
csms: "思源220",
|
|
csmc1: "Atlas 2000 DK A2",
|
|
csmc2: "PCIE-AI-NPU",
|
|
csmc3: "华为",
|
|
csmc4: "1.2",
|
|
csmc5: "已连接",
|
|
},
|
|
{
|
|
csmc: "192.168.1.66",
|
|
csms: "RTX4090",
|
|
csmc1: "Atlas 2000 DK A2",
|
|
csmc2: "PCIE-AI-NPU",
|
|
csmc3: "华为",
|
|
csmc4: "1.2",
|
|
csmc5: "已连接",
|
|
},
|
|
];
|
|
|
|
/** 表单提交 */
|
|
const handleSubmit = useThrottleFn(() => {
|
|
loading.value = true;
|
|
setTimeout(() => {
|
|
ElMessage.success("保存成功");
|
|
loading.value = false;
|
|
closeBack();
|
|
}, 1000);
|
|
}, 3000);
|
|
|
|
/** 返回默认页面 */
|
|
function closeBack() {
|
|
router.replace({ path: "/tester/equipment" });
|
|
}
|
|
|
|
// 单选框选中数据
|
|
function getCurrentRow(row) {
|
|
radioSelected = row;//点击当前行时,radio同样有选中效果
|
|
}
|
|
|
|
onMounted(() => {
|
|
//handleQuery();
|
|
});
|
|
</script>
|
|
<style scoped lang='scss'>
|
|
.model-detail{
|
|
:deep(.el-card__header){
|
|
padding:8px 4px;
|
|
display: flex;
|
|
align-items: center
|
|
}
|
|
}
|
|
.sp-file{
|
|
color:#29d;
|
|
}
|
|
.tb-base-info{
|
|
line-height: 30px;
|
|
}
|
|
:deep(.svg-icon){
|
|
margin-right:8px;
|
|
}
|
|
.card-footer{
|
|
position: fixed;
|
|
width: calc(100% - 215px);
|
|
bottom: 0px;
|
|
:deep(.el-card__body){
|
|
padding:10px;
|
|
.el-pagination{
|
|
justify-content: end;
|
|
}
|
|
}
|
|
}
|
|
</style>
|