KindergartenUI/src/views/assembly/classe.vue

<template>
  <div class="app-container">
    <el-form ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="70px">
      <el-form-item label="所属班级" prop="className">
        <el-button
          @click="classshow = true"
          v-if="className == '请选择班级'"
          class="btn"
          style="color: #c0c4cc;"
        >{{ className }}</el-button>
        <el-button @click="classshow = true" class="btn" v-else>{{ className }}</el-button>
      </el-form-item>
    </el-form>
    <!-- //班级 -->
    <el-dialog
      width="900px"
      title="选择班级"
      :visible.sync="classshow"
      append-to-body
      :before-close="classcancel"
    >
      <el-form ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="110px">
        <el-form-item label="所属幼儿园" prop="kindergartenId">
          <treeselect
            :normalizer="normalizer"
            :options="kindergartenInfoList"
            placeholder="请选择所属幼儿园"
            v-model="classqueryParams.kindergartenId"
            style="width: 208px"
          />
        </el-form-item>
        <el-form-item label="班级名称" prop="className">
          <el-input style="width: 200px" v-model="classqueryParams.className" placeholder="请输入班级名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="classhandleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="classresetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="classList" @cell-dblclick="classclick">
        <el-table-column label="请选择" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              style="width: 15px; height: 15px"
              circle
              @click="classclick(scope.row)"
              v-if="classId == scope.row.id"
            ></el-button>
            <el-button
              v-else
              style="width: 15px; height: 15px"
              circle
              @click="classclick(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column property="kindergartenName" label="幼儿园名称" align="center"></el-table-column>
        <el-table-column property="className" label="班级名称" align="center"></el-table-column>
        <el-table-column property="classType" label="班级类型" align="center">
          <template slot-scope="scope">
            {{ scope.row.classType == 'LARGE_CLASS' ? "大班" : "" }}
            {{ scope.row.classType == 'MIDDLE_CLASS' ? "中班" : "" }}
            {{ scope.row.classType == 'SMALL_CLASS' ? "小班" : "" }}
            {{ scope.row.classType == 'GRADUATE' ? "毕业" : "" }}
          </template>
        </el-table-column>
        <el-table-column property="classTeacher" label="班主任姓名" align="center"></el-table-column>
        <el-table-column property="phone" label="联系电话" align="center"></el-table-column>
      </el-table>
      <pagination
        v-show="total1 > 0"
        :total="total1"
        :page.sync="classqueryParams.pageNum"
        :limit.sync="classqueryParams.pageSize"
        @pagination="getList"
      />
    </el-dialog>
  </div>
</template>
<script>
import { listClassinfo } from "@/api/system/classinfo";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listKindergartenInfo } from "@/api/system/kindergartenInfo";
export default {
  components: { Treeselect },
  name: "classe",
  data() {
    return {
      total1: 0,
      //遮罩层
      classshow: false,
      // 显示搜索条件
      showSearch: true,
      // 表单参数
      form: {},
      //幼儿园
      kinqueryParams: {
        pageNum: 1,
        pageSize: 1000
      },
      //班级查询参数
      classqueryParams: {
        pageNum: 1,
        pageSize: 10,
        className: null,
        kindergartenName: null,
        kindergartenId: null,
        phone: null
      },
      //幼儿园list
      kindergartenInfoList: [],
      //班级list
      classList: [],
      //班级名字
      className: "请选择班级",
      //班级ID
      classId: ""
    };
  },
  mounted() {},
  created() {
    this.kingetlist();
    this.getList();
    this.onshow();
  },
  methods: {
    onshow() {
      this.className = "请选择班级";
      this.$emit("classelist", this.classId);
    },
    //班级左侧点击
    classclick(row) {
      this.className = row.className;
      this.classId = row.id;
      this.classshow = false;
      this.$emit("classelist", this.classId);
    },
    //班级关闭
    classcancel() {
      this.classshow = false;
      this.classresetQuery();
    },
    //搜索
    classhandleQuery() {
      this.getList();
    },
    classresetQuery() {
      this.classqueryParams = {
        pageNum: 1,
        pageSize: 10,
        organizeId: null,
        className: null,
        phone: null,
        contacts: null
      };
      this.classhandleQuery();
    },
    //幼儿园list
    kingetlist() {
      listKindergartenInfo(this.kinqueryParams).then(response => {
        this.kindergartenInfoList = response.rows;
      });
    },
    getList() {
      //获取班级list
      listClassinfo(this.classqueryParams).then(response => {
        this.classList = response.rows;
        this.total1 = response.total;
      });
    },
    // 表单重置
    reset() {
      this.className = "请选择班级";
      this.classId = "";
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        kindergartenId: node.id,
        label: node.kindergartenName,
        children: node.children
      };
    }
  }
};
</script>
<style scoped='scss'>
::v-deep .el-card__header {
  border: none;
}
.btn {
  width: 230px;
  text-align: left;
  height: 32px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 13px;
}
</style>