msyj-admin-org/src/modules/example/views/DataManage.vue

<template>
  <div class="data-manage">
    <div class="part-box">
      <Form ref="FilterForm" label-position="left" :label-width="80" inline>
        <FormItem label="工作">
          <WorkSelect
            v-model.trim="filter.workId"
            placeholder="请选择工作"
            style="width:200px;"
          ></WorkSelect>
        </FormItem>
        <FormItem label="科目">
          <SubjectSelect
            v-model.trim="filter.subjectId"
            :work-id="filter.workId"
            placeholder="请选择科目"
            style="width:200px;"
          ></SubjectSelect>
        </FormItem>
        <FormItem label="用户">
          <CollectUserSelect
            v-model.trim="filter.userId"
            placeholder="请选择用户"
            style="width:200px;"
          ></CollectUserSelect>
        </FormItem>
        <FormItem label="年级名称">
          <Input
            v-model.trim="filter.name"
            placeholder="年级名称模糊查询"
            clearable
          ></Input>
        </FormItem>
        <FormItem label="年级状态">
          <Select v-model="filter.status" style="width: 150px;" clearable>
            <Option v-for="(val, key) in ABLE_TYPE" :key="key" :value="key">{{
              val
            }}</Option>
          </Select>
        </FormItem>
        <FormItem :label-width="0">
          <Button type="primary" icon="ios-search" @click="toPage(1)"
            >查询</Button
          >
        </FormItem>
      </Form>
    </div>

    <div class="part-box">
      <div class="part-title">
        <div class="part-title-infos">
          <Button type="primary" icon="md-add" @click="toAdd">新增</Button>
        </div>
      </div>
      <Table
        ref="TableList"
        :columns="columes"
        :data="grades"
        disabled-hover
        border
      ></Table>
      <div class="part-page">
        <Page
          size="small"
          :current="current"
          :total="total"
          :page-size="size"
          @on-change="toPage"
        ></Page>
      </div>
    </div>

    <!-- modify-data -->
    <modify-data
      :instance="curCourse"
      @modified="getList"
      ref="ModifyData"
    ></modify-data>
  </div>
</template>

<script>
import { ABLE_TYPE } from "@/constants/enumerate";
import { courseList, deleteCourse, updateCourseStatus } from "../api";
import ModifyData from "../components/ModifyData";
import WorkSelect from "@/components/WorkSelect";
import SubjectSelect from "@/components/SubjectSelect";
import CollectUserSelect from "@/components/CollectUserSelect";

export default {
  name: "data-manage",
  components: { ModifyData, WorkSelect, SubjectSelect, CollectUserSelect },
  data() {
    return {
      filter: {
        name: "",
        status: "",
        userId: "",
        workId: "",
        subjectId: ""
      },
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
      grades: [],
      curCourse: {},
      ABLE_TYPE,
      columes: [
        {
          title: "序号",
          type: "index",
          width: 100,
          align: "center"
        },
        {
          title: "年级名称",
          key: "name",
          minWidth: 200
        },
        {
          title: "状态",
          key: "status",
          minWidth: 200,
          render: (h, param) => {
            return h("span", ABLE_TYPE[param.row.status]);
          }
        },
        {
          title: "操作",
          key: "action",
          width: 160,
          align: "center",
          render: (h, param) => {
            const actions = [
              {
                name: "编辑",
                action: () => {
                  this.toEdit(param.row);
                }
              },
              {
                name: "删除",
                type: "error",
                action: () => {
                  this.toDelete(param.row);
                }
              },
              {
                name: param.row.status === "ENABLE" ? "禁用" : "启用",
                type: param.row.status === "ENABLE" ? "error" : "primary",
                action: () => {
                  this.toAble(param.row);
                }
              }
            ];
            return h("div", this.$tableAction(h, actions));
          }
        }
      ]
    };
  },
  created() {
    // this.getList();
  },
  methods: {
    async getList() {
      const datas = {
        ...this.filter,
        current: this.current,
        size: this.size
      };
      const data = await courseList(datas);
      this.grades = data.list.map(item => {
        return {
          id: item.id,
          name: item.name,
          status: item.status,
          createTime: item.createTime
        };
      });
      this.total = data.totalCount;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    toAdd() {
      this.curCourse = {};
      this.$refs.ModifyData.open();
    },
    toEdit(row) {
      this.curCourse = row;
      this.$refs.ModifyData.open();
    },
    async toAble(row) {
      const status = row.status === "ENABLE" ? "DISABLE" : "ENABLE";
      await updateCourseStatus({ id: row.id, status });
      this.$Message.success("修改成功！");
      row.status = status;
    },
    toDelete(row) {
      this.$Modal.confirm({
        title: "删除警告",
        content: "确定要删除当前学校吗？",
        onOk: () => {
          this.toDel(row.id);
        }
      });
    },
    async toDel(id) {
      await deleteCourse(id);
      this.$Message.success("删除成功！");
      // 解决最后一项删除后的问题
      this.deletePageLastItem();
    }
  }
};
</script>