|
|
@@ -19,16 +19,16 @@
|
|
|
@defaultKey="getDefaultKey"
|
|
|
@checkChange="changeCheckBox"
|
|
|
@click="handleNodeClick"
|
|
|
- :showCheckSub='false'
|
|
|
- :defaultCheckSub='false'
|
|
|
+ :showCheckSub="false"
|
|
|
+ :defaultCheckSub="false"
|
|
|
ref="orgTree"
|
|
|
></org-tree>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
</div>
|
|
|
-
|
|
|
- <div style="display:flex;">
|
|
|
- <div style="width:65%">
|
|
|
+
|
|
|
+ <div style="display: flex">
|
|
|
+ <div style="width: 65%">
|
|
|
<el-calendar v-model="calendarDate">
|
|
|
<!-- <template
|
|
|
slot="dateCell"
|
|
|
@@ -37,46 +37,80 @@
|
|
|
{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
|
|
|
</p>
|
|
|
</template> -->
|
|
|
- <template slot="dateCell" slot-scope="{date, data}">
|
|
|
+ <template slot="dateCell" slot-scope="{ data }">
|
|
|
<div class="card-group" @click="selectedDate(data)">
|
|
|
- <div :class="data.isSelected ? 'is-selected card-calendar-text' : 'card-calendar-text'">
|
|
|
+ <div
|
|
|
+ :class="
|
|
|
+ data.isSelected
|
|
|
+ ? 'is-selected card-calendar-text'
|
|
|
+ : 'card-calendar-text'
|
|
|
+ "
|
|
|
+ >
|
|
|
<span>{{ getDate(data.day) }}</span>
|
|
|
- <el-icon class="el-icon-check" v-if="data.isSelected"></el-icon>
|
|
|
+ <el-icon
|
|
|
+ class="el-icon-check"
|
|
|
+ v-if="data.isSelected"
|
|
|
+ ></el-icon>
|
|
|
</div>
|
|
|
- <div v-if="isSetedWorkTime(data)" style="height:100%">
|
|
|
- <span v-for="(item, index) in tableList" :key="index" class="card">
|
|
|
- <div v-if="item.ymdDate === data.day" class="card-flag">
|
|
|
- <div :class="getDayClass(data,item)">
|
|
|
- <span>{{ getDate(data.day) }}</span>
|
|
|
- <el-icon class="el-icon-check" v-if="data.isSelected"></el-icon>
|
|
|
- </div>
|
|
|
- <div :class="'card'+getColorIndexByWorkTime(item)">
|
|
|
- <div class="visits-val">{{item.isDuty==='1' ?'值班':''}}</div>
|
|
|
+ <div v-if="isSetedWorkTime(data)" style="height: 100%">
|
|
|
+ <span
|
|
|
+ v-for="(item, index) in tableList"
|
|
|
+ :key="index"
|
|
|
+ class="card"
|
|
|
+ >
|
|
|
+ <div v-if="item.ymdDate === data.day" class="card-flag">
|
|
|
+ <div :class="getDayClass(data, item)">
|
|
|
+ <span>{{ getDate(data.day) }}</span>
|
|
|
+ <el-icon
|
|
|
+ class="el-icon-check"
|
|
|
+ v-if="data.isSelected"
|
|
|
+ ></el-icon>
|
|
|
+ </div>
|
|
|
+ <div :class="'card' + getColorIndexByWorkTime(item)">
|
|
|
+ <div class="visits-val">
|
|
|
+ {{ item.isDuty === "1" ? "值班" : "" }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </span>
|
|
|
+ </span>
|
|
|
</div>
|
|
|
- <div v-else style="height:100%">
|
|
|
+ <div v-else style="height: 100%">
|
|
|
<span class="card">
|
|
|
- <div class="card-flag">
|
|
|
- <div :class="getDayClass(data,null)">
|
|
|
- <span>{{ getDate(data.day) }}</span>
|
|
|
- <el-icon class="el-icon-check" v-if="data.isSelected"></el-icon>
|
|
|
- </div>
|
|
|
- <div :class="'card'+getColorIndexByWorkTime(null)">
|
|
|
- <div class="visits-val">{{''}}</div>
|
|
|
+ <div class="card-flag">
|
|
|
+ <div :class="getDayClass(data, null)">
|
|
|
+ <span>{{ getDate(data.day) }}</span>
|
|
|
+ <el-icon
|
|
|
+ class="el-icon-check"
|
|
|
+ v-if="data.isSelected"
|
|
|
+ ></el-icon>
|
|
|
+ </div>
|
|
|
+ <div :class="'card' + getColorIndexByWorkTime(null)">
|
|
|
+ <div class="visits-val">{{ "" }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </span>
|
|
|
+ </span>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
</template>
|
|
|
- </el-calendar>
|
|
|
+ </el-calendar>
|
|
|
</div>
|
|
|
- <div style="width:35%;background-color: #fff;margin-left: 10px;box-shadow: 2px 2px 8px #ccc;">
|
|
|
- <el-form :model="formData" :rules="formData.isEnable?formDataRules:{}" size="small" ref="form" label-position="right"
|
|
|
- label-width="120px" label-prefix=":">
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ width: 35%;
|
|
|
+ background-color: #fff;
|
|
|
+ margin-left: 10px;
|
|
|
+ box-shadow: 2px 2px 8px #ccc;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ :model="formData"
|
|
|
+ :rules="formData.isEnable ? currentRules : {}"
|
|
|
+ size="small"
|
|
|
+ ref="form"
|
|
|
+ label-position="right"
|
|
|
+ label-width="120px"
|
|
|
+ label-prefix=":"
|
|
|
+ >
|
|
|
<el-row :gutter="20">
|
|
|
<!-- <el-col :span="24">
|
|
|
<el-form-item prop="orgName" label="机构：" >
|
|
|
@@ -85,27 +119,34 @@
|
|
|
</el-col> -->
|
|
|
<el-col :span="24">
|
|
|
<el-form-item label="日期：">
|
|
|
- <span >{{formData.ymdDate}}</span>
|
|
|
+ <span>{{ formData.ymdDate }}</span>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="24">
|
|
|
<el-form-item label="星期：">
|
|
|
- <span>{{parseTime(formData.ymdDate,"dddd")}}</span>
|
|
|
+ <span>{{ parseTime(formData.ymdDate, "dddd") }}</span>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="24">
|
|
|
<el-form-item prop="isEnable" label="状态：">
|
|
|
- <template >
|
|
|
- <el-radio-group v-model="formData.isEnable" @change="onEnableChange(formData)">
|
|
|
- <el-radio text-color="#48bb78" label="1">营业</el-radio>
|
|
|
- <el-radio text-color="#f56565" label="0">歇业</el-radio>
|
|
|
+ <template>
|
|
|
+ <el-radio-group
|
|
|
+ v-model="formData.isEnable"
|
|
|
+ @change="onEnableChange(formData)"
|
|
|
+ >
|
|
|
+ <el-radio text-color="#48bb78" label="1"
|
|
|
+ >营业</el-radio
|
|
|
+ >
|
|
|
+ <el-radio text-color="#f56565" label="0"
|
|
|
+ >歇业</el-radio
|
|
|
+ >
|
|
|
</el-radio-group>
|
|
|
</template>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="24">
|
|
|
<el-form-item prop="isEnable" label="值班打卡：">
|
|
|
- <template >
|
|
|
+ <template>
|
|
|
<el-radio-group v-model="formData.isDuty">
|
|
|
<el-radio text-color="#48bb78" label="1">是</el-radio>
|
|
|
<el-radio text-color="#f56565" label="0">否</el-radio>
|
|
|
@@ -115,57 +156,63 @@
|
|
|
</el-col>
|
|
|
<el-col v-if="formData.isEnable == '1'" :span="24">
|
|
|
<el-form-item prop="workTime" label="上班时间：">
|
|
|
- <template >
|
|
|
+ <template>
|
|
|
<el-time-select
|
|
|
- :picker-options="pickerOptions"
|
|
|
- v-model="formData.workTime"/>
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ v-model="formData.workTime"
|
|
|
+ />
|
|
|
</template>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col v-if="formData.isEnable == '1'" :span="24">
|
|
|
<el-form-item prop="workOffTime" label="下班时间：">
|
|
|
- <template >
|
|
|
+ <template>
|
|
|
<el-time-select
|
|
|
:picker-options="pickerOptions"
|
|
|
- v-model="formData.workOffTime"/>
|
|
|
+ v-model="formData.workOffTime"
|
|
|
+ />
|
|
|
</template>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col v-if="formData.isEnable == '1'" :span="24">
|
|
|
<el-form-item prop="openTime" label="营业开始：">
|
|
|
- <template >
|
|
|
+ <template>
|
|
|
<el-time-select
|
|
|
:picker-options="pickerOptions"
|
|
|
- v-model="formData.openTime"/>
|
|
|
+ v-model="formData.openTime"
|
|
|
+ />
|
|
|
</template>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col v-if="formData.isEnable == '1'" :span="24">
|
|
|
<el-form-item prop="closeTime" label="营业结束：">
|
|
|
- <template >
|
|
|
+ <template>
|
|
|
<el-time-select
|
|
|
:picker-options="pickerOptions"
|
|
|
- v-model="formData.closeTime"/>
|
|
|
+ v-model="formData.closeTime"
|
|
|
+ />
|
|
|
</template>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
- <el-col :span="24">
|
|
|
+ <el-col v-if="canSave()" :span="24">
|
|
|
<el-form-item>
|
|
|
- <el-button type="primary" @click="onSubmit">保存</el-button>
|
|
|
+ <el-button type="primary" @click="onSubmit"
|
|
|
+ >保存</el-button
|
|
|
+ >
|
|
|
</el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24">
|
|
|
+ </el-col>
|
|
|
+ <el-col v-if="canSave()" :span="24">
|
|
|
<el-form-item>
|
|
|
- <el-button type="primary" @click="submitCopyMouth">复制到全月并保存</el-button>
|
|
|
- </el-form-item>
|
|
|
+ <el-button type="primary" @click="submitCopyMouth"
|
|
|
+ >复制到全月并保存</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-form>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<dialog-template ref="modalTemplate" @ok="getList"></dialog-template>
|
|
|
@@ -178,9 +225,9 @@ import { mapGetters } from "vuex";
|
|
|
import { tableList } from "./api";
|
|
|
import DataRangePicker from "@/components/dateTime/daterange.picker.vue";
|
|
|
import dayjs from "dayjs";
|
|
|
-import {timeCheck }from '@/utils/ruoyi'
|
|
|
-import {editWorkTime,addWorkTimeDay} from "@/views/system/workTimeSet/api";
|
|
|
-import DialogTemplate from './dialog.template'
|
|
|
+import { timeCheck } from "@/utils/ruoyi";
|
|
|
+import { editWorkTime, addWorkTimeDay } from "@/views/system/workTimeSet/api";
|
|
|
+import DialogTemplate from "./dialog.template";
|
|
|
|
|
|
//初始化查询日期
|
|
|
|
|
|
@@ -189,16 +236,16 @@ import DialogTemplate from './dialog.template'
|
|
|
export default {
|
|
|
// emits: ['selectedDate'],
|
|
|
/** 得先引入字典才能使用 */
|
|
|
- dicts: ["sys_business_type",'sys_org_type'],
|
|
|
+ dicts: ["sys_business_type", "sys_org_type"],
|
|
|
/** 引入基础minxins*/
|
|
|
- components: { DataRangePicker, OrgTree,DialogTemplate},
|
|
|
+ components: { DataRangePicker, OrgTree, DialogTemplate },
|
|
|
data() {
|
|
|
return {
|
|
|
nowTime: null,
|
|
|
- isLoadedCalendarDate:false,
|
|
|
+ isLoadedCalendarDate: false,
|
|
|
// 遮罩层
|
|
|
loading: false,
|
|
|
- calendarDate:new Date(),
|
|
|
+ calendarDate: new Date(),
|
|
|
tableList: null,
|
|
|
// 显示搜索条件
|
|
|
showSearch: true,
|
|
|
@@ -208,59 +255,64 @@ export default {
|
|
|
orgId: null,
|
|
|
pageNum: 1,
|
|
|
pageSize: 200,
|
|
|
- range: [new Date(dayjs().subtract(1, 'month').startOf('month')), new Date(dayjs().add(1, 'month').endOf('month'))],
|
|
|
- noWorkTime:false,
|
|
|
+ range: [
|
|
|
+ new Date(dayjs().subtract(1, "month").startOf("month")),
|
|
|
+ new Date(dayjs().add(1, "month").endOf("month")),
|
|
|
+ ],
|
|
|
+ noWorkTime: false,
|
|
|
},
|
|
|
formData: {},
|
|
|
- formDataRules: {
|
|
|
- isEnable: [{ required: true, message: "请选择状态" }],
|
|
|
- workTime: [{ required: true, message: "请输入上班时间" }],
|
|
|
- workOffTime: [{ required: true, message: "请输入下班时间" }],
|
|
|
- openTime: [{ required: true, message: "请输入营业开始时间" }],
|
|
|
- closeTime: [{ required: true, message: "请输入营业结束时间" }],
|
|
|
- },
|
|
|
+ // formDataRules: {
|
|
|
+ // isEnable: [{ required: true, message: "请选择状态" }],
|
|
|
+ // workTime: [{ required: true, message: "请输入上班时间" }],
|
|
|
+ // workOffTime: [{ required: true, message: "请输入下班时间" }],
|
|
|
+ // openTime: [{ required: true, message: "请输入营业开始时间" }],
|
|
|
+ // closeTime: [{ required: true, message: "请输入营业结束时间" }],
|
|
|
+ // },
|
|
|
};
|
|
|
},
|
|
|
- mounted(){
|
|
|
- let prevBtn = document.querySelector(
|
|
|
- ".el-calendar__button-group .el-button-group>button:nth-child(1)"
|
|
|
- );
|
|
|
- prevBtn.addEventListener("click", () => {
|
|
|
- this.judgeDate(this.calendarDate);
|
|
|
- });
|
|
|
- let dayBtn = document.querySelector(
|
|
|
- ".el-calendar__button-group .el-button-group>button:nth-child(2)"
|
|
|
- );
|
|
|
- dayBtn.addEventListener("click", () => {
|
|
|
- this.judgeDate(this.calendarDate);
|
|
|
- });
|
|
|
- let nextBtn = document.querySelector(
|
|
|
- ".el-calendar__button-group .el-button-group>button:nth-child(3)"
|
|
|
- );
|
|
|
- nextBtn.addEventListener("click", () => {
|
|
|
- this.judgeDate(this.calendarDate);
|
|
|
- });
|
|
|
+ mounted() {
|
|
|
+ let prevBtn = document.querySelector(
|
|
|
+ ".el-calendar__button-group .el-button-group>button:nth-child(1)"
|
|
|
+ );
|
|
|
+ prevBtn.addEventListener("click", () => {
|
|
|
+ this.judgeDate(this.calendarDate);
|
|
|
+ });
|
|
|
+ let dayBtn = document.querySelector(
|
|
|
+ ".el-calendar__button-group .el-button-group>button:nth-child(2)"
|
|
|
+ );
|
|
|
+ dayBtn.addEventListener("click", () => {
|
|
|
+ this.judgeDate(this.calendarDate);
|
|
|
+ });
|
|
|
+ let nextBtn = document.querySelector(
|
|
|
+ ".el-calendar__button-group .el-button-group>button:nth-child(3)"
|
|
|
+ );
|
|
|
+ nextBtn.addEventListener("click", () => {
|
|
|
+ this.judgeDate(this.calendarDate);
|
|
|
+ });
|
|
|
|
|
|
let parent = document.querySelector(
|
|
|
".el-calendar__header .el-calendar__button-group .el-button-group"
|
|
|
);
|
|
|
-
|
|
|
- // 创建一个颜色含义图示
|
|
|
- let btnDuty = this.createButton("营业","#4AAE50","10px");
|
|
|
- let btnUnDuty = this.createButton("歇业","#9E4646","10px");
|
|
|
- let btnUnSetWorkTime = this.createButton("未配置","#B7ACAC","100px");
|
|
|
- let btnTemplate = this.createButton("模板配置","#008CD6","10px");
|
|
|
- btnTemplate.onclick = function(){ // 触发事件
|
|
|
+
|
|
|
+ // 创建一个颜色含义图示
|
|
|
+ let btnDuty = this.createButton("营业", "#4AAE50", "10px");
|
|
|
+ let btnUnDuty = this.createButton("歇业", "#9E4646", "10px");
|
|
|
+ let btnUnSetWorkTime = this.createButton("未配置", "#B7ACAC", "100px");
|
|
|
+ let btnTemplate = this.createButton("模板配置", "#008CD6", "10px");
|
|
|
+ btnTemplate.onclick = function () {
|
|
|
+ // 触发事件
|
|
|
showWorkTimeTemp();
|
|
|
- }
|
|
|
- var that = this
|
|
|
- function showWorkTimeTemp(){ // 事件内容
|
|
|
+ };
|
|
|
+ var that = this;
|
|
|
+ function showWorkTimeTemp() {
|
|
|
+ // 事件内容
|
|
|
that.showTemplateDailog();
|
|
|
}
|
|
|
- parent.insertBefore(btnTemplate,parent.firstChild);
|
|
|
- parent.insertBefore(btnUnSetWorkTime,parent.firstChild);
|
|
|
- parent.insertBefore(btnUnDuty,parent.firstChild);
|
|
|
- parent.insertBefore(btnDuty,parent.firstChild);
|
|
|
+ parent.insertBefore(btnTemplate, parent.firstChild);
|
|
|
+ parent.insertBefore(btnUnSetWorkTime, parent.firstChild);
|
|
|
+ parent.insertBefore(btnUnDuty, parent.firstChild);
|
|
|
+ parent.insertBefore(btnDuty, parent.firstChild);
|
|
|
},
|
|
|
computed: {
|
|
|
...mapGetters(["orgId"]),
|
|
|
@@ -271,110 +323,124 @@ export default {
|
|
|
step: "00:05",
|
|
|
};
|
|
|
},
|
|
|
+ currentRules: function () {
|
|
|
+ if (!this.canSave()) {
|
|
|
+ return {};
|
|
|
+ } else {
|
|
|
+ return {
|
|
|
+ isEnable: [{ required: true, message: "请选择状态" }],
|
|
|
+ workTime: [{ required: true, message: "请输入上班时间" }],
|
|
|
+ workOffTime: [{ required: true, message: "请输入下班时间" }],
|
|
|
+ openTime: [{ required: true, message: "请输入营业开始时间" }],
|
|
|
+ closeTime: [{ required: true, message: "请输入营业结束时间" }],
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
created() {
|
|
|
this.getNowTime();
|
|
|
},
|
|
|
- watch:{
|
|
|
+ watch: {
|
|
|
calendarDate(val, oldVal) {
|
|
|
- if (val &&
|
|
|
- dayjs(val).format("YYYY-MM") != dayjs(oldVal).format("YYYY-MM")) {
|
|
|
- console.log("calendarDate",val);
|
|
|
+ if (
|
|
|
+ val &&
|
|
|
+ dayjs(val).format("YYYY-MM") != dayjs(oldVal).format("YYYY-MM")
|
|
|
+ ) {
|
|
|
+ console.log("calendarDate", val);
|
|
|
this.judgeDate(val);
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
dayjs,
|
|
|
- createButton(btnContent,backgroundColor,marginRight)
|
|
|
- {
|
|
|
- let button = document.createElement("button")
|
|
|
- button.type = 'button' // 类型
|
|
|
- button.className = 'el-button el-button--plain el-button--mini' // Calendar默认按钮样式
|
|
|
- button.textContent = btnContent // 文本
|
|
|
- button.style.cssText = `background-color: ${backgroundColor};color:white;margin-left:auto;margin-right:${marginRight}` // 样式
|
|
|
+ createButton(btnContent, backgroundColor, marginRight) {
|
|
|
+ let button = document.createElement("button");
|
|
|
+ button.type = "button"; // 类型
|
|
|
+ button.className = "el-button el-button--plain el-button--mini"; // Calendar默认按钮样式
|
|
|
+ button.textContent = btnContent; // 文本
|
|
|
+ button.style.cssText = `background-color: ${backgroundColor};color:white;margin-left:auto;margin-right:${marginRight}`; // 样式
|
|
|
return button;
|
|
|
},
|
|
|
- showTemplateDailog () {
|
|
|
- this.$refs.modalTemplate.show(this.queryParams.orgId);
|
|
|
- },
|
|
|
- judgeDate(calendarDate){
|
|
|
- console.log("judgeDate calendarDate",dayjs(calendarDate).format("YYYY-MM-DD"));
|
|
|
- let sDate =new Date(dayjs(calendarDate).subtract(1, 'month').startOf('month'));
|
|
|
- let eDate = new Date(dayjs(calendarDate).add(1, 'month').endOf('month'));
|
|
|
- this.queryParams.range=[sDate,eDate];
|
|
|
+ showTemplateDailog() {
|
|
|
+ this.$refs.modalTemplate.show(this.queryParams.orgId);
|
|
|
+ },
|
|
|
+ judgeDate(calendarDate) {
|
|
|
+ console.log(
|
|
|
+ "judgeDate calendarDate",
|
|
|
+ dayjs(calendarDate).format("YYYY-MM-DD")
|
|
|
+ );
|
|
|
+ let sDate = new Date(
|
|
|
+ dayjs(calendarDate).subtract(1, "month").startOf("month")
|
|
|
+ );
|
|
|
+ let eDate = new Date(dayjs(calendarDate).add(1, "month").endOf("month"));
|
|
|
+ this.queryParams.range = [sDate, eDate];
|
|
|
this.getList();
|
|
|
},
|
|
|
- selectedDate(data)
|
|
|
- {
|
|
|
- console.log('selectedDate--->prefix', data)
|
|
|
- loadFormData(data.day);
|
|
|
+ selectedDate(data) {
|
|
|
+ console.log("selectedDate--->prefix", data);
|
|
|
+ this.loadFormData(data.day);
|
|
|
},
|
|
|
- loadFormData(day)
|
|
|
- {
|
|
|
+ loadFormData(day) {
|
|
|
// console.log('selectedDate--->prefix', data)
|
|
|
- let selectedData = null
|
|
|
- if(this.tableList && this.tableList.length>0 ){
|
|
|
- let index= this.tableList.findIndex(x=>x.ymdDate===day);
|
|
|
- if(index>-1)
|
|
|
- {
|
|
|
- selectedData=this.tableList[index]
|
|
|
+ let selectedData = null;
|
|
|
+ if (this.tableList && this.tableList.length > 0) {
|
|
|
+ let index = this.tableList.findIndex((x) => x.ymdDate === day);
|
|
|
+ if (index > -1) {
|
|
|
+ selectedData = this.tableList[index];
|
|
|
this.formData = selectedData;
|
|
|
+ } else {
|
|
|
+ this.formData = this.reset(day);
|
|
|
}
|
|
|
- else{
|
|
|
- this.formData =this.reset(day);
|
|
|
- }
|
|
|
+ } else {
|
|
|
+ this.formData = this.reset(day);
|
|
|
}
|
|
|
- else{
|
|
|
- this.formData =this.reset(day);
|
|
|
- }
|
|
|
- console.log('selectedDate--->suffix', selectedData)
|
|
|
+
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.form.clearValidate();
|
|
|
+ });
|
|
|
+ // this.$refs.form.clearValidate();
|
|
|
+ console.log("selectedDate--->suffix", selectedData);
|
|
|
},
|
|
|
- firstLoadFormData(){
|
|
|
- if(!this.isLoadedCalendarDate){
|
|
|
- this.loadFormData(dayjs().format("YYYY-MM-DD"));
|
|
|
- this.isLoadedCalendarDate=true;
|
|
|
+ firstLoadFormData() {
|
|
|
+ if (!this.isLoadedCalendarDate) {
|
|
|
+ this.loadFormData(dayjs().format("YYYY-MM-DD"));
|
|
|
+ this.isLoadedCalendarDate = true;
|
|
|
}
|
|
|
},
|
|
|
reset(day) {
|
|
|
return {
|
|
|
- orgId:this.queryParams.orgId,
|
|
|
+ orgId: this.queryParams.orgId,
|
|
|
isEnable: "1",
|
|
|
- isDuty:"0",
|
|
|
+ isDuty: "0",
|
|
|
openTime: null,
|
|
|
closeTime: null,
|
|
|
workTime: null,
|
|
|
workOffTime: null,
|
|
|
- ymdDate:day,
|
|
|
+ ymdDate: day,
|
|
|
};
|
|
|
},
|
|
|
- isSetedWorkTime(data)
|
|
|
- {
|
|
|
+ isSetedWorkTime(data) {
|
|
|
// console.log("isSetedWorkTime",data,this.tableList)
|
|
|
- if(this.tableList && this.tableList.length>0)
|
|
|
- {
|
|
|
+ if (this.tableList && this.tableList.length > 0) {
|
|
|
// console.log("isSetedWorkTime indexOf",this.tableList.findIndex(x=>x.ymdDate === data.day))
|
|
|
- if(this.tableList.findIndex(x=>x.ymdDate === data.day)>-1)
|
|
|
- {
|
|
|
+ if (this.tableList.findIndex((x) => x.ymdDate === data.day) > -1) {
|
|
|
return true;
|
|
|
}
|
|
|
}
|
|
|
return false;
|
|
|
},
|
|
|
- getDayClass(data,item)
|
|
|
- {
|
|
|
- let tempColorIndex =this.getColorIndexByWorkTime(item);
|
|
|
- return data.isSelected ? 'is-selected' + ' ' + 'card-text' + tempColorIndex : 'card-text' + tempColorIndex
|
|
|
+ getDayClass(data, item) {
|
|
|
+ let tempColorIndex = this.getColorIndexByWorkTime(item);
|
|
|
+ return data.isSelected
|
|
|
+ ? "is-selected" + " " + "card-text" + tempColorIndex
|
|
|
+ : "card-text" + tempColorIndex;
|
|
|
},
|
|
|
- getColorIndexByWorkTime(item)
|
|
|
- {
|
|
|
- if(item)
|
|
|
- return item.isEnable=="1" ? "2":"3"
|
|
|
- else
|
|
|
- return "1";
|
|
|
+ getColorIndexByWorkTime(item) {
|
|
|
+ if (item) return item.isEnable == "1" ? "2" : "3";
|
|
|
+ else return "1";
|
|
|
},
|
|
|
getDate(day) {
|
|
|
- return dayjs(day).format('DD')
|
|
|
+ return dayjs(day).format("DD");
|
|
|
},
|
|
|
getNowTime() {
|
|
|
const dateObj = new Date(); // 获取当前时间对象
|
|
|
@@ -384,7 +450,7 @@ export default {
|
|
|
this.nowTime = `${year}-${month}-${day}`;
|
|
|
},
|
|
|
getDefaultKey(key) {
|
|
|
- this.queryParams.orgId = key;
|
|
|
+ this.queryParams.orgId = key;
|
|
|
this.getList();
|
|
|
},
|
|
|
/** 下穿状态改变*/
|
|
|
@@ -407,12 +473,24 @@ export default {
|
|
|
this.loading = false;
|
|
|
});
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
// 节点单击事件
|
|
|
handleNodeClick(data) {
|
|
|
- this.queryParams.orgId = data.id;
|
|
|
+ this.queryParams.orgId = data.id;
|
|
|
this.getList();
|
|
|
},
|
|
|
+ canSave() {
|
|
|
+ console.log(
|
|
|
+ "canSave",
|
|
|
+ this.calendarDate,
|
|
|
+ dayjs(this.calendarDate).startOf("day"),
|
|
|
+ dayjs(this.calendarDate).startOf("day").isBefore(dayjs())
|
|
|
+ );
|
|
|
+ if (dayjs(this.calendarDate).startOf("day").isBefore(dayjs())) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ },
|
|
|
onSubmit() {
|
|
|
this.$refs.form.validate((isValidate) => {
|
|
|
if (!isValidate) return;
|
|
|
@@ -429,12 +507,13 @@ export default {
|
|
|
);
|
|
|
return false;
|
|
|
}
|
|
|
- editWorkTime(this.formData).then(res=>{
|
|
|
+ editWorkTime(this.formData).then((res) => {
|
|
|
+ this.$message.success("保存成功");
|
|
|
this.getList();
|
|
|
- })
|
|
|
+ });
|
|
|
});
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
/* 重置搜索 */
|
|
|
resetForm(name) {
|
|
|
this.queryParams.isEnable = null;
|
|
|
@@ -442,45 +521,54 @@ export default {
|
|
|
this.queryParams.pageSize = 10;
|
|
|
this.queryParams.orgId = this.orgId;
|
|
|
this.queryParams.checkSub = true;
|
|
|
- this.queryParams.noWorkTime=false;
|
|
|
- this.$refs["orgTree"].setCheckSub(this.queryParams.checkSub)
|
|
|
- this.queryParams.range = [dayjs().startOf('month'), dayjs().endOf('month')];
|
|
|
+ this.queryParams.noWorkTime = false;
|
|
|
+ this.$refs["orgTree"].setCheckSub(this.queryParams.checkSub);
|
|
|
+ this.queryParams.range = [
|
|
|
+ dayjs().startOf("month"),
|
|
|
+ dayjs().endOf("month"),
|
|
|
+ ];
|
|
|
this.getList();
|
|
|
},
|
|
|
- submitCopyMouth(){
|
|
|
- if(!this.formData.ymdDate) return this.$message.error('请选择日期');
|
|
|
- if(this.formData.isEnable === null) return this.$message.error('请选择营业状态');
|
|
|
- if(this.formData.isEnable == '1'){
|
|
|
- if(!this.formData.openTime) return this.$message.error('请选择开始时间');
|
|
|
- if(!this.formData.closeTime) return this.$message.error('请选择结束时间');
|
|
|
- if(!this.formData.workTime) return this.$message.error('请选择上班时间');
|
|
|
- if(!this.formData.workOffTime) return this.$message.error('请选择下班时间');
|
|
|
- if(!timeCheck([this.formData.openTime,this.formData.closeTime])) return this.$message.error('开始时间不能大于结束时间');
|
|
|
- if(!timeCheck([this.formData.workTime,this.formData.workOffTime])) return this.$message.error('上班时间不能大于下班时间');
|
|
|
+ submitCopyMouth() {
|
|
|
+ if (!this.formData.ymdDate) return this.$message.error("请选择日期");
|
|
|
+ if (this.formData.isEnable === null)
|
|
|
+ return this.$message.error("请选择营业状态");
|
|
|
+ if (this.formData.isEnable == "1") {
|
|
|
+ if (!this.formData.openTime)
|
|
|
+ return this.$message.error("请选择开始时间");
|
|
|
+ if (!this.formData.closeTime)
|
|
|
+ return this.$message.error("请选择结束时间");
|
|
|
+ if (!this.formData.workTime)
|
|
|
+ return this.$message.error("请选择上班时间");
|
|
|
+ if (!this.formData.workOffTime)
|
|
|
+ return this.$message.error("请选择下班时间");
|
|
|
+ if (!timeCheck([this.formData.openTime, this.formData.closeTime]))
|
|
|
+ return this.$message.error("开始时间不能大于结束时间");
|
|
|
+ if (!timeCheck([this.formData.workTime, this.formData.workOffTime]))
|
|
|
+ return this.$message.error("上班时间不能大于下班时间");
|
|
|
}
|
|
|
let data = {
|
|
|
- orgIdList:[this.formData.orgId],
|
|
|
- workTimeList:this.copyDataToMonth()
|
|
|
- }
|
|
|
- console.log("submitCopyMouth",data);
|
|
|
- addWorkTimeDay(data).then(res=>{
|
|
|
- this.getList();
|
|
|
- })
|
|
|
+ orgIdList: [this.formData.orgId],
|
|
|
+ workTimeList: this.copyDataToMonth(),
|
|
|
+ };
|
|
|
+ console.log("submitCopyMouth", data);
|
|
|
+ addWorkTimeDay(data).then((res) => {
|
|
|
+ this.$message.success("保存成功");
|
|
|
+ this.getList();
|
|
|
+ });
|
|
|
},
|
|
|
- copyDataToMonth()
|
|
|
- {
|
|
|
- let startOfMonthDay= dayjs(this.formData.ymdDate).startOf('month');
|
|
|
- let endOfMonthDay= dayjs(this.formData.ymdDate).endOf('month');
|
|
|
- let dataList=[];
|
|
|
- while(startOfMonthDay.isBefore(endOfMonthDay))
|
|
|
- {
|
|
|
- let temp={ ...this.formData}
|
|
|
- temp.ymdDate=startOfMonthDay.format("YYYY-MM-DD");
|
|
|
+ copyDataToMonth() {
|
|
|
+ let startOfMonthDay = dayjs(this.formData.ymdDate).startOf("month");
|
|
|
+ let endOfMonthDay = dayjs(this.formData.ymdDate).endOf("month");
|
|
|
+ let dataList = [];
|
|
|
+ while (startOfMonthDay.isBefore(endOfMonthDay)) {
|
|
|
+ let temp = { ...this.formData };
|
|
|
+ temp.ymdDate = startOfMonthDay.format("YYYY-MM-DD");
|
|
|
dataList.push(temp);
|
|
|
- startOfMonthDay= startOfMonthDay.add(1,'day');
|
|
|
+ startOfMonthDay = startOfMonthDay.add(1, "day");
|
|
|
}
|
|
|
return dataList;
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -513,9 +601,9 @@ export default {
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
|
$titleHeight: 20px;
|
|
|
-$lowColor: #4AAE50;
|
|
|
-$middleColor: #B7ACAC;
|
|
|
-$heightColor: #9E4646;
|
|
|
+$lowColor: #4aae50;
|
|
|
+$middleColor: #b7acac;
|
|
|
+$heightColor: #9e4646;
|
|
|
|
|
|
@mixin card-o($bgColor) {
|
|
|
position: relative;
|
|
|
@@ -594,11 +682,11 @@ $heightColor: #9E4646;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
}
|
|
|
- }
|
|
|
- .card-group:focus, .card-group:hover {
|
|
|
- background-color:#33a3de
|
|
|
}
|
|
|
-
|
|
|
+ .card-group:focus,
|
|
|
+ .card-group:hover {
|
|
|
+ background-color: #33a3de;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
|
jingyuanchao