2022-06-08 14:51:11 +08:00

234 lines
11 KiB
Vue

<template>
<div class="fullHeight">
<div class="searchBox whiteBlock">
<el-button size="medium" type="primary" @click="addBefore">{{$t('message.workType.add')}}</el-button>
</div>
<div class="table_wrap whiteBlock">
<vue-scroll>
<el-table class="tables" :data="workerList">
<el-table-column prop="ruleName"
:label="$t('message.workType.workInfo.ruleName')"></el-table-column>
<el-table-column prop="startTime"
:label="$t('message.workType.workInfo.morningEndTime')"></el-table-column>
<el-table-column prop="endTime"
:label="$t('message.workType.workInfo.afternoonStartTime')"></el-table-column>
<el-table-column width="200">
<div slot class="operate" slot-scope="scope">
<div class="tableBtns">
<div @click="editBefore(scope.row)" class="operationText">
<img src="@/assets/images/icon-edit.png" width="15px" height="15px"/>
<span>{{$t('message.workType.edit')}}</span>
</div>
<div @click="deleteWorker(scope.row)" class="operationText">
<img src="@/assets/images/icon-delete.png" width="15px" height="15px"/>
<span>{{$t('message.workType.delete')}}</span>
</div>
</div>
</div>
</el-table-column>
</el-table>
</vue-scroll>
</div>
<!--:title="type==='add'?'新增考勤规则':type==='edit'?'编辑考勤规则':type==='delete'?'删除考勤规则':''"-->
<el-dialog
:modal-append-to-body="false"
:title="$t('message.workType.workInfo.dialog_typeName')[type]"
:visible.sync="dialogVisible"
width="667px">
<div class="dialog_content">
<el-form :rules="rules" :model="workerInfo" ref="form" label-width="130px" size="medium"
class="dialogFormBox">
<el-form-item prop="ruleName" :label="$t('message.workType.workInfo.ruleName')">
<el-input v-model="workerInfo.ruleName"
:placeholder="$t('message.workType.placeholder')"></el-input>
</el-form-item>
<el-form-item :label="$t('message.workType.workInfo.isRest')">
<el-select v-model="workerInfo.isRest">
<el-option :value="0"
:label="$t('message.workType.workInfo.isRestList')[0]"></el-option>
<el-option :value="1"
:label="$t('message.workType.workInfo.isRestList')[1]"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="startTime" :label="$t('message.workType.workInfo.morningEndTime')">
<el-time-picker
v-model="workerInfo.startTime"
:placeholder="$t('message.workType.placeholder_select')" value-format="HH:mm:ss">
</el-time-picker>
</el-form-item>
<el-form-item prop="endTime"
:label="$t('message.workType.workInfo.afternoonStartTime')">
<el-time-picker
v-model="workerInfo.endTime"
:placeholder="$t('message.workType.placeholder_select')" value-format="HH:mm:ss">
</el-time-picker>
</el-form-item>
<el-form-item :label="$t('message.workType.workInfo.notLater')">
<el-input v-model="workerInfo.notLater"
:placeholder="$t('message.workType.placeholder')"></el-input>
</el-form-item>
<el-form-item :label="$t('message.workType.workInfo.yesLater')">
<el-input v-model="workerInfo.yesLater"
:placeholder="$t('message.workType.placeholder')"></el-input>
</el-form-item>
<el-form-item :label="$t('message.workType.workInfo.notAdvance')">
<el-input v-model="workerInfo.notAdvance"
:placeholder="$t('message.workType.placeholder')"></el-input>
</el-form-item>
<el-form-item :label="$t('message.workType.workInfo.yesAdvance')">
<el-input v-model="workerInfo.yesAdvance"
:placeholder="$t('message.workType.placeholder')"></el-input>
</el-form-item>
<el-form-item :label="$t('message.workType.workInfo.yesOrNotOvertime')">
<el-select v-model="workerInfo.yesOrNotOvertime">
<el-option :value="0"
:label="$t('message.workType.workInfo.isRestList')[0]"></el-option>
<el-option :value="1"
:label="$t('message.workType.workInfo.isRestList')[1]"></el-option>
</el-select>
</el-form-item>
<div class="dialog-footer">
<el-button
class="cancleBtn"
@click="dialogVisible = false"
icon="el-icon-circle-close"
size="medium"
>{{$t('message.personnelPosition.cancel')}}
</el-button>
<el-button
type="primary"
icon="el-icon-circle-check"
@click="Submit"
size="medium"
>{{$t('message.personnelPosition.determine')}}
</el-button>
</div>
</el-form>
</div>
</el-dialog>
</div>
</template>
<script>
import {
workerAttendanceRuleList,
workerAttendanceRuleAdd,
workerAttendanceRuleEdit,
workerAttendanceRuleDelete
} from '@/assets/js/api/laborPerson'
export default {
data() {
return {
type: 'add',
dialogVisible: false,
workerList: [],
workerInfo: {},
rules: {
ruleName: [
{required: true, message: this.$t('message.workType.placeholder'), trigger: 'change'}
],
startTime: [
{required: true, message: this.$t('message.workType.placeholder_select'), trigger: 'blur'},
{required: true, message: this.$t('message.workType.placeholder_select'), trigger: 'change'}
],
endTime: [
{required: true, message: this.$t('message.workType.placeholder_select'), trigger: 'blur'},
{required: true, message: this.$t('message.workType.placeholder_select'), trigger: 'change'}
],
}
}
},
mounted() {
this.getWorker();
},
methods: {
getWorker() {
workerAttendanceRuleList({projectSn: this.$store.state.projectSn}).then(result => {
if (result.success) {
console.log('考勤列表', result)
this.workerList = result.result;
}
})
},
handle(type, worker) {
this.type = type;
this.workerInfo = worker;
this.dialogVisible = true;
},
addBefore() {
if (this.type === 'edit') {
this.workerInfo = {};
this.$nextTick(() => {
this.$refs.form.clearValidate();
})
}
this.type = 'add';
this.dialogVisible = true;
},
editBefore(worker) {
// console.log('编辑前的内容', worker)
this.handle('edit', JSON.parse(JSON.stringify(worker)));
},
deleteBefore(worker) {
},
addWorker() {
this.workerInfo.projectSn = this.$store.state.projectSn;
workerAttendanceRuleAdd(this.workerInfo).then(result => {
if (result.success) {
console.log('添加成功', result)
this.getWorker();
this.dialogVisible = false;
this.$message.success(result.message);
}
})
},
editWorker() {
workerAttendanceRuleEdit(this.workerInfo).then(result => {
if (result.success) {
console.log('编辑成功', result)
this.getWorker();
this.dialogVisible = false;
this.$message.success(result.message);
}
})
},
deleteWorker(worker) {
this.$confirm(this.$t('message.personnelPosition.beaconManage.table.confirmText') + "【" + worker.ruleName + "】?", this.$t('message.personnelPosition.beaconManage.table.Tips'), {
confirmButtonText: this.$t('message.personnelPosition.confirmButtonText'),
cancelButtonText: this.$t('message.personnelPosition.cancelButtonText'),
type: "warning",
}).then(() => {
workerAttendanceRuleDelete({id: worker.id}).then(result => {
if (result.success) {
console.log('删除成功', result)
this.getWorker();
this.dialogVisible = false;
this.$message.success(result.message);
}
})
this.getWorker();
}).catch(() => {
});
},
Submit() {
this.$refs.form.validate(valid => {
if (valid) {
if (this.type === 'add') {
console.log('add信息', this.workerInfo)
this.addWorker();
} else if (this.type === 'edit') {
this.editWorker();
}
} else {
console.log('用户注册信息未全部完成填写', valid)
return false
}
})
}
}
}
</script>