KindergartenUI/src/views/assembly/parent.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="parentName">
        <el-button
          @click="parentshow = true"
          v-if="parentName == '请选择家长'"
          class="btn"
          style="color: #c0c4cc;"
        >{{ parentName }}</el-button>
        <el-button @click="parentshow = true" class="btn" v-else>{{ parentName }}</el-button>
      </el-form-item>
    </el-form>
    <!-- //家长 -->
    <el-dialog
      width="900px"
      title="选择家长"
      :visible.sync="parentshow"
      append-to-body
      :before-close="parentcancel"
    >
      <el-form ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="110px">
        <el-form-item label="家长姓名" prop="parentName">
          <el-input
            style="width: 200px"
            v-model="parentqueryParams.parentName"
            placeholder="请输入家长姓名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="parenthandleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="parentresetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="parentList" @cell-dblclick="parentlick">
        <el-table-column label="请选择" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              style="width: 15px; height: 15px"
              circle
              @click="parentlick(scope.row)"
              v-if="parentId == scope.row.id"
            ></el-button>
            <el-button
              v-else
              style="width: 15px; height: 15px"
              circle
              @click="parentlick(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column property="parentName" label="家长姓名" align="center"></el-table-column>
        <el-table-column property="parentSex" 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="parentqueryParams.pageNum"
        :limit.sync="parentqueryParams.pageSize"
        @pagination="getList"
      />
    </el-dialog>
  </div>
</template>
<script>
import { listParentInfo } from "@/api/system/parentInfo";
export default {
  name: "parent",
  props: ["resets"],
  components: {},
  data() {
    return {
      total1: 0,
      //遮罩层
      parentshow: false,
      // 显示搜索条件
      showSearch: true,
      // 表单参数
      form: {},
      //家长查询参数
      parentqueryParams: {
        pageNum: 1,
        pageSize: 10,
        parentName: null,
        phone: null
      },
      //家长list
      parentList: [],
      //家长名字
      parentName: "请选择家长",
      //家长ID
      parentId: ""
    };
  },
  mounted() {},
  watch: {
    resets: {
      handler(newresets, oldresets) {
        console.log(newresets, oldresets);
      }
    }
  },
  created() {
    this.getList();
    this.onshow();
    console.log(this.resets);
  },
  methods: {
    onshow() {
      this.parentName = "请选择家长";
      this.$emit("parentlist", this.parentId);
    },
    //家长左侧点击
    parentlick(row) {
      this.parentName = row.parentName;
      this.parentId = row.id;
      this.parentshow = false;
      this.$emit("parentlist", this.parentId);
    },
    //家长关闭
    parentcancel() {
      this.parentshow = false;
      this.parentresetQuery();
    },
    //搜索
    parenthandleQuery() {
      this.getList();
    },
    parentresetQuery() {
      this.parentqueryParams = {
        pageNum: 1,
        pageSize: 10,
        organizeId: null,
        parentName: null,
        kindergartenAddress: null,
        kindergartenType: null,
        phone: null,
        contacts: null
      };
      this.parenthandleQuery();
    },
    getList() {
      //获取家长list
      listParentInfo(this.parentqueryParams).then(response => {
        this.parentList = response.rows;
        this.total1 = response.total;
      });
    },
    // 表单重置
    reset() {
      this.parentName = "请选择家长";
      this.parentId = "";
    }
  }
};
</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>