BX-association/src/views/System/contentSet/homeSet/index.vue

<template>
  <div id="">
    <Search
      ref="search"
      :formList="formList"
      :formData="formData"
      @onSubmit="search"
    ></Search>
    <div style="text-align: right; margin-bottom: 10px">
      <el-button :size="$store.state.defaultSize" @click="delPL" type="primary"
        >批量删除</el-button
      >
      <el-button :size="$store.state.defaultSize" @click="add" type="primary"
        >新增</el-button
      >
    </div>
    <Table
      ref="table"
      :tableData="tableData"
      :tableList="tableList"
      :rowKey="'NewPositionId'"
      :check="true"
      @selectionChange="selectionChange"
      @changeSort="changeSort"
    >
      <template #right="scope"
        ><el-button
          v-if="scope.row.status === 1"
          @click="del(scope.row, 0)"
          type="text"
          size="small"
          >停用</el-button
        >
        <el-button
          v-if="scope.row.status === 0"
          @click="del(scope.row, 1)"
          type="text"
          size="small"
          >启用</el-button
        >
        <el-button @click="del(scope.row, -1)" type="text" size="small"
          >删除</el-button
        >
      </template>
    </Table>
    <Pagination
      :pageindex="formData.pageindex"
      :pagesize="formData.pagesize"
      :total="total"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></Pagination>
    <Operation ref="operation"></Operation>
  </div>
</template>

<script>
import Search from "@/components/search/index.vue";
import Table from "@/components/table/index.vue";
import Pagination from "@/components/pagination/index.vue";
import Operation from "./operation.vue";
export default {
  components: { Search, Operation, Table, Pagination },
  data() {
    return {
      formList: [ {
          label: "仅会员可见：",
          prop: "IsMemberRead",
          scope: "IsMemberRead",
          options: [
            {
              label: "是",
              value: true,
            },
            {
              label: "否",
              value: false,
            },
          ],
        },
        {
          label: "分类：",
          prop: "Seat",
          scope: "TypeList",
        },
      ],
      formData: { pageindex: 1, pagesize: 10 },
      tableData: [],
      tableList: [
        {
          label: "标题",
          prop: "Title",
        },
        {
          label: "类型",
          prop: "SeatName",
        },
        {
          label: "排序",
          prop: "SortNumber",
          scope: "input",
          width: "90",
        },
        {
          label: "状态",
          prop: "Status",
          scope: "options",
          options: [
            { label: "停用", value: 0 },
            { label: "正常", value: 1 },
          ],
        },
      ],
      total: 0,
      routerTableData: [],
      checkbox: [], //当前选中
    };
  },
  created() {
    this.$api.XfSysBussinessGetMenuList().then((res) => {
      this.routerTableData = res.Data || [];
    });
    this.search();
  },
  methods: {
    changeSort(e, item) {
      this.$api
        .XfSysBussinessUpdateSortNumber({
          List: [
            { NewPositionId: item.NewPositionId, SortNumber: parseInt(e) },
          ],
        })
        .then((res) => {
          this.search();
          this.$message.success("排序成功");
        });
    },
    selectionChange(e) {
      this.checkbox = e;
    },
    search(e) {
      if (e === "search") {
        this.formData.pageindex = 1;
      }
      if (e === "init") {
        this.formData = { pageindex: 1, pagesize: 10 };
        this.clearCheck();
      }
      this.$api.XfSysBussinessGetNewPositionList(this.formData).then((res) => {
        this.tableData = res.Data.List || [];
        this.total = res.Data.TotalCount;
      });
    },
    add() {
      this.$refs.operation.showInit();
    },
    clearCheck() {
      this.checkbox = [];
      this.$refs.table.$refs.table.clearSelection();
    },
    delPL() {
      if (this.checkbox.length > 0) {
        this.$confirm(
          `此操作将永久删除${this.checkbox.length}条数据, 是否继续?`,
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            let array = this.checkbox.map((item) => {
              return item.NewPositionId;
            });
            this.$api
              .XfSysBussinessEditNewPositionStatus({
                idarr: array,
                type: -1,
              })
              .then((res) => {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.clearCheck();
                this.search();
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        this.$message.error("请勾选需要删除的数据");
        return;
      }
    },
    del(item, k) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api
            .XfSysBussinessEditNewPositionStatus({
              idarr: [item.NewPositionId],
              type: k,
            })
            .then((res) => {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.clearCheck();
              this.search();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleCurrentChange(e) {
      this.formData.pageindex = e;
      this.search();
    },
    handleSizeChange(e) {
      this.formData.pageindex = 1;
      this.formData.pagesize = e;
      this.search();
    },
  },
};
</script>

<style lang="scss" scoped></style>