caseEditor/src/view/cameraVersion/index.vue

<template>
  <com-head :options="headOptions" v-model="pageHook.pagging.state.query.type">
    <el-form label-width="94px" inline>
      <slot name="header" />
      <el-form-item label="版本号">
        <el-input
          v-model="pageHook.pagging.state.query.version"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item class="searh-btns" style="grid-area: 1 / 4 / 2 / 4">
        <el-button type="primary" @click="pageHook.pagging.refresh"
          >查询</el-button
        >
        <el-button type="primary" plain @click="pageHook.pagging.queryReset"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
  </com-head>

  <div class="body-layer" style="padding-top: 8px">
    <div class="body-but">
      <el-button type="primary" v-pdpath="'add'" @click="addHandler"
        >新增固件</el-button
      >
    </div>

    <el-table
      :data="pageHook.pagging.state.table.rows"
      tooltip-effect="dark"
      style="width: 100%"
      size="large"
    >
      <el-table-column label="版本号" prop="version"></el-table-column>
      <el-table-column
        label="版本更新说明"
        prop="description"
      ></el-table-column>
      <el-table-column label="最低版本号" prop="minVersion"></el-table-column>
      <el-table-column label="创建人" prop="createName"></el-table-column>
      <el-table-column
        label="创建时间"
        prop="createTime"
        v-slot:default="{ row }"
      >
        {{ dayjs(row.createTime).format("YYYY-MM-DD HH:MM:ss") }}
      </el-table-column>
      <el-table-column label="状态" prop="status" v-slot:default="{ row }">
        <el-switch
          v-model:model-value="row.status"
          active-text="启用"
          inactive-text="禁用"
          inline-prompt
          @update:model-value="handleStatusupdate(row)"
          active-value="A"
          inactive-value="I"
        ></el-switch>
      </el-table-column>

      <el-table-column
        label="操作"
        v-slot:default="{ row }: { row: CameraVersionEntity }"
        :width="240"
      >
        <span class="oper-span" @click="editHandler(row)" v-pdpath="['view']"
          >编辑</span
        >
        <span
          class="oper-span"
          @click="delHandler(row)"
          style="color: var(--primaryColor)"
          v-pdpath="['del']"
        >
          删除
        </span>
      </el-table-column>
    </el-table>
    <com-pagination
      @size-change="pageHook.pagging.changPageSize"
      @current-change="pageHook.pagging.changPageCurrent"
      :current-page="pageHook.pagging.state.pag.currentPage"
      :page-size="pageHook.pagging.state.pag.size"
      :total="pageHook.pagging.state.pag.total"
    />
  </div>
</template>
<script lang="ts" setup>
import { computed, ref } from "vue";
import comHead from "@/components/head/index.vue";
import comPagination from "@/components/pagination/index.vue";
import { useScenePaggingParams } from "./paging";
import { CameraType } from "@/store/camera";
import { addCameraVersion, editCameraVersion } from "./quisk";
import {
  CameraVersionEntity,
  delCameraVersion,
  editCameraVersion as EditCameraVersion,
} from "@/store/cameraVersion";
import { dayjs, ElMessage, ElMessageBox } from "element-plus";

const headOptions = [
  { value: CameraType.SWKJ, name: "双目转台" },
  { value: CameraType.SWSS1, name: "激光转台" },
  { value: CameraType.SWSS2, name: "激光移动" },
];

const pageHook = useScenePaggingParams();

const addHandler = async () => {
  (await addCameraVersion({ type: pageHook.pagging.state.query.type })) &&
    pageHook.pagging.refresh();
};
const editHandler = async (row: CameraVersionEntity) => {
  await editCameraVersion({
    type: pageHook.pagging.state.query.type,
    entity: row,
  });
  pageHook.pagging.refresh();
};

const delHandler = async (row: CameraVersionEntity) => {
  const confirm = await ElMessageBox.confirm("是否确定删除?", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  });

  if (confirm) {
    row.id && delCameraVersion(row.id);
    pageHook.pagging.refresh();
  }
};

const handleStatusupdate = async (row: CameraVersionEntity) => {
  console.log("row", row);
  await EditCameraVersion({
    ...row,
    type: pageHook.pagging.state.query.type,
  });
  pageHook.pagging.refresh();
};
</script>