public-fuse/src/view/camera/index.vue

<template>
  <com-head :options="[{ name: '相机管理', value: '2' }]">
    <el-form label-width="97px" inline>
      <el-form-item label="所属架构：">
        <com-select v-model="state.query.deptId" />
      </el-form-item>
      <el-form-item label="S/N码：">
        <el-input v-model="state.query.snCode" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="绑定管理员：">
        <el-input v-model="state.query.searchKey" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item class="searh-btns" style="grid-area: 1 / 4 / 2 / 4">
        <el-button type="primary" @click="refresh">查询</el-button>
        <el-button type="primary" plain @click="queryReset">重置</el-button>
      </el-form-item>
    </el-form>
  </com-head>

  <div class="body-layer">
    <div class="body-head">
      <h3 style="visibility: hidden">相机列表</h3>
      <div class="table-ctrl-right">
        <el-button type="primary" @click="changeCameraHandler" v-pdpath="'bind'">
          绑定相机
        </el-button>
      </div>
    </div>
    <el-table
      ref="multipleTable"
      :data="state.table.rows"
      size="large"
      style="width: 100%"
    >
      <el-table-column label="序号" width="70" v-slot:default="{ $index }">
        <div style="text-align: center">
          {{ state.pag.size * (state.pag.currentPage - 1) + $index + 1 }}
        </div>
      </el-table-column>
      <el-table-column label="设备类型" v-slot:default="{ row }">
        {{ cameraTypeDesc[row.cameraType] }}
      </el-table-column>
      <el-table-column label="S/N码" prop="snCode"></el-table-column>
      <el-table-column label="所属架构" prop="deptName"></el-table-column>
      <!-- <el-table-column label="云容量使用情况" v-slot:default="{ row }">
        {{ row.usedSpaceStr }}
      </el-table-column> -->
      <el-table-column label="绑定管理员" prop="nickName"></el-table-column>
      <el-table-column label="操作" v-slot:default="{ row }">
        <span class="oper-span" @click="changeCameraHandler(row)" v-pdpath="'edit'">
          编辑
        </span>
        <span class="oper-span delBtn" @click="del(row)" v-pdpath="'unbind'"> 解绑 </span>
      </el-table-column>
    </el-table>

    <com-pagination
      @size-change="changPageSize"
      @current-change="changPageCurrent"
      :current-page="state.pag.currentPage"
      :page-size="state.pag.size"
      :total="state.pag.total"
    />
  </div>
</template>

<script setup lang="ts">
import comSelect from "@/components/company-select/index.vue";
import comPagination from "@/components/pagination/index.vue";
import comHead from "@/components/head/index.vue";
import { usePagging } from "@/hook/pagging";
import { bindCamera, editCamera } from "./quisk";
import { getCameraPagging, delCamera, addCamera, Camera } from "@/store/camera";
import { confirm } from "@/helper/message";
import { ElMessage } from "element-plus";
import { cameraTypeDesc } from "@/constant/camera";

const { state, queryReset, refresh, changPageCurrent, changPageSize, add } = usePagging({
  get: getCameraPagging,
  add: addCamera,
  paramsTemlate: {
    deptId: "",
    snCode: "",
    type: "2",
    searchKey: "",
  },
});

const changeCameraHandler = async (camera: Camera) => {
  (await (camera ? editCamera({ camera }) : bindCamera({}))) && (await refresh());
};

const del = async (camera: Camera) => {
  if (
    await confirm(
      "解绑相机，该相机拍摄的场景也将一并解绑（场景在云端存储，不会删除）确定要解绑吗？"
    )
  ) {
    await delCamera(camera);
    refresh();
    ElMessage.success("解绑成功");
  }
};
</script>