thridLargeScreen/src/views/demand/category.vue

<template>
  <div>
    <el-card shadow="never">
      <div>
        <el-button type="primary" @click="handleCreate">新建需求类别</el-button>
        <!-- <el-button type="primary" @click="handleUpdateServiceProvider"
          >服务商设置</el-button
        > -->
      </div>
    </el-card>
    <el-card shadow="never" class="mt-4">
      <div>
        <el-table :data="state.tableData" style="width: 100%">
          <el-table-column prop="name" label="类别名称"> </el-table-column>
          <el-table-column prop="name" label="是否启用">
            <template #default="{ row }">
              <el-switch
                v-model="row.status"
                :active-value="1"
                :inactive-value="0"
                @change="onChangeStatus(row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="排序(数字越大越排在前)">
            <template #default="{ row }">
              <el-input
                v-model.number="row.sort"
                type="number"
                @blur="updateSort(row)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="" label="操作">
            <template #default="{ row }">
              <el-button type="primary" link @click="handleEdit(row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="mt-4 justify-end"
          background
          layout="prev, pager, next"
          :total="state.pagination.total"
          @current-change="changePage"
        />
      </div>
    </el-card>
    <ComponentUpdateCategory
      v-model:show="state.visible"
      :rowData="state.rowData"
      @success="getTableData"
    ></ComponentUpdateCategory>
    <ComponentDialogService
      v-model:show="state.visibleServiceProvider"
    ></ComponentDialogService>
  </div>
</template>
<script lang="ts" setup>
import { request } from "@/utils";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, reactive } from "vue";
import ComponentUpdateCategory from "./components/UpdateCategory.vue";
import ComponentDialogService from "./components/DialogService.vue";
const state = reactive({
  query: {
    page: 1,
    pageSize: 15
  },
  pagination: {
    total: 0
  },
  tableData: [],
  visible: false,
  rowData: {},
  visibleServiceProvider: false // 服务商设置
});
const init = () => {
  getTableData();
};

const getTableData = () => {
  request
    .get("/articleService/demand/category/paginate", {
      params: state.query
    })
    .then(resp => {
      console.log("获取的需求", resp);
      state.tableData = resp?.data.list;
      state.pagination.total = resp.data.total;
    });
};

const updateSort = async row => {
  let resp = await request.post("/articleService/demand/category/sort", {
    id: row.id,
    sort: row.sort
  });
  ElMessage.success(resp.message);
  getTableData();
};

const onChangeStatus = row => {
  ElMessageBox.confirm(
    row.status ? "确定要启用此类别吗？" : "确定要关闭此类别吗？",
    "",
    {
      distinguishCancelAndClose: true,
      confirmButtonText: "确定",
      cancelButtonText: "取消"
    }
  )
    .then(async () => {
      await request.post("/articleService/demand/category/status", row);
      ElMessage.success("操作成功");
      getTableData();
    })
    .catch(err => {
      row.status = row.status ? 0 : 1;
    });
};
const handleCreate = () => {
  state.visible = true;
  state.rowData = {};
  console.log("state.rowData", state.rowData);
};
const handleUpdateServiceProvider = () => {
  state.visibleServiceProvider = true;
};
const handleEdit = row => {
  state.visible = true;
  state.rowData = row;
};
const changePage = page => {
  state.query.page = page;
  getTableData();
};
init();
</script>