houde_web_back/src/pages/index/banners/banner/index.vue

<template>
  <!-- 面包屑 -->
  <el-breadcrumb>
    <el-breadcrumb-item>轮播图管理</el-breadcrumb-item>
    <el-breadcrumb-item to="/banner/list">轮播图列表</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 搜索 -->
  <!-- <el-form inline :model="params">
    <el-form-item label="轮播图位置">
      <el-select v-model="params.banner_location" clearable placeholder="请选择">
        <el-option v-for="item in banner_location" :key="item.dictionary_guid" :label="item.dictionary_name"
          :value="item.dictionary_value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="tableRef.reload()" icon="ElIconSearch">
        搜索
      </el-button>
    </el-form-item>
  </el-form> -->
  <el-space style="margin-bottom: 10px;">
    <!-- 添加轮播图 -->
    <el-col :span="1">
      <el-button type="primary" @click="addBannerDialogVisible = true"> 添加 </el-button>
    </el-col>
    <!-- 下拉操作 -->
    <el-dropdown v-if="selectionData.length">
      <el-button type="primary">
        批量操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="handleDelete(selectionData)">
            批量删除
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </el-space>
  <!-- 数据表格 -->
  <DataTable v-loading="loading" ref="tableRef" style="width: 100%" :onSelectionChange="data => (selectionData = data)" :column="column"
    :params="params" :request="params => getBannerList(params)">
    <!-- 排序 -->
    <template #banner_order="scope">
      <el-input-number :disabled="loading" v-model='scope.row.banner_order' controls-position="right"
        @change="handleEditOrder(scope.row)" :min="1"></el-input-number>
    </template>
    <!-- 图片 -->
    <template #banner_img="scope">
      <el-image v-if="scope.row.banner_img" :src="scope.row.banner_img.split(',')[0]" lazy
        :preview-src-list="scope.row.banner_img.split(',')" :preview-teleported="true" :hide-on-click-modal="true"
        fit="contain" class="el-avatar"></el-image>
      <template v-else>暂无图片</template>
    </template>

    <!-- <template #banner_location='scope'>
      <dict-tag :options='banner_location' :value='scope.row.banner_location' />
    </template> -->

    <template #chaoz="scope">
      <el-space>
        <el-button size="small" @click="handleUpdate(scope.row)">
          编辑
        </el-button>
        <el-dropdown @command="handleCommand">
          <el-button type="primary" size="small">
            更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :command="{ type: 'detail', row: scope.row }">
                详情
              </el-dropdown-item>
              <el-dropdown-item :command="{ type: 'delete', row: scope.row }">
                删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-space>
    </template>
  </DataTable>

  <!-- 添加轮播图 -->
  <AddBannerDialog v-model="addBannerDialogVisible" :done="() => tableRef.reload()"></AddBannerDialog>
  <!-- 编辑轮播图 -->
  <EditBannerDialog v-model="EditBannerDialogVisible" :data="EditBannerDialogRow" :done="() => tableRef.reload()">
  </EditBannerDialog>
  <!-- 轮播图详情 -->
  <DetailBannerDialog v-model="DetailBannerDialogVisible" :data="DetailBannerDialogRow"></DetailBannerDialog>
</template>
<script setup>
import { ArrowDown } from '@element-plus/icons-vue';
import { ref, reactive, watch } from 'vue';
import { useLoginStore } from "~/store";
import { getBannerList, editBanner, deleteBanner, getDictionary } from '~/service/banner';
import AddBannerDialog from './components/AddBannerDialog.vue';
import EditBannerDialog from './components/EditBannerDialog.vue';
import DetailBannerDialog from './components/DetailBannerDialog.vue';

const tableRef = ref();
const selectionData = ref([]);
const store = useLoginStore();

const addBannerDialogVisible = ref(false);
const EditBannerDialogVisible = ref(false);
const EditBannerDialogRow = ref({});
const DetailBannerDialogVisible = ref(false);
const DetailBannerDialogRow = ref({});
const loading = ref(false)

const headers = {
  Accept: "application/json",
  ...store.headers,
};

// 查询参数
const params = reactive({
  banner_location: "",

});
const column = [

  {
    fixed: true,
    type: 'selection'
  },
  {
    prop: "banner_img",
    label: '轮播图图片',
    width: '150'
  },
  // {
  //   prop: "banner_location",
  //   label: '轮播图位置',
  //   width: '150'
  // },
  {
    prop: "banner_order",
    label: '排序',
    width: '200'
  },
  {
    label: '操作',
    prop: 'chaoz',
    width: '250',
    fixed: 'right'
  }
];


const handleCommand = ({ type, row }) => {
  switch (type) {
    case "detail":
      handleDetail(row);
      break;
    case 'delete':
      handleDelete([row]);
      break;
  }
};

// 删除数据
const handleDelete = data => {
  ElMessageBox.confirm(`您确定要删除该轮播图吗？`).then(async () => {
    const res = await deleteBanner({
      banner_guid: data.map(v => v.banner_guid).join()
    });
    if (res) {
      tableRef.value.reload();
    }
  });
};

//排序
async function handleEditOrder(data) {
  loading.value = true
  const { code, msg } = await editBanner(data);
  if (code == 0) {
    loading.value = false
    tableRef.value.reload()
  } else {
    ElMessage.error(msg);
  }
}

// 修改
function handleUpdate(row) {
  EditBannerDialogVisible.value = true
  EditBannerDialogRow.value = row
}

// 详情
function handleDetail(row) {
  DetailBannerDialogVisible.value = true
  DetailBannerDialogRow.value = row
}

// 字典获取
const banner_location = ref([]);
async function get_banner_location() {
  await getDictionary({ dictionary_value: 'banner_location' }).then((res) => {
    banner_location.value = res
  })
}
get_banner_location()
</script>