|
|
@@ -0,0 +1,440 @@
|
|
|
+<template>
|
|
|
+ <div class="question-infos">
|
|
|
+ <el-dialog :title="id? '编辑作息模版':'新增作息模版'" @close="handleClose" :visible.sync="isShow" :close-on-click-modal="false"
|
|
|
+ custom-class="gxDialog" width="75%" top="10vh" append-to-body>
|
|
|
+<!-- <div class="p-5 work-time-modify">-->
|
|
|
+ <el-form
|
|
|
+ label-width="140px"
|
|
|
+ :rules="rules"
|
|
|
+ label-suffix=":"
|
|
|
+ label-position="left">
|
|
|
+ <el-form-item>
|
|
|
+ <span slot="label"> <span style="color: red"> * </span>机构 </span>
|
|
|
+ <org-tree-select
|
|
|
+ ref="tree"
|
|
|
+ multiple
|
|
|
+ orgTypeFilter
|
|
|
+ :strictly="true"
|
|
|
+ :active-value="formData.orgIdList"
|
|
|
+ v-model="data.orgIdList"
|
|
|
+ :disabled="data.disabled"
|
|
|
+ :clearable="!data.disabled"
|
|
|
+ :style="id? 'background-color: #f5f7fa;color: #c0c4cc;': ''"
|
|
|
+ ></org-tree-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item >
|
|
|
+ <span slot="label"> <span style="color: red"> * </span>生效日期 </span>
|
|
|
+ <el-date-picker v-model="formData.effectiveDate" :disabled="data.disabled"
|
|
|
+ :clearable="!data.disabled" :picker-options="startDatepickerOptions" popper-class="no-atTheMoment" type="date" placeholder="请选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <div style="color: red">
|
|
|
+ (保存后生成或更新本月或下月生效日期后的每日作息)
|
|
|
+ </div>
|
|
|
+ <!-- -->
|
|
|
+ <div class="grid">
|
|
|
+ <div class="title">
|
|
|
+ <span style="color: red"> * </span>作息设置(勾选表示当日正常上班)
|
|
|
+ </div>
|
|
|
+ <div class="box">
|
|
|
+ <el-table class="w-auto" border :data="formData.dayOfWeeks">
|
|
|
+ <el-table-column label="星期" width="60px" prop="dayOfWeekText">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="营业状态" width="180px">
|
|
|
+ <template slot-scope="r">
|
|
|
+ <el-radio-group
|
|
|
+ v-model="r.row.isWorkday"
|
|
|
+ @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.isWorkday || r.row.isWorkday === 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.isWorkday || r.row.isWorkday === 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.isWorkday || r.row.isWorkday === 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.isWorkday || r.row.isWorkday === 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.isWorkday || r.row.isWorkday === 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.isWorkday || r.row.isWorkday === false"
|
|
|
+ v-model="r.row.workOffTime"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </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>
|
|
|
+ <el-dialog
|
|
|
+ title="提示"
|
|
|
+ :visible="centerDialogVisible"
|
|
|
+ width="25%"
|
|
|
+ @close="centerDialogVisible=false"
|
|
|
+ center>
|
|
|
+ <span>所选机构中在当前生效日期内已有按指定日期配置的作息数据,是否覆盖按指定日期配置的作息数据?</span>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="submitData(0)">不覆盖</el-button>
|
|
|
+ <el-button type="primary" @click="submitData(1)">覆盖</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ title="提示"
|
|
|
+ :visible="centerDialogVisiblea"
|
|
|
+ width="25%"
|
|
|
+ @close="centerDialogVisiblea=false"
|
|
|
+ center>
|
|
|
+ <span>已存在其他生效的配置,将会生成{{checkMsg}}的作息,是否提交?</span>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="checkDataMsg(0)">取消</el-button>
|
|
|
+ <el-button type="primary" @click="checkDataMsg(1)">提交</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+
|
|
|
+import BtnTip from "@/components/btnTip";
|
|
|
+import OrgTreeSelect from '@/components/orgTreeSelect'
|
|
|
+//import { timeCheck } from "@/util/util";
|
|
|
+export default {
|
|
|
+ components:{BtnTip,OrgTreeSelect},
|
|
|
+ data() {
|
|
|
+ let { params, query } = this.$route;
|
|
|
+ return {
|
|
|
+ isShow: false,
|
|
|
+ id:null,
|
|
|
+ orgId:null,
|
|
|
+ orgTree:null,
|
|
|
+ formData: {
|
|
|
+ orgIdList: [],
|
|
|
+ dayOfWeeks: [],
|
|
|
+ },
|
|
|
+ data: {
|
|
|
+ orgIdList: [],
|
|
|
+ disabled: false,
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ orgIdList: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请选择机构",
|
|
|
+ trigger: "change",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ value: new Date().getFullYear(),
|
|
|
+ label: new Date().getFullYear(),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: new Date().getFullYear() + 1,
|
|
|
+ label: new Date().getFullYear() + 1,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ pickerOptions: {
|
|
|
+ start: "00:00",
|
|
|
+ step: "00:10",
|
|
|
+ end: "24:00",
|
|
|
+ },
|
|
|
+ startDatepickerOptions: {
|
|
|
+ disabledDate(time) {
|
|
|
+ const date = new Date();
|
|
|
+ date.setTime(date.getTime() );
|
|
|
+ return time.getTime() < date;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ centerDialogVisible: false,
|
|
|
+ centerDialogVisiblea:false,
|
|
|
+ checkData:null,
|
|
|
+ checkMsg:null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ props: {},
|
|
|
+ watch: {
|
|
|
+ year() {
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ add(tree){
|
|
|
+ this.orgTree = tree;
|
|
|
+ this.isShow = true;
|
|
|
+ },
|
|
|
+ // ...mapMutations([]),
|
|
|
+ async refresh() {},
|
|
|
+
|
|
|
+ async show(id,orgId, other = {}) {
|
|
|
+ console.log("show",id,orgId);
|
|
|
+ this.isShow = true;
|
|
|
+ this.id=id;
|
|
|
+ this.orgId=orgId;
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ async onSubmit() {
|
|
|
+
|
|
|
+ this.formData.orgIds = this.data.orgIdList;
|
|
|
+
|
|
|
+ if (this.data.orgIdList.length < 1) {
|
|
|
+ this.$message.error("机构不能为空");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.formData.effectiveDate ) {
|
|
|
+ this.$message.error("生效日期不能为空");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let d=this.formData;
|
|
|
+ if (
|
|
|
+ this.formData.dayOfWeeks.filter((w) => w.isWorkday ===true || w.isWorkday)
|
|
|
+ .length === 0
|
|
|
+ ) {
|
|
|
+ this.$message.error("工作日不能为空");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ for (let i=0;i< this.formData.dayOfWeeks.length;i++ ) {
|
|
|
+ let dayOfWeek=this.formData.dayOfWeeks[i];
|
|
|
+ if(!dayOfWeek.isWorkday && dayOfWeek.isWorkday!=true){
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ !(
|
|
|
+ dayOfWeek.workTime &&
|
|
|
+ dayOfWeek.openTime &&
|
|
|
+ dayOfWeek.closeTime &&
|
|
|
+ dayOfWeek.workOffTime
|
|
|
+ )
|
|
|
+ ) {
|
|
|
+ this.onError(`${dayOfWeek.dayOfWeekText}的上班时间、营业时间未配置完整`);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!dayOfWeek.noonbreakStart ^ !dayOfWeek.noonbreakEnd) {
|
|
|
+ this.onError(`${dayOfWeek.dayOfWeekText}的午休开始及结束时间必须同时配置`);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ !timeCheck([
|
|
|
+ dayOfWeek.workTime,
|
|
|
+ dayOfWeek.openTime,
|
|
|
+ dayOfWeek.noonbreakStart,
|
|
|
+ dayOfWeek.noonbreakEnd,
|
|
|
+ dayOfWeek.closeTime,
|
|
|
+ dayOfWeek.workOffTime,
|
|
|
+ ])
|
|
|
+ ) {
|
|
|
+ this.onError(
|
|
|
+ `${dayOfWeek.dayOfWeekText}的上班时间<=营业时间<=午休开始<=午休结束<=营业终了<=下班时间`
|
|
|
+ );
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let data = await this.$api.workTime.checkData(this.formData);
|
|
|
+ this.checkData=data.checkData
|
|
|
+ this.checkMsg=data.checkMsg
|
|
|
+
|
|
|
+ if((data.checkData==null||data.checkData==0)&&data.checkMsg==null) {
|
|
|
+ // this.$api.workTimeMonth.timeSetAdd(this.formData).then((v) => {
|
|
|
+ // this.$emit("success");
|
|
|
+ // this.onHide();
|
|
|
+ // });
|
|
|
+
|
|
|
+ }else{
|
|
|
+ this.checkDataDialog();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ checkDataDialog(){
|
|
|
+ if(this.checkMsg!=null){
|
|
|
+ this.centerDialogVisiblea=true;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(this.checkData>0){
|
|
|
+ this.centerDialogVisible=true;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkDataMsg(tyep){
|
|
|
+ if(tyep==0){
|
|
|
+ this.centerDialogVisiblea=false;
|
|
|
+ this.checkData=null;
|
|
|
+ this.checkMsg=null;
|
|
|
+ return;
|
|
|
+ }else{
|
|
|
+ if(this.checkData>0){
|
|
|
+ this.centerDialogVisible=true;
|
|
|
+ return;
|
|
|
+ }else{
|
|
|
+ // this.$api.workTimeMonth.timeSetAdd(this.formData).then((v) => {
|
|
|
+ // this.$emit("success");
|
|
|
+ // this.onHide();
|
|
|
+ // });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ async submitData(result){
|
|
|
+ this.centerDialogVisible=false;
|
|
|
+ this.centerDialogVisiblea=false;
|
|
|
+ this.formData.checkDataResult =result;
|
|
|
+ // this.$api.workTimeMonth.timeSetAdd(this.formData).then((v) => {
|
|
|
+ // this.$emit("success");
|
|
|
+ // this.onHide();
|
|
|
+ // });
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ async getData() {
|
|
|
+ console.log("this.formData.id",this.formData.id);
|
|
|
+ console.log("this.formData.orgId",this.formData.orgId);
|
|
|
+ // this.formData = await this.$api.workTimeMonth.holiday({
|
|
|
+ // id: this.id,
|
|
|
+ // });
|
|
|
+
|
|
|
+ // this.data.orgIdList =[];
|
|
|
+ if (this.id != 0) {
|
|
|
+ this.data.disabled=true;
|
|
|
+ this.data.orgIdList = [this.formData.orgId];
|
|
|
+ console.log(this.formData.orgIdList);
|
|
|
+ if (this.orgId) {
|
|
|
+ this.data.orgIdList = [this.formData.orgId];
|
|
|
+ console.log(this.data.orgIdList);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.data.orgIdList = [];
|
|
|
+ this.data.disabled= false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onEnableChange(workTime) {
|
|
|
+ if (workTime.isWorkday === false) {
|
|
|
+ workTime.openTime = null;
|
|
|
+ workTime.closeTime = null;
|
|
|
+ workTime.noonbreakStart = null;
|
|
|
+ workTime.noonbreakEnd = null;
|
|
|
+ workTime.workTime = null;
|
|
|
+ workTime.workOffTime = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleClose() {
|
|
|
+
|
|
|
+ this.id=null;
|
|
|
+ this.formData = {
|
|
|
+ orgIdList: [],
|
|
|
+ effectiveDate: null,
|
|
|
+ checkDataResult:null,
|
|
|
+ };
|
|
|
+ this.checkData=null;
|
|
|
+ this.checkMsg=null;
|
|
|
+ this.centerDialogVisiblea=false;
|
|
|
+ this.centerDialogVisible=false;
|
|
|
+ this.isShow = false;
|
|
|
+ },
|
|
|
+ onHide() {
|
|
|
+ this.id=null;
|
|
|
+ this.formData = {
|
|
|
+ orgIdList: [],
|
|
|
+ effectiveDate: null,
|
|
|
+ checkDataResult:null,
|
|
|
+ };
|
|
|
+ this.checkData=null;
|
|
|
+ this.checkMsg=null;
|
|
|
+ this.centerDialogVisiblea=false;
|
|
|
+ this.centerDialogVisible=false;
|
|
|
+ this.isShow = false;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.work-time-modify {
|
|
|
+ .red {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ .grid {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .title {
|
|
|
+ }
|
|
|
+ .box {
|
|
|
+ padding: 20px;
|
|
|
+ border: 1px solid #000000;
|
|
|
+ background: #ffffff;
|
|
|
+ .time {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //
|
|
|
+ .el-input {
|
|
|
+ width: 400px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-table {
|
|
|
+ .el-date-editor.el-input {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-dialog__body {
|
|
|
+ overflow-y: auto;
|
|
|
+ min-height: 200px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|