electron-4/src/renderer/src/views/components/propertyBox/addDevice.vue

<template>
  <Dialog
    ref="baseDialog"
    class="addDevice"
    :title="addTitle"
    left="calc(50% - 160px)"
    top="calc(50% - 120px)"
  >
    <template #content>
      <el-form label-width="100px" :model="addForm" :rules="peopleRules" ref="peopleFormRef">
        <el-form-item label="名称" prop="cameraName">
          <el-input v-model="addForm.cameraName" clearable />
        </el-form-item>
        <el-form-item label="设备IP" prop="ip">
          <el-input v-model="addForm.ip" clearable></el-input>
        </el-form-item>
        <el-form-item label="设备端口" prop="port">
          <el-input v-model="addForm.port" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="addForm.userName" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password" clearable></el-input>
        </el-form-item>
        <el-form-item label="设备类型" prop="type">
          <el-select v-model="addForm.type" filterable placeholder="请选择">
            <el-option label="海康" value="1"> </el-option>
            <el-option label="大华" value="2"> </el-option>
            <!-- <el-option label="手动录入" value="3"> </el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item v-if="addForm.type === '3'" label="视频流地址" prop="flvUrl">
          <el-input v-model="addForm.flvUrl" clearable></el-input>
        </el-form-item>
        <el-form-item label="通道号" prop="channel">
          <el-input v-model="addForm.channel" clearable></el-input>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submitProtal"> 确定 </el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { inject } from 'vue'
import { TreeApi } from '@/api/tree'
import Dialog from '@/components/dialog/baseDialog.vue'
import { initMapData } from '../../../common/initMapData'
import { useTreeNode } from '../tree/hooks/treeNode'
import { deviceApi } from '@/api/deviceManage/index'
import { ElMessage, ElMessageBox } from 'element-plus'

const { cusAddNodes } = useTreeNode()

const baseDialog: any = ref(null)
const eventBus: any = inject('bus')

var addTitle = ref('')
var peopleFormRef: any = ref('')

var addForm: any = reactive({
  cameraName: '',
  ip: '',
  port: '',
  userName: '',
  password: '',
  type: '',
  channel: '',
  flvUrl: ''
})

const peopleRules: any = reactive({
  cameraName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  ip: [{ required: true, message: '请输入ip', trigger: 'blur' }],
  port: [{ required: true, message: '请输入设备端口号', trigger: 'blur' }],
  userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  type: [{ required: true, message: '请选择设备类型', trigger: 'blur' }]
})

var cancel = () => {
  // pDialogVisible.value = false
  baseDialog.value?.close()

  addForm = {
    cameraName: '',
    ip: '',
    port: '',
    userName: '',
    password: '',
    type: '',
    channel: '',
    flvUrl: ''
  }
}
var submitProtal = () => {
  peopleFormRef.value.validate(async (valid) => {
    if (valid) {
      if (addForm.channel === undefined || addForm.channel === '' || addForm.channel === null) {
        addForm.channel = 1
      }
      if (addTitle.value == '添加设备') {
        const res = await deviceApi.addDevice(addForm)

        if (res.code === 200) {
          ElMessage.success('操作成功')
          eventBus.emit('addOptionResuit')
        }
      } else {
        delete addForm.updatedAt
        delete addForm.areaId
        delete addForm.createdAt
        const res = await deviceApi.updateDevice(addForm)
        if (res.code === 200) {
          ElMessage.success('操作成功')
          eventBus.emit('addOptionResuit')
        }
      }
      baseDialog.value?.close()
    } else {
      console.log('error submit!!')
      return false
    }
  })
}
eventBus.on('openAddDevice', (params) => {
  addTitle.value = params.title
  if (addTitle.value != '添加设备') {
    addForm = params.data
  } else {
    addForm = {
      cameraName: '',
      ip: '',
      port: '',
      userName: '',
      password: '',
      type: '',
      channel: '',
      flvUrl: ''
    }
  }
  baseDialog.value?.open()
})
const open = () => {
  baseDialog.value?.open()
}
const confirm = () => {
  baseDialog.value?.close()
}
defineExpose({
  open
})
</script>

<style lang="scss">
.YJ-custom-base-dialog.addDevice > .content input,
.YJ-custom-base-dialog.addDevice > .content textarea {
  background-color: transparent !important;
  border: unset !important;
}
</style>
<style scoped lang="scss">
::v-deep .el-form-item--label-right .el-form-item__label {
  color: #fff !important;
}
::v-deep .el-form-item .el-input__wrapper {
  background-color: rgba(0, 0, 0, 0.5) !important;
  box-shadow: 0 0 0 0.5px #00ffff inset !important; /* 新增此行 */
}
::v-deep .el-form-item .el-select__wrapper {
  background-color: rgba(0, 0, 0, 0.5) !important;
  box-shadow: 0 0 0 0.5px #00ffff inset !important; /* 新增此行 */
  :deep(input) {
    background-color: transparent !important;
    border: unset !important;
  }
}
::v-deep .el-form-item .el-input__inner {
  color: #fff !important;
}
::v-deep .el-form-item .el-select__placeholder {
  color: #fff !important;
}
::v-deep .el-input__wrapper {
  padding: 0px !important;
}
::v-deep .el-button:hover {
  background-color: rgba(0, 255, 255, 0.2) !important;
  color: rgba(0, 255, 255, 1) !important;
}
</style>