FE_sandTable/src/views/config/level/Index.vue

<template>
  <div class="block">
    <div class="flex justify-between items-center mb-5">
      <search v-model="params.customsPassName"
              @change="getList"></search>
      <div class="filter">
        <div class="select">
          <el-select v-model="params.isEnable"
                     placeholder="启用状态"
                     size="large"
                     clearable>
            <el-option v-for="item in enables"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id" />
          </el-select>
          <img src="@/assets/images/7.png"
               alt=""
               class="icon" />
        </div>
        <el-popconfirm title="您确定删除吗？"
                       @confirm.stop="delAll">
          <template #reference>
            <div class="add-btn mr-2">
              <el-icon :size="24"
                       color="#fff">
                <Delete />
              </el-icon>
              删除关卡
            </div>
          </template>
        </el-popconfirm>

        <div class="add-btn"
             @click="toAdd">
          <img src="@/assets/images/plus.png"
               alt=""
               class="icon" />
          新增关卡
        </div>
      </div>
    </div>
    <div class="h-[calc(100vh-270px)] overflow-auto"
         id="tableWrap">
      <el-table ref="tableRef"
                v-loading="loading"
                :data="list"
                @selection-change="handleSelectionChange">
        <el-table-column label="移动"
                         width="100">
          <template #default="{ row }">
            <el-dropdown @command="command => move(command,row)">
              <el-icon class="rotate-90 cursor-pointer"
                       :size="16"
                       color="#877c7c">
                <MoreFilled />
              </el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="up">上移</el-dropdown-item>
                  <el-dropdown-item command="down">下移</el-dropdown-item>
                  <el-dropdown-item command="top">置顶</el-dropdown-item>
                  <el-dropdown-item command="bottom">置底</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

          </template>
        </el-table-column>
        <el-table-column type="selection"
                         width="55" />
        <el-table-column label="序号"
                         width="80"
                         align="center">
          <template #default="{ row, $index }">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="customsPassName"
                         label="关卡名称">
          <template #default="{ row }">
            <div class="flex items-center">
              <el-input v-if="row.editing"
                        class="w-[250px]"
                        placeholder="请输入关卡名称"
                        v-model="row.customsPassName"></el-input>
              <span v-else>{{ row.customsPassName }}</span>
              <el-icon class="ml-2 cursor-pointer"
                       :size="16"
                       color="#877c7c"
                       @click="edit(row)">
                <Check v-if="row.editing" />
                <Edit v-else />
              </el-icon>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="creator"
                         label="创建人"></el-table-column>
        <el-table-column prop="createTime"
                         label="创建时间"
                         sortable="custom"></el-table-column>
        <el-table-column label="启用关卡"
                         width="140"
                         align="center">
          <template #default="{ row }">
            <el-switch v-if="row.checkpointId"
                       v-model="row.isEnable"
                       :active-value="1"
                       :inactive-value="0"
                       @change="switchEnable(row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         width="140">
          <template #default="{ row }">
            <el-popconfirm v-if="row.checkpointId"
                           title="您确定删除吗？"
                           @confirm.stop="handleDelete([row.checkpointId])">
              <template #reference>
                <el-button type="text"
                           size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="filter flex justify-end mt-3">
      <div class="add-btn"
           @click="save">
        保存
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, reactive, watch, nextTick } from 'vue';
import { ElMessage, ElTable } from 'element-plus';
import { Delete, Edit, Check, MoreFilled } from '@element-plus/icons-vue';
import { listPass, savePass, updatePass } from '@/api/config';
import Search from '@/components/Search.vue';
import { useRouter, useRoute } from 'vue-router';
import Cookies from 'js-cookie';

const router = useRouter();
const route = useRoute();
const projectId = +Cookies.get('sand-projectId');
const levelId = +Cookies.get('sand-level');
const height = window.innerHeight - 270;
const tableRef = ref<InstanceType<typeof ElTable>>();
const params = reactive({
  platformId: 3,
  customsPassName: '',
  isEnable: '',
});
const table = ref<any>();
const enables = ref<Array<any>>([
  {
    id: 0,
    name: '禁用',
  },
  {
    id: 1,
    name: '启用',
  },
]);
const list = ref<Array<any>>([]);
const loading = ref<boolean>(false);
const multipleSelection = ref<Record<string, any>[]>([]);
// 列表
const getList = async () => {
  loading.value = true;
  try {
    const { data } = await listPass(params);
    list.value = data;
  } finally {
    loading.value = false;
  }
};
onMounted(() => {
  getList();
});

watch([params, () => route.query], getList);

// 保存
const save = () => {};
// 移动
const move = async (command: string | number | object, row: Record<string, any>) => {
  const type = command === 'up' ? 1 : command === 'down' ? 2 : command === 'top' ? 3 : 4;
  await updatePass({
    checkpointId: row.checkpointId,
    type,
  });
  getList();
};
// 多选
const handleSelectionChange = (val: Record<string, any>[]) => {
  multipleSelection.value = val;
};
// 新增
const toAdd = () => {
  console.log(22, window.innerHeight);
  list.value.push({
    customsPassName: '',
    editing: true,
  });
  nextTick(() => {
    // tableRef.value.scrollTo({
    //   row: list.value.length,
    // });
    document.querySelector('#tableWrap').scrollTo({
      top: document.querySelector('#tableWrap')?.scrollHeight + 200,
      behavior: 'smooth',
    });
  });
};

// 编辑
const edit = async (row: Record<string, any>) => {
  if (row.editing) {
    const param = {
      checkpointId: row.checkpointId || '',
      customsPassName: row.customsPassName,
    };
    if (row.checkpointId) {
      await updatePass(param);
    } else {
      await savePass(param);
    }
    getList();
  }

  row.editing = !row.editing;
};
// 禁启用
const switchEnable = async (row: Record<string, any>) => {
  if (row.checkpointId) {
    await updatePass([
      {
        checkpointId: row.checkpointId,
        isEnable: row.isEnable,
      },
    ]);
    getList();
  }
};
// 删除
const handleDelete = async (id: number[]) => {
  id.map((e) => (e.isDel = 1));
  await updatePass(id);
  getList();
  ElMessage.success('删除成功！');
};
// 批量删除
const delAll = async () => {
  handleDelete(multipleSelection.value.map((e) => e.checkpointId));
};
</script>