cyzh-park/src/components/map/comps/video-device-form.vue

<template>
  <div>
    <el-dialog :modal-append-to-body="true" :append-to-body="true" :title="title" :before-close="beforeClose"
      :center="true" :visible.sync="dialogShow" width="45%" :close-on-click-modal="false" top="4%">
      <avue-form ref="avueForm" :option="option" v-model="model" @submit="submit"></avue-form>
    </el-dialog>
  </div>
</template>
<script>
  import {
    update
  } from "@/api/device/gb/gbdevicechannel.js"
  import {
    deepClone
  } from '@/util/util.js'
  export default {
    data() {
      return {
        isAdd: false,

        dialogShow: false,
        model: {},
        option: {
          detail: true,
          labelWidth: 110,
          group: [{
            label: '基本信息',
            prop: 'group1',
            column: [{
                label: "设备编号",
                prop: "deviceId",
                overHidden: true,
                disabled: true,
                rules: [{
                  required: false,
                  message: "请输入设备编号",
                  trigger: "blur"
                }]
              }, {
                label: "设备名称",
                prop: "name",
                labelWidth: 100,
                width: 150,
                rules: [{
                  required: true,
                  message: "请输入设备名称",
                  trigger: "blur"
                }],
              },
              {
                label: "厂商名称",
                prop: "manufacture",
              },
              {
                label: "型号",
                prop: "model",
                hide: true,
                disabled: true,
              },
              {
                label: "ip地址",
                prop: "ipAddress",
                hide: true,
                disabled: true,
              },
              {
                label: "端口号",
                prop: "port",
                hide: true,
                disabled: true,
              },
              {
                label: "云台类型",
                prop: "ptzType",
                slot: true,
                search: true,
                type: "select",
                width: 100,
                align: "center",
                disabled: true,
                dicData: [{
                    label: "未知",
                    value: 0
                  },
                  {
                    label: "球机",
                    value: 1
                  },
                  {
                    label: "半球",
                    value: 2
                  },
                  {
                    label: "固定枪机",
                    value: 3
                  },
                  {
                    label: "遥控枪机",
                    value: 4
                  }
                ]
              },
              {
                label: "是否有音频",
                prop: "hasAudio",
                slot: true,
                search: true,
                type: "select",
                width: 100,
                align: "center",
                dicData: [{
                    label: "有",
                    value: true
                  },
                  {
                    label: "无",
                    value: false
                  }
                ]
              },
            ]
          }, {
            label: '所属信息',
            prop: 'group2',
            column: [{
                label: "所属园区",
                prop: "agencyId",
                type: "select",
                search: true,
                remote: true,
                searchSpan: 4,
                searchFilterable: true,
                hide: true,
                dataType: "string",
                cascaderItem: ['residentialId'],
                dicUrl: "/api/cyzh-community/agency/list?size=500&id={{key}}",
                dicFormatter: (res) => {
                  return res.data.records; //返回字典的层级结构
                },
                props: {
                  label: "name",
                  value: "id"
                },
                rules: [{
                  required: false,
                  message: "请选择所属区域",
                  trigger: "change"
                }],
              },
              {
                label: "所属区域",
                prop: "residentialId",
                type: "select",
                search: true,
                searchSpan: 4,
                searchFilterable: true,
                hide: true,
                cascaderItem: ['buildingId'],
                dicUrl: "/api/cyzh-community/residential/list?size=500&agencyId={{key}}",
                dicFormatter: (res) => {
                  return res.data.records; //返回字典的层级结构
                },
                dateType: "string",
                props: {
                  label: "name",
                  value: "id"
                },
                rules: [{
                  required: true,
                  message: "请选择所属区域",
                  trigger: "change"
                }],
              },
              {
                label: "所属楼栋",
                prop: "buildingId",
                type: "select",
                search: true,
                searchSpan: 4,
                searchFilterable: true,
                hide: true,
                cascaderItem: ['unitId'],
                dicUrl: "/api/cyzh-community/building/list?size=500&residentialId={{key}}",
                dicFormatter: (res) => {
                  return res.data.records; //返回字典的层级结构
                },
                props: {
                  label: "name",
                  value: "id"
                },
                rules: [{
                  required: false,
                  message: "请选择所属楼栋",
                  trigger: "change"
                }],
              },
              {
                label: "所属楼层",
                prop: "floorId",
                type: "select",
                search: true,
                searchFilterable: true,
                hide: true,
                searchSpan: 4,
                dateType: "string",
                dicUrl: "/api/cyzh-community/floor/list?size=500",
                dicFormatter: (res) => {
                  return res.data.records; //返回字典的层级结构
                },
                props: {
                  label: "name",
                  value: "id"
                },
                rules: [{
                  required: false,
                  message: "请选择所属楼层",
                  trigger: "change"
                }],
              },
            ]
          }, {
            label: '位置信息',
            prop: 'group3',
            column: [{
                label: "经度",
                prop: "longitude",
                width: 100,
                overHidden: true,
                disabled: true,
                hide: true,
                rules: [{
                  required: false,
                  message: "请输入经度",
                  trigger: "blur"
                }]
              },
              {
                label: "纬度",
                prop: "latitude",
                width: 100,
                overHidden: true,
                disabled: true,
                hide: true,
                rules: [{
                  required: false,
                  message: "请输入纬度",
                  trigger: "blur"
                }]
              },
              {
                label: "安装地址",
                prop: "address",
                hide: true,
                overHidden: true,
                rules: [{
                  required: false,
                  message: "请输入具体地址",
                  trigger: "blur"
                }]
              },
            ]
          }],

        }
      }
    },
    computed: {
      title() {
        if (this.isAdd) {
          return '添加监控设备'
        }
        if (this.option.detail) {
          return '监控设备详情'
        } else {
          return '编辑监控设备'
        }
      }
    },
    methods: {
      showDialog(model, detail = true) {
        this.isAdd = false
        this.model = model
        this.option.detail = detail
        this.dialogShow = true
      },
      showAddForm(model) {
        this.isAdd = true
        this.dialogShow = true
        this.option.detail = false
        this.model = model
      },
      beforeClose(done) {
        console.log("close");
        this.$refs.avueForm.resetForm()
        done()
        this.$emit('closed')
      },
      async submit(form, done) {
        let data = deepClone(form)
        let res = await update(data)
        done()
        if (res.data.success) {
          this.dialogShow = false;
          this.$refs.avueForm.resetForm()
          this.$message.success('操作成功')
          this.$emit('reloadData', res.data.data)
        } else {
          this.$message.success('操作失败')
        }

      },
    }
  }
</script>
x