|
|
@@ -0,0 +1,321 @@
|
|
|
+<template>
|
|
|
+ <div class="question-infos">
|
|
|
+ <el-dialog title="新增作息" @close="handleClose" :visible.sync="isShow" :close-on-click-modal="false"
|
|
|
+ custom-class="gxDialog" width="75%" append-to-body>
|
|
|
+<!-- <div class="p-5 work-time">-->
|
|
|
+ <el-form label-width="90px" label-suffix=":" label-position="right">
|
|
|
+
|
|
|
+ <el-form-item label="分配机构">
|
|
|
+ <org-tree-select @selectNode="queryNode"></org-tree-select>
|
|
|
+ </el-form-item >
|
|
|
+ <el-form-item label="调整日期">
|
|
|
+ <el-button type="primary" @click="addData()">新增日期</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- -->
|
|
|
+ <el-form-item label="作息规则">
|
|
|
+ <el-table class="w-auto" height="250" border :data="workTimeList">
|
|
|
+ <el-table-column label="日期" width="180px">
|
|
|
+ <template slot-scope="r">
|
|
|
+ <el-date-picker v-model="r.row.date" :clearable=false popper-class="no-atTheMoment" :picker-options="startDatepickerOptions" type="date" placeholder="请选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="星期" width="60px">
|
|
|
+ <template slot-scope="r">
|
|
|
+ <span>{{ r.row.date | dateTime("dddd") }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="状态" width="180px">
|
|
|
+ <template slot-scope="r">
|
|
|
+ <el-radio-group
|
|
|
+ :disabled="r.row.disabled"
|
|
|
+ v-model="r.row.isEnable"
|
|
|
+ @change="onEnableChange(r.row)"
|
|
|
+ >
|
|
|
+ <el-radio text-color="#48bb78" :label="true">营业</el-radio>
|
|
|
+ <el-radio text-color="#f56565" :label="false">歇业</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="上班时间">
|
|
|
+ <template slot-scope="r">
|
|
|
+ <el-time-select
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ :disabled="r.row.disabled || r.row.isEnable === false"
|
|
|
+ v-model="r.row.workTime"/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="营业时间">
|
|
|
+ <template slot-scope="r">
|
|
|
+ <el-time-select
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ :disabled="r.row.disabled || r.row.isEnable === false"
|
|
|
+ v-model="r.row.openTime"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="午休开始">
|
|
|
+ <template slot-scope="r">
|
|
|
+ <el-time-select
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ :disabled="r.row.disabled || r.row.isEnable === false"
|
|
|
+ v-model="r.row.noonbreakStart"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="午休结束">
|
|
|
+ <template slot-scope="r">
|
|
|
+ <el-time-select
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ :disabled="r.row.disabled || r.row.isEnable === false"
|
|
|
+ v-model="r.row.noonbreakEnd"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="营业终了">
|
|
|
+ <template slot-scope="r">
|
|
|
+ <el-time-select
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ :disabled="r.row.disabled || r.row.isEnable === false"
|
|
|
+ v-model="r.row.closeTime"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="下班时间">
|
|
|
+ <template slot-scope="r">
|
|
|
+ <el-time-select
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ :disabled="r.row.disabled || r.row.isEnable === false"
|
|
|
+ v-model="r.row.workOffTime"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作列表">
|
|
|
+ <template slot-scope="r">
|
|
|
+ <k-btn-tip type="text" @click="deleteData(r.row,r.$index)"
|
|
|
+ >删除</k-btn-tip>
|
|
|
+ <el-button type="text" @click="coppy(r.$index)"
|
|
|
+ >复制至全部</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+<!-- </div>-->
|
|
|
+
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="onHide">取消</el-button>
|
|
|
+ <btn-tip tip="确定要提交吗?" type="primary" @click="onSubmit">保存</btn-tip>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+
|
|
|
+import OrgTreeSelect from '@/components/orgTreeSelect'
|
|
|
+import BtnTip from "@/components/btnTip";
|
|
|
+import dayjs from "dayjs";
|
|
|
+import { timeCheck } from "@/utils/ruoyi";
|
|
|
+
|
|
|
+
|
|
|
+export default {
|
|
|
+ components:{OrgTreeSelect,BtnTip},
|
|
|
+ data() {
|
|
|
+ let { params, query } = this.$route;
|
|
|
+ return {
|
|
|
+ selectTreeStrictly: true,
|
|
|
+ isShow: false,
|
|
|
+ workTimeList: [],
|
|
|
+ data: {
|
|
|
+ orgIdList: [],
|
|
|
+ },
|
|
|
+ startDatepickerOptions: {
|
|
|
+ disabledDate(time) {
|
|
|
+ const date = new Date();
|
|
|
+ date.setTime(date.getTime()- 3600 * 1000 * 24 );
|
|
|
+ return time.getTime() < date;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ props: {},
|
|
|
+ watch: {
|
|
|
+
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ //...mapState([]),
|
|
|
+ pickerOptions() {
|
|
|
+ // const now = new Date();
|
|
|
+ return {
|
|
|
+ start: "00:00",
|
|
|
+ end: "24:00",
|
|
|
+ step: "00:10",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ queryNode(){
|
|
|
+
|
|
|
+ },
|
|
|
+ add(){
|
|
|
+ this.isShow = true;
|
|
|
+ },
|
|
|
+ async refresh() {
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ return {
|
|
|
+ workTimeList:[]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ addData(){
|
|
|
+ //获取workTimeList最后一条数据
|
|
|
+ let workTime = {
|
|
|
+ isEnable: true,
|
|
|
+ workTime: '07:00',
|
|
|
+ openTime: '09:00',
|
|
|
+ noonbreakStart: null,
|
|
|
+ noonbreakEnd: null,
|
|
|
+ closeTime: '17:00',
|
|
|
+ workOffTime: '20:00',
|
|
|
+ date: new Date(),
|
|
|
+ disabled: false,
|
|
|
+ };
|
|
|
+ if(this.workTimeList.length>0){
|
|
|
+ if(this.workTimeList[this.workTimeList.length-1].date!=null){
|
|
|
+ workTime.date = dayjs(this.workTimeList[this.workTimeList.length-1].date).add(1,'day').toDate();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.workTimeList.push(workTime);
|
|
|
+ console.log("addData",this.workTimeList);
|
|
|
+ },
|
|
|
+ coppy(index){
|
|
|
+ let workTime = this.workTimeList[index];
|
|
|
+ for(let i=0;i<this.workTimeList.length;i++){
|
|
|
+ this.workTimeList[i].isEnable = workTime.isEnable;
|
|
|
+ this.workTimeList[i].workTime = workTime.workTime;
|
|
|
+ this.workTimeList[i].openTime = workTime.openTime;
|
|
|
+ this.workTimeList[i].noonbreakStart = workTime.noonbreakStart;
|
|
|
+ this.workTimeList[i].noonbreakEnd = workTime.noonbreakEnd;
|
|
|
+ this.workTimeList[i].closeTime = workTime.closeTime;
|
|
|
+ this.workTimeList[i].workOffTime = workTime.workOffTime;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deleteData(row,index){
|
|
|
+ console.log(index);
|
|
|
+ this.workTimeList.splice(index,1);
|
|
|
+ },
|
|
|
+ //
|
|
|
+ check(other) {
|
|
|
+ if(other.date == null){
|
|
|
+ this.onError(`日期不能为空`);
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ const ds = this.$date(other.date).format("YYYY-MM-DD");
|
|
|
+ if (!other.disabled && other.isEnable == null) {
|
|
|
+ this.onError(`${ds}未进行配置`);
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (other.isEnable) {
|
|
|
+ if (
|
|
|
+ !(
|
|
|
+ other.workTime &&
|
|
|
+ other.openTime &&
|
|
|
+ other.closeTime &&
|
|
|
+ other.workOffTime
|
|
|
+ )
|
|
|
+ ) {
|
|
|
+ this.onError(`${ds}未配置时间`);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!other.noonbreakStart ^ !other.noonbreakEnd) {
|
|
|
+ this.onError(`午休开始及结束时间必须同时配置`);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ !timeCheck([
|
|
|
+ other.workTime,
|
|
|
+ other.openTime,
|
|
|
+ other.noonbreakStart,
|
|
|
+ other.noonbreakEnd,
|
|
|
+ other.closeTime,
|
|
|
+ other.workOffTime,
|
|
|
+ ])
|
|
|
+ ) {
|
|
|
+ this.onError(
|
|
|
+ `${ds}上班时间<=营业时间<=午休开始<=午休结束<=营业终了<=下班时间`
|
|
|
+ );
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ onHide() {
|
|
|
+ this.isShow = false;
|
|
|
+ this.workTimeList = [];
|
|
|
+ this.data.orgIdList=[];
|
|
|
+ },
|
|
|
+ handleClose() {
|
|
|
+ this.isShow = false;
|
|
|
+ this.workTimeList = [];
|
|
|
+ this.data.orgIdList=[];
|
|
|
+ },
|
|
|
+ onEnableChange(workTime) {
|
|
|
+ if (workTime.isEnable === false) {
|
|
|
+ workTime.openTime = null;
|
|
|
+ workTime.closeTime = null;
|
|
|
+ workTime.noonbreakStart = null;
|
|
|
+ workTime.noonbreakEnd = null;
|
|
|
+ workTime.workTime = null;
|
|
|
+ workTime.workOffTime = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async onSubmit() {
|
|
|
+ //判断是否有重复的日期
|
|
|
+ let dateList = [];
|
|
|
+ for (let workTime of this.workTimeList) {
|
|
|
+ if (workTime.date) {
|
|
|
+ let date = this.$date(workTime.date).format("YYYY-MM-DD");
|
|
|
+ if (dateList.indexOf(date) > -1) {
|
|
|
+ this.onError(`日期${date}重复`);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ dateList.push(date);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 校验
|
|
|
+ for (let workTime of this.workTimeList) {
|
|
|
+ if (!this.check(workTime)) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // await this.$api.workTimeMonth.edit({
|
|
|
+ // ...this.data,
|
|
|
+ // workTimeList: this.workTimeList,
|
|
|
+ // }).then((v) => {
|
|
|
+ // this.$emit("success");
|
|
|
+ // this.onHide();
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ //apimark//
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.question-infos {
|
|
|
+ .el-form {
|
|
|
+ padding-top: 10px;
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.el-rate {
|
|
|
+ margin-top: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.change-icon {
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
尹帮元