yak_handcuffs/src/views/synthesizeManage/userManage/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="typeVisible = true">类型编辑</el-button>
          <el-button type="primary" @click="visible = true">新增用户</el-button>
          <el-button @click="handleImp">批量创建用户</el-button>
          <el-button>导出</el-button>
          <el-button type="danger">删除</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-tag :type="rows.state ? 'success' : 'danger'">
            {{ rows.state ? "正常" : "异常" }}
          </el-tag>
        </template>
        <template #operator="{ rows }">
          <el-button link type="primary" size="small" @click="pwdVisible = 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="options" :edit="isEdit" :update="updateData" @close="closeDialog" />
    </el-dialog>
    <el-dialog title="重置密码" v-model="pwdVisible" width="700px" destroy-on-close :close-on-click-modal="false" @close="closeDialog">
      <TableEdit :form-data="rowData" :options="pwdOptions" :edit="true" :update="updateData" @close="handelCancel" />
    </el-dialog>
    <el-dialog title="编辑类型" v-model="typeVisible" width="800px" destroy-on-close :close-on-click-modal="false" @close="closeDialog">
      <UserType />
    </el-dialog>
    <BatchImp ref="batchImpRef" />
  </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 BatchImp from "@/components/batch-imp.vue";
import UserType from "./userType.vue";
import { TableItem } from "@/types/table";
import { FormOption, FormOptionList } from "@/types/form-option";

const visible = ref(false);
const typeVisible = ref(false);
const pwdVisible = ref(false);
const isEdit = ref(false);
const rowData = ref({});
// 查询相关
const query = reactive({
  name: "",
});
const batchImpRef = ref();
const page = reactive({
  index: 1,
  size: 10,
  total: 200,
});
const tableData = ref<TableItem[]>([]);

const searchOpt = ref<FormOptionList[]>([
  { type: "input", label: "用户名：", prop: "name" },
  {
    type: "select",
    label: "用户类型：",
    prop: "name1",
    opts: [
      { label: "管理员", value: "1" },
      { label: "警察", value: "2" },
      { label: "辅警", value: "3" },
      { label: "协警", value: "4" },
    ],
  },
  { type: "daterange", label: "创建时间：", prop: "name2" },
  {
    type: "select",
    label: "状态：",
    prop: "name3",
    opts: [
      { label: "启用", value: "1" },
      { label: "禁用", value: "0" },
    ],
  },
]);

// 表格相关
let columns = ref([
  { type: "selection" },
  { type: "index", label: "序号", width: 55, align: "center" },
  { prop: "name", label: "用户名称" },
  { prop: "money", label: "警员号" },
  { prop: "thumb", label: "手机号" },
  { prop: "state", label: "密码" },
  { prop: "state", label: "类型" },
  { prop: "state", label: "创建时间" },
  { prop: "state", label: "状态" },
  { prop: "operator", label: "操作", width: 250 },
]);

// 新增/编辑弹窗相关
let options = ref<FormOption>({
  labelWidth: "100px",
  span: 24,
  list: [
    { placeholder: "请输入用户名称", type: "input", label: "用户名称", prop: "name1", required: true },
    { placeholder: "请输入电话号码", type: "input", label: "电话号码", prop: "money2", required: true },
    { placeholder: "请输入警员号", type: "input", label: "警员号", prop: "money3", required: true },
    {
      placeholder: "请选择类型",
      type: "select",
      label: "类型",
      opts: [
        { label: "管理员", value: "1", disabled: true },
        { label: "警察", value: "2" },
        { label: "辅警", value: "3" },
        { label: "协警", value: "4" },
      ],
      prop: "money4",
      required: true,
    },
    { placeholder: "请输入密码", type: "password", label: "密码", prop: "mone5y", required: true },
    { type: "switch", label: "状态", prop: "mone5y", required: true },
    { placeholder: "请输入确认密码", type: "password", label: "确认密码", prop: "mon6ey" },
    { placeholder: "请输入备注", type: "textarea", label: "备注", prop: "mon8ey" },
  ],
});
// 新增/编辑弹窗相关
let pwdOptions = ref<FormOption>({
  labelWidth: "100px",
  span: 24,
  list: [
    { type: "password", label: "原始密码", prop: "name1", required: true },
    { type: "password", label: "新密码", prop: "money2", required: true },
    { type: "password", label: "确认密码", prop: "money3", required: true },
  ],
});

const handleImp = () => {
  batchImpRef.value.dialogVisible = true;
};
const handleSearch = () => {
  changePage(1);
};

const getData = async () => {
  const res = await fetchData();
  tableData.value = res.data.list;
};
getData();

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

// 删除相关
const handelDel = (row: TableItem) => {
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    type: "warning",
  })
    .then(async () => {
      // ElMessage.success("删除成功");
    })
    .catch(() => {});
};
// 修改相关
const handleEdit = (row: TableItem) => {
  rowData.value = { ...row };
  isEdit.value = true;
  visible.value = true;
};

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

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

const handelCancel = () => {
  rowData.value = {};
  pwdVisible.value = false;
};
</script>

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