prodio/admin/src/pages/Index/banner/Index.vue

<script setup>
import { ref, reactive, onMounted, toRefs } from "vue";
import { Plus, Edit, Delete, ArrowDown } from "@element-plus/icons-vue";

import AscForm from "./components/Form.vue";

import { getBannerList, deleteBanner, updateBanner } from "@/api/home.js";

const state = reactive({
  page: 1,
  pageSize: 10,
});

const { page, pageSize } = toRefs(state);
const total = ref(0);
const loading = ref(false);

const showFormDraw = ref(false);

const tableData = ref([]);

onMounted(() => {
  getTableData();
});

const getTableData = async () => {
  loading.value = true;
  let res = await getBannerList(state);
  if (res.code === 200) {
    tableData.value = res.data;
  }
  loading.value = false;
};

const handleAdd = () => {
  editid.value = 0;
  showFormDraw.value = true;
};

const handleEdit = (id) => {
  editid.value = id;
  showFormDraw.value = true;
};

const handleDelete = (id) => {
  ElMessageBox.confirm('確認刪除此紀錄?')
    .then(async () => {
      let res = await deleteBanner(id);
      if (res.code === 200) {
        ElMessage({
          message: '刪除成功.',
          type: 'success',
        });
        getTableData();

      }else{
        ElMessage({
          message: '刪除失敗.',
          type: 'error',
        });
      }
    })
    .catch(() => {
    })
};

// Pagination
const handleSizeChange = (val) => {
  state.pageSize = val;
  getTableData();
};

const handleCurrentChange = (val) => {
  state.page = val;
  getTableData();
};

const handlePrevClick = (val) => {
  state.page = val;
  getTableData();
};

const handleNextClick = (val) => {
  state.page = val;
  getTableData();
};

// 編輯排序
const editOrderId = ref(0);

const handleEditItem = (id) => {
  editOrderId.value = id;
}

const handleUpdateItem = async (row) => {

  let res = await updateBanner(row);
  if (res.code === 200) {
    ElMessage({
      message: '修改成功.',
      type: 'success',
    });
    getTableData();
  } else {
    ElMessage({
      message: '修改失敗.',
      type: 'error',
    });
  }
  editOrderId.value = 0;
}

const handleCloseEditItem = () => {
  editOrderId.value = 0;
}
// Drawer

const editid = ref(0);

const handleCloseFormDraw = (val) => {

  showFormDraw.value = false;
  if(val){
    getTableData();
  }
};
</script>

<template>
  <div class="main">
    <!-- Breadcrumb: Start -->
    <div class="breadcrumb-section">
      <div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item> 首頁 </el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">首頁輪播列表</a></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <el-button
          type="primary"
          :icon="Plus"
          @click="handleAdd"
        >
          新增輪播
        </el-button>
      </div>
    </div>
    <!-- Breadcrumb: End -->    
    
    <el-card :body-style="{ padding: '0px' }">
      <el-table :data="tableData" style="width: 100%">  
        <el-table-column prop="id" label="#" width="50" />
        <el-table-column label="電腦版背景">
          <template #default="scope">
            <el-image style="width: 100px; height: 50px" :src="scope.row.imageurl1" fit="cover" :crossorigin="null" />
          </template>
        </el-table-column>
        <el-table-column label="手機版背景">
          <template #default="scope">
            <el-image style="width: 50px; height: 100px" :src="scope.row.imageurl2" fit="cover" :crossorigin="null" />
          </template>
        </el-table-column>
        <el-table-column prop="slogon" label="標題" />
        <el-table-column prop="describe" label="描述" />
        <el-table-column prop="sort_order" label="排序" width="80">
          <template #default="scope">
            <div @dblclick="handleEditItem(scope.row.id)" v-if="scope.row.id !== editOrderId">
              {{ scope.row.sort_order }}
            </div>
            <el-input v-model="scope.row.sort_order" :style="{ width: '50px' }" 
            @keyup.enter="handleUpdateItem(scope.row)" 
            @blur="handleCloseEditItem()"
            :autoFocus="true"
            v-focus="scope.row.id === editOrderId"
            v-else />
          </template>
        </el-table-column>
        <el-table-column label="其他項目" width="105" fixed="right">
          <template #default="scope">            
            <el-dropdown>
              <el-button type="danger">
                操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :icon="Edit" @click="handleEdit(scope.row.id)">修改</el-dropdown-item>
                  <el-dropdown-item :icon="Delete" @click="handleDelete(scope.row.id)">刪除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>

  <div>
    <el-drawer 
      ref="drawerRef" 
      v-model="showFormDraw" 
      :destroy-on-close="true" 
      title="首頁輪撥" 
      direction="rtl" 
      size="50%">
      <asc-form :editid="editid" @close="handleCloseFormDraw"/>
    </el-drawer>
  </div>
</template>

<style lang="less" scoped>


</style>