20200722-zlp-1

幼儿考勤管理

ruoyi-ui/src/views/benyi/checkindetail/index.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">     
+    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
       <el-form-item label="班级编码" prop="classid">
-        <el-input
-          v-model="queryParams.classid"
-          placeholder="请输入班级编码"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
+        <el-select v-model="queryParams.classid" placeholder="请选择班级">
+          <el-option
+            v-for="dict in classOptions"
+            :key="dict.bjbh"
+            :label="dict.bjmc"
+            :value="dict.bjbh"
+          ></el-option>
+        </el-select>
       </el-form-item>
       <el-form-item label="幼儿姓名" prop="childname">
         <el-input
@@ -21,7 +22,12 @@
       </el-form-item>
       <el-form-item label="出勤类型" prop="type">
         <el-select v-model="queryParams.type" placeholder="请选择出勤类型" clearable size="small">
-          <el-option label="请选择字典生成" value />
+          <el-option
+            v-for="dict in checkinOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -74,12 +80,17 @@
     <el-table v-loading="loading" :data="detailList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="学校编码" align="center" prop="schoolid" />
-      <el-table-column label="班级编码" align="center" prop="classid" />
-      <el-table-column label="幼儿编码" align="center" prop="childid" />
+      <!-- <el-table-column label="学校编码" align="center" prop="schoolid" /> -->
+      <el-table-column label="班级编码" align="center" prop="classid" :formatter="classFormat" />
+      <!-- <el-table-column label="幼儿编码" align="center" prop="childid" /> -->
       <el-table-column label="幼儿姓名" align="center" prop="childname" />
-      <el-table-column label="出勤类型" align="center" prop="type" />
-      <el-table-column label="创建人" align="center" prop="createuserid" />
+      <el-table-column label="出勤类型" align="center" prop="type" :formatter="typeFormat" />
+      <el-table-column label="考勤时间" align="center" prop="createTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column label="创建人" align="center" prop="createuserid" /> -->
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -111,26 +122,28 @@
     <!-- 添加或修改幼儿考勤对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="学校编码" prop="schoolid">
-          <el-input v-model="form.schoolid" placeholder="请输入学校编码" />
+        <el-form-item label="选择幼儿" prop="childname">
+          <el-checkbox
+            :indeterminate="isIndeterminate"
+            v-model="checkAll"
+            @change="handleCheckAllChange"
+          >全选</el-checkbox>
+          <div style="margin: 15px 0;"></div>
+          <el-checkbox-group v-model="checkedChilds" @change="handlecheckedChildsChange">
+            <el-checkbox v-for="child in childs" :label="child.id" :key="child.id">{{child.name}}</el-checkbox>
+          </el-checkbox-group>
+          <el-input v-model="form.childname" v-if="false" />
         </el-form-item>
-        <el-form-item label="班级编码" prop="classid">
-          <el-input v-model="form.classid" placeholder="请输入班级编码" />
-        </el-form-item>
-        <el-form-item label="幼儿编码" prop="childid">
-          <el-input v-model="form.childid" placeholder="请输入幼儿编码" />
-        </el-form-item>
-        <el-form-item label="幼儿姓名" prop="childname">
-          <el-input v-model="form.childname" placeholder="请输入幼儿姓名" />
-        </el-form-item>
-        <el-form-item label="出勤类型">
+        <el-form-item label="出勤类型" prop="type">
           <el-select v-model="form.type" placeholder="请选择出勤类型">
-            <el-option label="请选择字典生成" value />
+            <el-option
+              v-for="dict in checkinOptions"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="dict.dictValue"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item label="创建人" prop="createuserid">
-          <el-input v-model="form.createuserid" placeholder="请输入创建人" />
-        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -150,10 +163,18 @@ import {
   exportDetail
 } from "@/api/benyi/checkindetail";
 
+import { listChild } from "@/api/benyi/child";
+
+import { listClass } from "@/api/system/class";
+
 export default {
   name: "Detail",
   data() {
     return {
+      checkAll: false,
+      checkedChilds: [],
+      childs: [],
+      isIndeterminate: false,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -166,6 +187,10 @@ export default {
       total: 0,
       // 幼儿考勤表格数据
       detailList: [],
+      //字典
+      checkinOptions: [],
+      //班级
+      classOptions: [],
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -184,18 +209,55 @@ export default {
       // 表单参数
       form: {},
       // 表单校验
-      rules: {}
+      rules: {
+        childname: [
+          {
+            required: true,
+            message: "请至少选择一个幼儿",
+            trigger: "blur"
+          }
+        ],
+        type: [{ required: true, message: "出勤类型不能为空", trigger: "blur" }]
+      }
     };
   },
   created() {
     this.getList();
+    this.getClassList();
+    this.getDicts("sys_dm_cqzt").then(response => {
+      this.checkinOptions = response.data;
+    });
   },
   methods: {
+    //班级列表
+    getClassList() {
+      listClass(null).then(response => {
+        this.classOptions = response.rows;
+      });
+    },
+    // 字典翻译
+    typeFormat(row, column) {
+      return this.selectDictLabel(this.checkinOptions, row.type);
+    },
+    // 字典翻译
+    classFormat(row, column) {
+      // return this.selectDictLabel(this.classOptions, row.classid);
+      var actions = [];
+      var datas = this.classOptions;
+      Object.keys(datas).map(key => {
+        if (datas[key].bjbh == "" + row.classid) {
+          actions.push(datas[key].bjmc);
+          return false;
+        }
+      });
+      return actions.join("");
+    },
     /** 查询幼儿考勤列表 */
     getList() {
       this.loading = true;
       listDetail(this.queryParams).then(response => {
         this.detailList = response.rows;
+        // console.log(response.rows);
         this.total = response.total;
         this.loading = false;
       });
@@ -237,9 +299,11 @@ export default {
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
       this.open = true;
-      this.title = "添加幼儿考勤";
+      this.title = "幼儿考勤";
+      listChild(null).then(response => {
+        this.childs = response.rows;
+      });
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
@@ -255,23 +319,18 @@ export default {
     submitForm: function() {
       this.$refs["form"].validate(valid => {
         if (valid) {
-          if (this.form.id != undefined) {
-            updateDetail(this.form).then(response => {
-              if (response.code === 200) {
-                this.msgSuccess("修改成功");
-                this.open = false;
-                this.getList();
-              }
-            });
-          } else {
-            addDetail(this.form).then(response => {
-              if (response.code === 200) {
-                this.msgSuccess("新增成功");
-                this.open = false;
-                this.getList();
-              }
-            });
+          if (this.form.childname == "") {
+            this.msgError("请至少选择一个幼儿");
+            return;
           }
+          //提交
+          addDetail(this.form).then(response => {
+            if (response.code === 200) {
+              this.msgSuccess("添加考勤成功");
+              this.open = false;
+              this.getList();
+            }
+          });
         }
       });
     },
@@ -311,6 +370,41 @@ export default {
           this.download(response.msg);
         })
         .catch(function() {});
+    },
+    handleCheckAllChange(val) {
+      // this.checkedChilds = val ? this.childs : [];
+      // this.isIndeterminate = false;
+      this.checkedChilds = [];
+      this.childs.forEach(item => {
+        //当全选被选中的时候，循环遍历源数据，把数据的每一项加入到默认选中的数组去
+        this.checkedChilds.push(item.id);
+      });
+      this.checkedChilds = val ? this.checkedChilds : []; //三元表达式，如果val的值为true，那么就把当前默认选中的值赋值给自身，这样页面页面上所有的元素就都选中了。如果为false，就是取消全选
+      this.isIndeterminate = false; //官网说这是个样式控制，是来控制，什么时候半选的，要不要都无所谓，看你需求
+
+      //console.log(this.checkedChilds);
+      var cids = "";
+      this.checkedChilds.forEach(item => {
+        //当全选被选中的时候，循环遍历源数据，把数据的每一项加入到默认选中的数组去
+        cids = cids + item + ",";
+      });
+      console.log(cids);
+      this.form.childname = cids;
+    },
+    handlecheckedChildsChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.childs.length;
+      this.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.childs.length;
+
+      //console.log(this.checkedChilds);
+      var cids = "";
+      this.checkedChilds.forEach(item => {
+        //当全选被选中的时候，循环遍历源数据，把数据的每一项加入到默认选中的数组去
+        cids = cids + item + ",";
+      });
+      console.log(cids);
+      this.form.childname = cids;
     }
   }
 };