From 860fd02bbb250d0ad2a660e66dbe1c1b4910015f Mon Sep 17 00:00:00 2001
From: Asoka <iiloli@88.com>
Date: Mon, 9 Jun 2025 15:02:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E7=BB=A7=E7=94=B5?=
 =?UTF-8?q?=E5=99=A8=E9=A1=B5=E9=9D=A2=E6=97=A5=E6=9C=9F=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E5=99=A8=E6=A0=B7=E5=BC=8F=EF=BC=8C=E4=B8=8E=20uspscale=20?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BF=9D=E6=8C=81=E4=B8=80=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/relay/components/relay-form.vue     | 285 ++++++++++++++++++
 src/views/admin/relay/index.vue               | 231 ++++++++++++++
 2 files changed, 516 insertions(+)
 create mode 100644 src/views/admin/relay/components/relay-form.vue
 create mode 100644 src/views/admin/relay/index.vue

diff --git a/src/views/admin/relay/components/relay-form.vue b/src/views/admin/relay/components/relay-form.vue
new file mode 100644
index 0000000..3ada1e2
--- /dev/null
+++ b/src/views/admin/relay/components/relay-form.vue
@@ -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>
diff --git a/src/views/admin/relay/index.vue b/src/views/admin/relay/index.vue
new file mode 100644
index 0000000..1a13bcb
--- /dev/null
+++ b/src/views/admin/relay/index.vue
@@ -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>