template div style=padding-top 40px;margin-bottom 30px; el-row gutter=12 el-col el-card shadow=always div class=top el-ico

<template>
  <div style="padding-top: 40px;margin-bottom: 30px;">
    <el-row :gutter="12">
      <el-col>
        <el-card shadow="always">
          <div class="top">
            <el-icon>
              <el-icon-search />
            </el-icon>
            &nbsp;
            <span>筛选搜索</span>
            <div class="btn">
              <el-button @click="reset">重置</el-button>
              <el-button type="primary" @click="search">查询搜索</el-button>
            </div>
          </div>
          <div class="input">
            <div>
              商品名称:
              <el-input v-model="inputVal" placeholder="商品名称" style="width: 220px;" />
            </div>
            <div>
              推荐状态:
              <el-select v-model="selectVal" class="m-2" placeholder="全部">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <div>
    <el-row :gutter="12">
      <el-col>
        <el-card shadow="always">
          <div style="display: flex; align-items: center;">
            <el-icon>
              <el-icon-tickets />
            </el-icon>
            &nbsp;
            <span>数据列表</span>
            <el-button @click="selectGoods">选择商品</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <div style="padding-top: 40px;">
    <div class="table">
      <el-table :data="tableData" border style="width: 100%" size="small">
        <el-table-column align="center" prop="id" label="编号" />
        <el-table-column align="center" prop="productName" label="商品名称" />
        <el-table-column align="center" prop="recommendStatus" label="是否推荐">
          <template #default="{ row }">
            <el-switch v-model="row.recommendStatus" :active-value="1" :inactive-value="0" @change="reSwitch(row)" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="sort" label="排序" />
        <el-table-column align="center" prop="" label="状态">
          <template #default="{ row }">
            <span v-if="row.recommendStatus === 1" style="margin-left: 5px;">推荐中</span>
            <span v-else>未推荐</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="setId(row)">设置排序</el-button>
            <el-button link type="primary" size="small" @click="open(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <div class="bottom">
    <el-select v-model="selectBottom" class="m-2" placeholder="批量操作">
      <el-option v-for="item in select" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-button type="primary">确定</el-button>
  </div>
<p>&lt;el-pagination
v-model:current-page=&quot;paginationObj.currentPage&quot;
v-model:page-size=&quot;paginationObj.pageSize&quot;
small
background
:page-sizes=&quot;[10, 20, 30, 40]&quot;
layout=&quot;total, sizes, prev, pager, next, jumper&quot;
:total=&quot;paginationObj.total&quot;
@size-change=&quot;handleSizeChange&quot;
@current-change=&quot;handleCurrentChange&quot;
/&gt;</p>
  <Dialog :dialogGoods="dialogGoods" @cancel="onCancel" @confirm="onSureFn" @close="onClose" :dialogSort="dialogSort" />
</template>
<script setup lang="ts">
import * as http from "../../request/http";
import userTable from "../../hook/components/userTable";
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import Dialog from "@/pages/sms/dialog.vue";

const inputVal = ref("");
const selectVal = ref("");
const selectBottom = ref("");
const homeParams = ref({ pageNum: 1, pageSize: 5 });

const options = [
  { value: "0", label: "未推荐" },
  { value: "1", label: "推荐中" }
];

const select = [
  { value: "1", label: "设为推荐" },
  { value: "2", label: "取消推荐" },
  { value: "3", label: "取消" }
];

const reset = () => {
  inputVal.value = "";
  selectVal.value = "";
  search();
};

const search = () => {
  const params = {
    pageNum: 1,
    pageSize: 5
  };

  if (inputVal.value !== "") {
    params.productName = inputVal.value;
  }
  if (selectVal.value !== "" && selectVal.value !== "全部") {
    params.recommendStatus = selectVal.value;
  }

  http.homeHot.Search(params).then(res => {
    tableData.value = res.data.list;
  });
};

const open = (ids: number[]) => {
  console.log("ids:", ids);
  ElMessageBox.confirm("是否要删除该推荐?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      http.homeHot.delRecommend(ids).then(res => {
        if (res.code === 200) {
          ElMessage.success("删除成功");
          search();
        }
      });
    })
    .catch(() => {
      ElMessage.success("已取消操作！");
    });
};

const reSwitch = (row: any) => {
  ElMessageBox.confirm("是否要修改推荐状态?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      http.homeHot.setStatus(row.id, row.recommendStatus).then(res => {
        if (res.code === 200) {
          ElMessage.success("修改成功！");
          search();
        } else {
          ElMessage.error("修改失败！");
          row.recommendStatus = row.recommendStatus == 1 ? 0 : 1;
        }
      });
    })
    .catch(() => {
      ElMessage.success("已取消操作！");
      row.recommendStatus = row.recommendStatus == 1 ? 0 : 1;
    });
};

const dialogGoods = ref(false);
const dialogSort = ref(false);

const onCancel = () => {
  dialogGoods.value = false;
  dialogSort.value = false;
};

const onSureFn = () => {
  dialogGoods.value = false;
  dialogSort.value = false;
};

const onClose = () => {
  dialogGoods.value = false;
  dialogSort.value = false;
};

const selectGoods = () => {
  dialogGoods.value = true;
};

const setId = (row: any) => {
  console.log(row.id);
  dialogSort.value = true;
};

const { tableData, paginationObj, handleSizeChange, handleCurrentChange } = userTable(
  http.homeHot.pageSearch,
  homeParams.value
);
</script>
<style scoped lang="less">
.top {
  display: flex;
  align-items: center;
  margin-bottom: 30px;

  .btn {
    justify-content: flex-end;
  }
}

.input {
  display: flex;

  div {
    padding-left: 30px;
  }
}

.bottom {
  margin-top: 30px;
  display: flex;
  justify-content: flex-start;
}

.el-pagination {
  display: flex;
  justify-content: flex-end;
}
</style