yak_handcuffs/src/views/synthesizeManage/deviceManage/index.vue

<template>
  <div class="container">
    <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
    <div class="table-container">
      <TableCustom :columns="columns" :tableData="tableData" :total="page.total" :refresh="getData" :currentPage="page.index" :changePage="changePage">
        <template #toolbarBtn>
          <!-- <el-button type="primary" @click="handleAdd">新增</el-button> -->
          <el-button @click="handleEdit">手铐关联</el-button>
          <!-- <el-button>地图位置</el-button> -->
          <!-- <el-button>导出</el-button> -->
        </template>
        <template #money="{ rows }"> ￥{{ rows.money }} </template>
        <template #thumb="{ rows }">
          <el-image class="table-td-thumb" :src="rows.thumb" :z-index="10" :preview-src-list="[rows.thumb]" preview-teleported> </el-image>
        </template>
        <template #state="{ rows }">
          <el-switch />
        </template>
        <template #operator="{ rows }">
          <el-button link type="primary" size="small" @click="router.push('deviceInfo')"> 详细信息 </el-button>
          <el-button link type="primary" size="small" @click="router.push('mapLocation')"> 地图位置 </el-button>
          <el-button link type="primary" size="small" @click="router.push('setting')"> 专项配置 </el-button>
          <el-button link type="primary" size="small" @click="visible1 = true"> 设备控制 </el-button>
          <el-button link type="primary" size="small" @click="handleEdit(rows)"> 修改 </el-button>
          <!-- <el-button link type="danger" size="small" @click="handelDel(rows)"> 删除 </el-button> -->
        </template>
      </TableCustom>
    </div>
    <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close :close-on-click-modal="false" @close="closeDialog">
      <TableEdit :form-data="rowData" :options="TableEditOptions" :edit="isEdit" :update="updateData" @close="closeDialog" />
    </el-dialog>
    <el-dialog title="设备控制" v-model="visible1" width="700px" destroy-on-close :close-on-click-modal="false" @close="closeDialog">
      <!-- <TableEdit :form-data="rowData" :options="controlOptions" :update="updateData" /> -->
      <el-form label-width="auto">
        <el-row :gutter="20" style="margin-top: 20px">
          <el-col :span="8">
            <el-form-item label="关机：">
              <el-button type="primary" @click="handelControl(1)">关机</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="重启：">
              <el-button type="primary" @click="handelControl(2)">重启</el-button>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" style="margin-top: 20px">
          <el-col :span="8">
            <el-form-item label="获取实时定位：">
              <el-button type="primary" @click="handelControl(2)">获取实时定位</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="恢复出厂：">
              <el-button type="primary" @click="handelControl(3)">恢复出厂</el-button>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="模式选择：">
              <el-select placeholder="请选择模式" v-model="controlForm.pattern" style="width: 240px" @change="handelControl(4)">
                <el-option label="审讯模式" :value="1" />
                <el-option label="户外押送" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="定位模式：">
              <el-select placeholder="请选择定位模式" v-model="controlForm.location" style="width: 240px" @change="handelControl(5)">
                <el-option label="室内" :value="1" />
                <el-option label="室外" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { fetchData } from "@/api/index";
import TableCustom from "@/components/table-custom.vue";
import TableSearch from "@/components/table-search.vue";
import TableEdit from "@/components/table-edit.vue";
import { TableItem } from "@/types/table";
import { FormOption, FormOptionList } from "@/types/form-option";
import { useRouter } from "vue-router";
const router = useRouter();
// 新增/编辑弹窗相关
let TableEditOptions = ref<FormOption>({
  labelWidth: "100px",
  span: 24,
  list: [],
});
const addOp = [{ type: "input", label: "唯一编码", prop: "name", required: true }];
const editOp = [
  { type: "select", label: "选择手铐", prop: "name", required: true },
  { type: "input", label: "唯一编码", prop: "name1" },
  { type: "select", label: "辖区绑定", prop: "name2" },
  { type: "input", label: "紧急电话", prop: "name3" },
];

// 查询相关
const query = reactive({
  name: "",
});
const searchOpt = ref<FormOptionList[]>([
  { type: "input", label: "手铐SN：", prop: "name" },
  { type: "input", label: "警察账号：", prop: "name1" },
]);
const handleSearch = () => {
  changePage(1);
};

// 表格相关
let columns = ref([
  { type: "selection" },
  { type: "index", label: "序号", width: 55, align: "center" },
  { prop: "name", label: "手铐SN" },
  { prop: "money", label: "绑定警察名称" },
  { prop: "thumb", label: "绑定警察账户" },
  { prop: "state", label: "当前状态" },
  { prop: "state", label: "当前模式" },
  { prop: "state", label: "电量" },
  { prop: "state", label: "版本号" },
  { prop: "state", label: "登录时间" },
  { prop: "state", label: "最近使用时间" },
  { prop: "state", label: "关联辖区编号" },
  { prop: "operator", label: "操作", width: 400 },
]);
const page = reactive({
  index: 1,
  size: 10,
  total: 200,
});
const controlForm = reactive({
  pattern: "",
  location: "",
});

const tableData = ref<TableItem[]>([]);
const getData = async () => {
  const res = await fetchData();
  tableData.value = res.data.list;
};
getData();

const changePage = (val: number) => {
  page.index = val;
  getData();
};

const visible1 = ref(false);
const visible = ref(false);
const isEdit = ref(false);
const rowData = ref({});

const handleAdd = () => {
  TableEditOptions.value.list = addOp;
  visible.value = true;
};

// 编辑
const handleEdit = (row?: TableItem) => {
  // rowData.value = { ...row };
  TableEditOptions.value.list = editOp;
  isEdit.value = true;
  visible.value = true;
};
const handelControl = (type: number) => {
  if (type < 4) {
    ElMessageBox.confirm("确定要关机吗？", "提示", {
      type: "warning",
    })
      .then(async () => {
        // ElMessage.success("删除成功");
      })
      .catch(() => {});
  }
  visible1.value = false;
};
// 删除
const handelDel = (row: TableItem) => {
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    type: "warning",
  })
    .then(async () => {
      // ElMessage.success("删除成功");
    })
    .catch(() => {});
};

const updateData = () => {
  closeDialog();
  getData();
};

const closeDialog = () => {
  visible.value = false;
  isEdit.value = false;
};

// 删除相关
const handleDelete = (row: TableItem) => {
  ElMessage.success("删除成功");
};
</script>

<style scoped>
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>