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