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="delTitle"
                       @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 v-loading="loading"
                :data="list"
                @selection-change="handleSelectionChange">
        <el-table-column label="移动"
                         width="100">
          <template #default="{ row, $index }">
            <el-popover placement="right"
                        trigger="hover">
              <template #reference>
                <el-icon class="rotate-90 cursor-pointer"
                         :size="16"
                         color="#877c7c">
                  <MoreFilled />
                </el-icon>
              </template>
              <div class="flex items-center mb-2">
                <el-input class="w-[80px]"
                          placeholder="请输入"
                          v-model.number="row.serial"></el-input>
                <el-icon class="ml-2 cursor-pointer"
                         :size="16"
                         color="#877c7c"
                         @click.stop="submitSerial(row, $index, row.serial)">
                  <Check />
                </el-icon>
              </div>
              <p class="my-2 cursor-pointer"
                 @click="submitSerial(row, $index, 1)">置顶</p>
              <p class="cursor-pointer"
                 @click="submitSerial(row, $index, list.length)">置底</p>
            </el-popover>
          </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="mx-2 cursor-pointer"
                       :size="16"
                       color="#877c7c"
                       @click="edit(row)">
                <Check v-if="row.editing" />
                <Edit v-else />
              </el-icon>
              <el-icon v-if="row.editing"
                       class="cursor-pointer"
                       :size="16"
                       color="#877c7c"
                       @click="cancel(row)">
                <Close />
              </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" />
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         width="140">
          <template #default="{ row }">
            <el-popconfirm v-if="row.checkpointId"
                           :title="delTitle"
                           @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"
           v-loading="saveLoading">
        保存
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, reactive, watch, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import { Delete, Edit, Check, MoreFilled, Close } 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 delTitle: string = '删除关卡后，这个关卡的数据将被删除，确定删除吗？';
const params = reactive({
  platformId: 3,
  customsPassName: '',
  isEnable: '',
});
const enables = ref<Array<any>>([
  {
    id: 0,
    name: '禁用',
  },
  {
    id: 1,
    name: '启用',
  },
]);
const list = ref<Array<any>>([]);
const loading = ref<boolean>(false);
const saveLoading = ref<boolean>(false);
const multipleSelection = ref<Record<string, any>[]>([]);
// 列表
const getList = async () => {
  loading.value = true;
  try {
    const { data } = await listPass(params);
    data.forEach((e, i) => {
      e.serial = '';
    });
    list.value = data;
  } finally {
    loading.value = false;
  }
};
onMounted(() => {
  getList();
});

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

// 保存
const save = async () => {
  if (saveLoading.value) return false;
  saveLoading.value = true;
  // 编辑
  const param = list.value
    .filter((e) => e.checkpointId)
    .map((e, i) => {
      e.serialNumber = i + 1;
      return {
        checkpointId: e.checkpointId,
        customsPassName: e.customsPassName,
        isEnable: e.isEnable,
        serialNumber: e.serialNumber,
      };
    });
  await updatePass(param);
  // 新增
  const addList = list.value.filter((e) => !e.checkpointId);
  await savePass(addList);
  getList();
  ElMessage.success('保存成功！');
  saveLoading.value = false;
};
// 输入序号排序
const submitSerial = (row: Record<string, any>, oldIndex: number, newIndex: number) => {
  if (newIndex) {
    const temp = list.value.splice(oldIndex, 1);
    row.serialNumber = newIndex;
    list.value.splice(newIndex - 1, 0, temp[0]);
  }
};
// 多选
const handleSelectionChange = (val: Record<string, any>[]) => {
  multipleSelection.value = val;
};
// 新增
const toAdd = () => {
  list.value.push({
    customsPassName: '',
    editing: true,
  });
  nextTick(() => {
    document.querySelector('#tableWrap').scrollTo({
      top: document.querySelector('#tableWrap')?.scrollHeight + 200,
      behavior: 'smooth',
    });
  });
};

// 编辑
const edit = async (row: Record<string, any>) => {
  if (!row.editing) {
    row.oldName = row.customsPassName;
  }
  row.editing = !row.editing;
};
// 取消
const cancel = async (row: Record<string, any>) => {
  row.customsPassName = row.oldName;
  row.editing = !row.editing;
};
// 删除
const handleDelete = async (id: number[]) => {
  const param = id.map((e) => {
    return {
      checkpointId: e,
      isDel: 1,
    };
  });
  await updatePass(param);
  getList();
  ElMessage.success('删除成功！');
};
// 批量删除
const delAll = async () => {
  handleDelete(multipleSelection.value.map((e) => e.checkpointId));
};
</script>