feat: 修改继电器页面日期选择器样式，与 uspscale 页面保持一致
This commit is contained in:
parent
4018936bf7
commit
860fd02bbb
285
src/views/admin/relay/components/relay-form.vue
Normal file
285
src/views/admin/relay/components/relay-form.vue
Normal file
@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="title"
|
||||
width="900px"
|
||||
draggable
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
size="default"
|
||||
v-loading="loading"
|
||||
>
|
||||
<!-- 基本信息 -->
|
||||
<div class="form-section">
|
||||
<div class="section-title">基本信息</div>
|
||||
<el-row :gutter="25">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="设备编号" prop="deviceNo">
|
||||
<el-input v-model="formData.deviceNo" clearable placeholder="请输入设备编号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="资产编号" prop="assetNo">
|
||||
<el-input v-model="formData.assetNo" clearable placeholder="请输入资产编号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 网络配置 -->
|
||||
<div class="form-section">
|
||||
<div class="section-title">网络配置</div>
|
||||
<el-row :gutter="25">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="IP地址" prop="ip">
|
||||
<el-input v-model="formData.ip" clearable placeholder="请输入IP地址" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="端口号" prop="port">
|
||||
<el-input v-model="formData.port" clearable placeholder="请输入端口号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="服务名称" prop="serviceName">
|
||||
<el-input v-model="formData.serviceName" clearable placeholder="请输入服务名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 设备配置 -->
|
||||
<div class="form-section">
|
||||
<div class="section-title">设备配置</div>
|
||||
<el-row :gutter="25">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-form-item label="状态" prop="enabled">
|
||||
<el-switch
|
||||
v-model="formData.enabled"
|
||||
active-text="启用"
|
||||
inactive-text="禁用"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false" size="default">取 消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit" size="default" :loading="loading">确 定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from 'vue'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { UspRelayApi } from '/@/api/admin/UspRelayApi'
|
||||
import type { RelayGetOutput, RelayAddInput, RelayUpdateInput } from '/@/api/admin/data-contracts'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
title: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
(e: 'refresh'): void
|
||||
}>()
|
||||
|
||||
// 表单引用
|
||||
const formRef = ref<FormInstance>()
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive<RelayGetOutput>({
|
||||
deviceNo: '',
|
||||
assetNo: '',
|
||||
ip: '',
|
||||
port: '',
|
||||
serviceName: '',
|
||||
enabled: true
|
||||
})
|
||||
|
||||
// 表单校验规则
|
||||
const rules = {
|
||||
deviceNo: [
|
||||
{ required: true, message: '请输入设备编号', trigger: ['blur', 'change'] },
|
||||
{ min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: ['blur', 'change'] }
|
||||
],
|
||||
assetNo: [
|
||||
{ required: true, message: '请输入资产编号', trigger: ['blur', 'change'] },
|
||||
{ min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: ['blur', 'change'] }
|
||||
],
|
||||
ip: [
|
||||
{ required: true, message: '请输入IP地址', trigger: ['blur', 'change'] },
|
||||
{ pattern: /^(\d{1,3}\.){3}\d{1,3}$/, message: 'IP地址格式不正确', trigger: ['blur', 'change'] }
|
||||
],
|
||||
port: [
|
||||
{ required: true, message: '请输入端口号', trigger: ['blur', 'change'] },
|
||||
{ pattern: /^\d+$/, message: '端口号必须为数字', trigger: ['blur', 'change'] }
|
||||
],
|
||||
serviceName: [
|
||||
{ required: true, message: '请输入服务名称', trigger: ['blur', 'change'] },
|
||||
{ min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: ['blur', 'change'] }
|
||||
]
|
||||
}
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(false)
|
||||
|
||||
// 对话框可见性
|
||||
const dialogVisible = ref(false)
|
||||
|
||||
// 监听 modelValue 变化
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
dialogVisible.value = val
|
||||
}
|
||||
)
|
||||
|
||||
// 监听对话框可见性变化
|
||||
watch(
|
||||
() => dialogVisible.value,
|
||||
(val) => {
|
||||
emit('update:modelValue', val)
|
||||
if (!val) {
|
||||
resetForm()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
formRef.value?.resetFields()
|
||||
Object.assign(formData, {
|
||||
deviceNo: '',
|
||||
assetNo: '',
|
||||
ip: '',
|
||||
port: '',
|
||||
serviceName: '',
|
||||
enabled: true
|
||||
})
|
||||
}
|
||||
|
||||
// 设置表单数据
|
||||
const setFormData = (data: RelayGetOutput) => {
|
||||
Object.assign(formData, data)
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
if (!formRef.value) return
|
||||
await formRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
loading.value = true
|
||||
try {
|
||||
const api = new UspRelayApi()
|
||||
let res
|
||||
if (formData.id) {
|
||||
// 更新
|
||||
const updateData: RelayUpdateInput = {
|
||||
id: formData.id,
|
||||
...formData
|
||||
}
|
||||
res = await api.update(updateData)
|
||||
} else {
|
||||
// 新增
|
||||
const addData: RelayAddInput = {
|
||||
...formData
|
||||
}
|
||||
res = await api.add(addData)
|
||||
}
|
||||
if (res.success) {
|
||||
ElMessage.success(formData.id ? '更新成功' : '新增成功')
|
||||
dialogVisible.value = false
|
||||
emit('refresh')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 关闭对话框
|
||||
const handleClose = () => {
|
||||
resetForm()
|
||||
}
|
||||
|
||||
// 打开对话框
|
||||
const open = async (row: any = {}) => {
|
||||
if (row.id > 0) {
|
||||
const res = await new UspRelayApi().get({ id: row.id })
|
||||
if (res?.success) {
|
||||
Object.assign(formData, res.data)
|
||||
}
|
||||
} else {
|
||||
resetForm()
|
||||
}
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
// 暴露方法
|
||||
defineExpose({
|
||||
open,
|
||||
setFormData
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.form-section {
|
||||
margin-bottom: 24px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 2px solid #f0f0f0;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
background: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 18px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-switch__label) {
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
231
src/views/admin/relay/index.vue
Normal file
231
src/views/admin/relay/index.vue
Normal file
@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<MyLayout>
|
||||
<el-card class="my-query-box" shadow="never">
|
||||
<el-form :model="queryParams" ref="queryFormRef" :inline="true">
|
||||
<el-form-item label="关键字" prop="keyWord">
|
||||
<el-input v-model="queryParams.keyWord" placeholder="请输入关键字" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间">
|
||||
<el-date-picker
|
||||
v-model="queryParams.stDate"
|
||||
type="datetime"
|
||||
placeholder="选择开始时间"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
style="width: 180px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间">
|
||||
<el-date-picker
|
||||
v-model="queryParams.edDate"
|
||||
type="datetime"
|
||||
placeholder="选择结束时间"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
style="width: 180px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询 </el-button>
|
||||
<el-button v-auth="'api:admin:usp-relay:add'" type="primary" icon="ele-Plus" @click="handleAdd"> 新增 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card class="my-fill mt8" shadow="never">
|
||||
<div class="my-tools-box mb8 my-flex my-flex-between">
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
border
|
||||
>
|
||||
<el-table-column prop="deviceNo" label="设备编号" min-width="100" show-overflow-tooltip />
|
||||
<el-table-column prop="assetNo" label="资产编号" min-width="100" show-overflow-tooltip />
|
||||
<el-table-column prop="ip" label="IP地址" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="port" label="端口号" min-width="80" show-overflow-tooltip />
|
||||
<el-table-column prop="serviceName" label="服务名称" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column label="状态" width="80" align="center" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<el-tag type="success" v-if="row.enabled">启用</el-tag>
|
||||
<el-tag type="danger" v-else>禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" fixed="right" header-align="center" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
v-if="auth('api:admin:usp-relay:update')"
|
||||
icon="ele-EditPen"
|
||||
size="small"
|
||||
text
|
||||
type="primary"
|
||||
@click="handleEdit(row)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="auth('api:admin:usp-relay:soft-delete')"
|
||||
icon="ele-Delete"
|
||||
size="small"
|
||||
text
|
||||
type="danger"
|
||||
@click="handleDelete(row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="my-flex my-flex-end" style="margin-top: 10px">
|
||||
<el-pagination
|
||||
v-model:currentPage="pageInput.currentPage"
|
||||
v-model:page-size="pageInput.pageSize"
|
||||
:total="total"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
size="small"
|
||||
background
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<relay-form
|
||||
v-model="showDialog"
|
||||
:title="formTitle"
|
||||
ref="formRef"
|
||||
@refresh="getList"
|
||||
/>
|
||||
</MyLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { UspRelayApi } from '/@/api/admin/UspRelayApi'
|
||||
import type { RelayGetPageOutput, PageInputRelayGetPageInput } from '/@/api/admin/data-contracts'
|
||||
import { auth } from '/@/utils/authFunction'
|
||||
import RelayForm from './components/relay-form.vue'
|
||||
|
||||
// 查询参数
|
||||
const queryParams = reactive({
|
||||
keyWord: '',
|
||||
stDate: '',
|
||||
edDate: '',
|
||||
})
|
||||
|
||||
// 分页参数
|
||||
const pageInput = reactive<PageInputRelayGetPageInput>({
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
filter: {
|
||||
keyWord: '',
|
||||
stDate: '',
|
||||
edDate: '',
|
||||
},
|
||||
})
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref<RelayGetPageOutput[]>([])
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
|
||||
// 表单相关
|
||||
const formRef = ref()
|
||||
const formTitle = ref('')
|
||||
const showDialog = ref(false)
|
||||
|
||||
// 查询表单引用
|
||||
const queryFormRef = ref()
|
||||
|
||||
// 获取列表数据
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await new UspRelayApi().getPage(pageInput)
|
||||
if (res.success) {
|
||||
tableData.value = res.data?.list || []
|
||||
total.value = res.data?.total || 0
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 查询按钮点击
|
||||
const handleQuery = () => {
|
||||
pageInput.currentPage = 1
|
||||
pageInput.filter = {
|
||||
keyWord: queryParams.keyWord,
|
||||
stDate: queryParams.stDate,
|
||||
edDate: queryParams.edDate,
|
||||
}
|
||||
getList()
|
||||
}
|
||||
|
||||
// 重置查询
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields()
|
||||
queryParams.stDate = ''
|
||||
queryParams.edDate = ''
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
// 新增按钮点击
|
||||
const handleAdd = () => {
|
||||
formTitle.value = '新增继电器'
|
||||
formRef.value?.open()
|
||||
}
|
||||
|
||||
// 编辑按钮点击
|
||||
const handleEdit = (row: RelayGetPageOutput) => {
|
||||
formTitle.value = '编辑继电器'
|
||||
formRef.value?.open(row)
|
||||
}
|
||||
|
||||
// 删除按钮点击
|
||||
const handleDelete = (row: RelayGetPageOutput) => {
|
||||
ElMessageBox.confirm('确认要删除该继电器吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(async () => {
|
||||
try {
|
||||
const res = await new UspRelayApi().softDelete({ id: row.id })
|
||||
if (res.success) {
|
||||
ElMessage.success('删除成功')
|
||||
getList()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
// 分页大小变化
|
||||
const handleSizeChange = (val: number) => {
|
||||
pageInput.currentPage = 1
|
||||
pageInput.pageSize = val
|
||||
getList()
|
||||
}
|
||||
|
||||
// 当前页变化
|
||||
const handleCurrentChange = (val: number) => {
|
||||
pageInput.currentPage = val
|
||||
getList()
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
Loading…
x
Reference in New Issue
Block a user