npmapps 1.0.6 → 1.0.7

package/app/employeeSchedulingManagement/batchShiftChange/index.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="batchShiftChange">
+    <div class="basicInfo">
+     
+      <div class="content">
+        <el-form
+          ref="form"
+          :model="formData"
+          label-width="140px"
+          :rules="rules"
+        >
+          <div class="form-item-fisrt">
+            <el-form-item label="调整日期" prop="adjustmentDate">
+              <el-date-picker
+                style="width: 100%"
+                size="small"
+                v-model="formData.adjustmentDate"
+                type="date"
+                placeholder="选择日期"
+              >
+              </el-date-picker>
+            </el-form-item>
+      
+            <el-form-item label="班次" prop="shift">
+              <el-input
+                size="small"
+                v-model="formData.shift"
+                placeholder="请输入班次"
+              >
+                <el-button
+                  slot="append"
+                  icon="el-icon-search"
+                  @click="openShift('shift')"
+                ></el-button
+              ></el-input>
+            </el-form-item>
+           
+            <el-form-item label="参与人员" prop="participants">
+              <el-radio-group v-model="formData.participants">
+                <el-radio label="1">组内全部人员</el-radio>
+                <el-radio label="2">组内部分人员</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </div>
+          <div v-if="formData.participants === '2'" class="form-item-second">
+            <el-form-item label="选择人员" prop="personList">
+              <el-input
+                :value="personListComputed"
+                type="textarea"
+                placeholder="请输入内容"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button
+                icon="el-icon-search"
+                size="mini"
+                style="margin-right: 10px"
+                @click="openAttendancePersonnel"
+              ></el-button>
+              <el-checkbox v-model="formData.reverseFilter"
+                >反向筛选</el-checkbox
+              >
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+    </div>
+    <div class="bottom">
+      <el-button size="small" @click="close">取消</el-button>
+      <el-button size="small" type="primary" @click="onSave">生成排班</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import shiftRotationSystem from "../../components/shiftRotationSystem";
+import shift from "../../components/shift";
+import companyCalendar from "../../components/companyCalendar";
+import attendancePersonnel from "../../components/attendancePersonnel";
+export default {
+  // 批量调班
+  name: "batchShiftChange",
+  props: {
+    close: {
+      type: Function,
+      default: () => {},
+    },
+   
+  },
+  data() {
+    return {
+      formData: {
+        adjustmentDate: "", // 调整日期
+        shift: "", // 班次
+        participants: "1", //  参与人员
+        personList: [],
+        reverseFilter: false,
+      },
+      rules: {
+        adjustmentDate: [
+          { required: true, message: "请选择开始日期", trigger: "blur" },
+        ],
+
+        shift: [
+          {
+            required: true,
+            message: "请输入法定假日休息班次",
+            trigger: "blur",
+          },
+        ],
+        
+        
+      },
+   
+    };
+  },
+  computed: {
+    personListComputed() {
+      return "1";
+    },
+  },
+  mounted() {},
+  methods: {
+    openShift(key) {
+      const config = {
+        props: {
+          title: "班次",
+          width: "50%",
+        },
+        slots: {
+          default: (
+            <shift
+              setData={(d) => this.setShift(d, key)}
+              close={() => close()}
+            />
+          ),
+        },
+      };
+      let { close } = this.$dialogFnByJsx(config);
+    },
+    setShift(data, key) {
+      console.log(data, key, "setShift");
+    },
+    openAttendancePersonnel() {
+      const config = {
+        props: {
+          title: "选择考勤人员",
+          width: "50%",
+        },
+        slots: {
+          default: (
+            <attendancePersonnel
+              close={() => close()}
+              setData={(row) => this.setAttendancePersonnel(row)}
+              multiple={true}
+            />
+          ),
+        },
+      };
+      let { close } = this.$dialogFnByJsx(config);
+    },
+    setAttendancePersonnel(row) {
+      console.log(row, "setAttendancePersonnel");
+    },
+
+    onSave() {
+        console.log("onSave");
+        this.close();
+    }
+  },
+};
+</script>
+
+<style lang="less">
+.batchShiftChange {
+  .title {
+    font-size: 16px;
+    font-weight: 600;
+    border-bottom: 1px solid #ccc;
+    margin-bottom: 10px;
+    padding-bottom: 6px;
+  }
+  .basicInfo {
+    .form-item-fisrt {
+      display: flex;
+      flex-wrap: wrap;
+      .el-form-item {
+        width: 45%;
+        margin-bottom: 14px;
+      }
+    }
+    .form-item-second {
+      .el-form-item {
+        margin-bottom: 4px;
+      }
+    }
+  }
+  .bottom {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
+  }
+}
+</style>