smsb-web-develop/src/views/external/components/CameraConfigDialog.vue

<template>
  <confirm-dialog
    ref="dialog"
    :title="dialogTitle"
    @confirm="onConfirm"
  >
    <div class="c-grid-form u-align-self--center">
      <span class="c-grid-form__label u-required">
        厂商
      </span>
      <el-select
        v-model="item.manufacturerKey"
        class="u-width"
        placeholder="请选择厂商"
      >
        <el-option
          v-for="(option, index) in manufacturerOptions"
          :key="index"
          :value="option.manufacturerKey"
          :label="option.manufacturerName"
        />
      </el-select>
      <span class="c-grid-form__label u-required">
        型号
      </span>
      <el-input
        v-model.trim="item.model"
        placeholder="最多50个字符"
        maxlength="50"
        clearable
      />
      <span class="c-grid-form__label u-required">
        标识
      </span>
      <el-input
        v-model.trim="item.identifier"
        placeholder="仅支持数字和字母，最多30个字符"
        maxlength="30"
        clearable
      />
      <template v-if="!item.id">
        <span class="c-grid-form__label u-required">
          账号
        </span>
        <el-input v-model.trim="item.username" />
        <span class="c-grid-form__label u-required">
          密码
        </span>
        <el-input
          v-model.trim="item.password"
          class="u-password"
        />
      </template>
      <span class="c-grid-form__label u-required">
        通过视频服务器
      </span>
      <el-select
        v-model="item.throughEvs"
        placeholder="请选择"
      >
        <el-option
          label="是"
          value="1"
        />
        <el-option
          label="否"
          value="0"
        />
      </el-select>
      <template v-if="item.throughEvs == '1'">
        <span class="c-grid-form__label u-required">
          服务器通道号
        </span>
        <el-input-number
          v-model="item.evsChannel"
          controls-position="right"
        />
        <span class="c-grid-form__label u-required">
          服务器编号
        </span>
        <el-input-number
          v-model="item.evsLocation"
          controls-position="right"
        />
      </template>
      <span class="c-grid-form__label">
        备注
      </span>
      <div
        class="has-info"
        data-info="备注将用于多摄像头展示时的区分"
      >
        <el-input
          v-model.trim="item.remark"
          placeholder="最多30个字符"
          maxlength="30"
          clearable
        />
      </div>
    </div>
  </confirm-dialog>
</template>

<script>
import {
  ThirdPartyDeviceInfo,
  CameraToThirdPartyMap
} from '@/constant'
import {
  getManufacturersByType,
  addCamera,
  updateCamera
} from '@/api/external'

export default {
  name: 'CameraConfigDialog',
  data () {
    return {
      item: {},
      manufacturerOptions: []
    }
  },
  computed: {
    dialogTitle () {
      return this.item?.id ? '编辑摄像头' : ''
    }
  },
  methods: {
    async show (type, options) {
      const result = await getManufacturersByType(CameraToThirdPartyMap[type])
      this.manufacturerOptions = result.data
      if (options) {
        this.item = {
          id: options.id,
          cameraType: type,
          identifier: options.identifier,
          manufacturerKey: options.manufacturerKey,
          model: options.model,
          remark: ThirdPartyDeviceInfo[CameraToThirdPartyMap[type]],
          username: options.username,
          password: options.password,
          throughEvs: String(options.throughEvs || 0),
          evsChannel: options.evsChannel,
          evsLocation: options.evsLocation
        }
      } else {
        this.item = {
          cameraType: type,
          identifier: '',
          manufacturerKey: '',
          model: '',
          remark: ThirdPartyDeviceInfo[CameraToThirdPartyMap[type]],
          username: '',
          password: '',
          throughEvs: '',
          evsChannel: 0,
          evsLocation: 0
        }
      }

      this.$refs.dialog.show()
    },
    getManufacturersByType () {
      return getManufacturersByType(CameraToThirdPartyMap[this.item.cameraType])
    },
    onConfirm (done) {
      if (!this.item.manufacturerKey) {
        this.$message({
          type: 'warning',
          message: '请选择厂商'
        })
        return
      }
      if (!this.item.model) {
        this.$message({
          type: 'warning',
          message: '请填写型号'
        })
        return
      }
      if (!this.item.identifier) {
        this.$message({
          type: 'warning',
          message: '请填写唯一标识'
        })
        return
      }
      if (!/^[0-9a-zA-Z]+$/.test(this.item.identifier)) {
        this.$message({
          type: 'warning',
          message: '唯一标识格式错误仅支持数字和字母'
        })
        return
      }
      if (!this.item.username && !this.item.id) {
        this.$message({
          type: 'warning',
          message: '请填写账号'
        })
        return
      }
      if (!this.item.password && !this.item.id) {
        this.$message({
          type: 'warning',
          message: '请填写密码'
        })
        return
      }
      if (!this.item.throughEvs) {
        this.$message({
          type: 'warning',
          message: '请选择是否通过视频服务器'
        })
        return
      }
      const key = this.item.manufacturerKey
      const isAdd = this.item.id ? updateCamera : addCamera
      isAdd({
        manufacturerName: this.manufacturerOptions.find(({ manufacturerKey }) => manufacturerKey === key).manufacturerName,
        camProvider: 0,
        ...this.item
      }).then(() => {
        done()
        this.$emit('confirm', this.item)
      })
    }
  }
}
</script>