kd-aiot-frontend-yms/src/views/camera/components/presetInfo/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        :selection.sync="selection"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button
            type="danger"
            icon="el-icon-delete"
            class="ele-btn-icon"
            v-if="selection.length"
            @click="handleBatchDelete"
          >
            批量删除
          </el-button>
        </template>

        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-delete"
            :style="{ color: delColor }"
            @click="handleDelete(row.pointId)"
          >
            删除
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>

    <!-- 新增编辑弹窗 -->
    <formModel ref="formRef" :dId="deviceId" @success="reload" />
  </div>
</template>

<script>
import * as DevicePointApi from '@/api/ledgerAssets/device/presetInfo'
import formModel from './formModel.vue'

export default {
  name: 'CameraPresetInfo',
  components: {
    formModel
  },
  props: {
    deviceId: ''
  },
  data() {
    return {
      delColor: '#F56C6C',
      selection: [],
      // 表格列配置
      columns: [
        {
          width: 45,
          type: 'selection',
          columnKey: 'selection',
          align: 'center',
          fixed: 'left'
        },
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          prop: 'pointName',
          label: '预置位名称',
          align: 'left',
          minWidth: 200,
          showOverflowTooltip: true
        },
        {
          prop: 'indexNo',
          label: '排序号',
          align: 'center',
          width: 100
        },
        {
          columnKey: 'action',
          fixed: 'right',
          label: '操作',
          width: 80,
          align: 'center',
          slot: 'action'
        }
      ]
    }
  },
  methods: {
    /* 表格数据源 */
    datasource({ page, limit }) {
      return DevicePointApi.getDevicePointPage({
        pageNo: page,
        pageSize: limit,
        deviceId: this.deviceId
      }).then((res) => {
        return {
          list: res.list.map((item) => ({
            ...item,
            pointJson: JSON.parse(item.pointJson || '{}')
          })),
          total: res.total
        }
      })
    },

    /* 刷新表格 */
    reload() {
      this.$refs.table.reload()
    },

    /** 预置位初始化 */
    preSetSuccess() {
      this.reload()
    },

    /** 打开表单 */
    openForm(type, id) {
      this.$refs.formRef.open(type, id)
    },

    /** 删除按钮操作 */
    handleDelete(id) {
      this.$confirm('是否确认删除该预置位?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await DevicePointApi.deletedDevicePoint(id)
          this.$message.success('删除成功')
          this.reload()
        })
        .catch(() => {})
    },

    /** 批量删除按钮操作 */
    handleBatchDelete() {
      if (this.selection.length === 0) {
        this.$message.warning('请选择要删除的数据项')
        return
      }
      const ids = this.selection.map((item) => item.pointId)
      this.$confirm('是否确认删除选中的预置位?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await DevicePointApi.batchDeleteDevicePoint(ids)
          this.$message.success('删除成功')
          this.reload()
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped></style>