|
|
@@ -0,0 +1,494 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ v-loading="loading"
|
|
|
+ :title="dialogTitle"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ :show-close="false"
|
|
|
+ append-to-body
|
|
|
+ class="dialog schedule-config-dialog"
|
|
|
+ top="5vh"
|
|
|
+ width="1000px"
|
|
|
+ @close="handleClose"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="form"
|
|
|
+ :model="formData"
|
|
|
+ :rules="rules"
|
|
|
+ :disabled="readonly"
|
|
|
+ label-width="110px"
|
|
|
+ label-position="right"
|
|
|
+ class="schedule-config-form"
|
|
|
+ >
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="编制部门" prop="bianZhiBuMen">
|
|
|
+ <el-select
|
|
|
+ v-model="formData.bianZhiBuMen"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ placeholder="请选择编制部门"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in deptOption"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="排班部门" prop="paiBanBuMen">
|
|
|
+ <el-select
|
|
|
+ v-model="formData.paiBanBuMen"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ placeholder="请选择排班部门"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in deptOption"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="编制时间" prop="bianZhiShiJian">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="formData.bianZhiShiJian"
|
|
|
+ type="datetime"
|
|
|
+ placeholder="请选择编制时间"
|
|
|
+ format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="编制人" prop="bianZhiRen">
|
|
|
+ <ibps-user-selector
|
|
|
+ v-model="formData.bianZhiRen"
|
|
|
+ type="user"
|
|
|
+ readonly-text="text"
|
|
|
+ :multiple="false"
|
|
|
+ size="small"
|
|
|
+ :filter="filter"
|
|
|
+ filtrate
|
|
|
+ :disabled = "readonly"
|
|
|
+ placeholder="请选择编制人"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="配置名称" prop="peiZhiMingChen">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.peiZhiMingChen"
|
|
|
+ placeholder="请输入配置名称"
|
|
|
+ maxlength="50"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="排班类型" prop="paiBanLeiXing">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.paiBanLeiXing"
|
|
|
+ placeholder="请输入排班类型"
|
|
|
+ maxlength="50"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="生效标志" prop="shengXiaoBiaoZhi">
|
|
|
+ <el-radio-group v-model="formData.shengXiaoBiaoZhi">
|
|
|
+ <el-radio label="Y">生效</el-radio>
|
|
|
+ <el-radio label="N">失效</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="上班时间" prop="shangBanShiJian">
|
|
|
+ <el-time-picker
|
|
|
+ v-model="shangBanTime"
|
|
|
+ placeholder="请选择上班时间"
|
|
|
+ format="HH:mm"
|
|
|
+ value-format="HH:mm"
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="下班时间" prop="xiaBanShiJian">
|
|
|
+ <el-time-picker
|
|
|
+ v-model="xiaBanTime"
|
|
|
+ placeholder="请选择下班时间"
|
|
|
+ format="HH:mm"
|
|
|
+ value-format="HH:mm"
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 是否跨日 -->
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="是否跨日" prop="shiFouKuaRi">
|
|
|
+ <el-radio-group v-model="formData.shiFouKuaRi">
|
|
|
+ <el-radio label="N">否</el-radio>
|
|
|
+ <el-radio label="Y">是</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12"></el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="排班人员" prop="paiBanRenYuan">
|
|
|
+ <ibps-user-selector
|
|
|
+ v-model="formData.paiBanRenYuan"
|
|
|
+ type="user"
|
|
|
+ readonly-text="text"
|
|
|
+ :multiple="true"
|
|
|
+ size="small"
|
|
|
+ :filter="filter"
|
|
|
+ filtrate
|
|
|
+ :disabled = "readonly"
|
|
|
+ placeholder="请选择排班人员"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <div slot="footer" class="el-dialog--center" v-if="!readonly">
|
|
|
+ <el-button @click="handleClose">取消</el-button>
|
|
|
+ <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="el-dialog--center" v-else>
|
|
|
+ <el-button type="primary" @click="handleClose">关闭</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import ibpsUserSelector from '@/business/platform/org/selector'
|
|
|
+import {
|
|
|
+ updateScheduleConfigItem,
|
|
|
+ insertScheduleConfigItemBatch
|
|
|
+} from '@/api/business/schedule'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'ScheduleConfigEdit',
|
|
|
+ components: {
|
|
|
+ ibpsUserSelector
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ visible: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ data: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({})
|
|
|
+ },
|
|
|
+ readonly: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ const { deptList = [], userList = [] } = this.$store.getters || {}
|
|
|
+ const deptOption = deptList.map((item) => ({
|
|
|
+ label: item.positionName,
|
|
|
+ value: item.positionId
|
|
|
+ }))
|
|
|
+ const userOption = userList.map((item) => ({
|
|
|
+ label: item.userName,
|
|
|
+ value: item.userId
|
|
|
+ }))
|
|
|
+
|
|
|
+ return {
|
|
|
+ deptOption,
|
|
|
+ userOption,
|
|
|
+ loading: false,
|
|
|
+ submitLoading: false,
|
|
|
+ filter: [
|
|
|
+ {
|
|
|
+ descVal: '1',
|
|
|
+ includeSub: true,
|
|
|
+ old: 'position',
|
|
|
+ partyId: this.$store.getters.userInfo?.employee?.positions || '',
|
|
|
+ partyName: '',
|
|
|
+ scriptContent: '',
|
|
|
+ type: 'user',
|
|
|
+ userType: 'position'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ formData: {
|
|
|
+ id: '',
|
|
|
+ peiZhiMingChen: '',
|
|
|
+ paiBanLeiXing: '',
|
|
|
+ shangBanShiJian: '',
|
|
|
+ xiaBanShiJian: '',
|
|
|
+ shiFouKuaRi: 'N',
|
|
|
+ shengXiaoBiaoZhi: 'Y',
|
|
|
+ bianZhiBuMen: '',
|
|
|
+ paiBanBuMen: '',
|
|
|
+ bianZhiRen: '',
|
|
|
+ bianZhiShiJian: '',
|
|
|
+ shiFouGuoShen: '',
|
|
|
+ diDian: '',
|
|
|
+ paiBanRenYuan: ''
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ peiZhiMingChen: [
|
|
|
+ { required: true, message: '请输入配置名称', trigger: 'blur' },
|
|
|
+ { max: 50, message: '配置名称不能超过50个字符', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ paiBanLeiXing: [
|
|
|
+ { required: true, message: '请输入排班类型', trigger: 'blur' },
|
|
|
+ { max: 50, message: '排班类型不能超过50个字符', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ shangBanShiJian: [
|
|
|
+ { required: true, message: '请选择上班时间', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ xiaBanShiJian: [
|
|
|
+ { required: true, message: '请选择下班时间', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ bianZhiBuMen: [
|
|
|
+ { required: true, message: '请选择编制部门', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ paiBanBuMen: [
|
|
|
+ { required: true, message: '请选择排班部门', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ bianZhiRen: [
|
|
|
+ { required: true, message: '请选择编制人', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ bianZhiShiJian: [
|
|
|
+ { required: true, message: '请选择编制时间', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ shiFouKuaRi: [
|
|
|
+ { required: true, message: '请选择是否跨日', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ shengXiaoBiaoZhi: [
|
|
|
+ { required: true, message: '请选择生效标志', trigger: 'change' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ dialogVisible: {
|
|
|
+ get() {
|
|
|
+ return this.visible
|
|
|
+ },
|
|
|
+ set(val) {
|
|
|
+ this.$emit('update:visible', val)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dialogTitle() {
|
|
|
+ if (this.readonly) return '班次配置详情'
|
|
|
+ return this.formData.id ? '编辑班次配置' : '新增班次配置'
|
|
|
+ },
|
|
|
+ shangBanTime: {
|
|
|
+ get() {
|
|
|
+ return this.formData.shangBanShiJian
|
|
|
+ },
|
|
|
+ set(val) {
|
|
|
+ this.formData.shangBanShiJian = val
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xiaBanTime: {
|
|
|
+ get() {
|
|
|
+ return this.formData.xiaBanShiJian
|
|
|
+ },
|
|
|
+ set(val) {
|
|
|
+ this.formData.xiaBanShiJian = val
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ visible: {
|
|
|
+ handler(val) {
|
|
|
+ if (val) {
|
|
|
+ this.initFormData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
+ },
|
|
|
+ data: {
|
|
|
+ handler() {
|
|
|
+ if (this.visible) {
|
|
|
+ this.initFormData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getCurrentDateTime() {
|
|
|
+ const now = new Date()
|
|
|
+ const year = now.getFullYear()
|
|
|
+ const month = String(now.getMonth() + 1).padStart(2, '0')
|
|
|
+ const day = String(now.getDate()).padStart(2, '0')
|
|
|
+ const hours = String(now.getHours()).padStart(2, '0')
|
|
|
+ const minutes = String(now.getMinutes()).padStart(2, '0')
|
|
|
+ const seconds = String(now.getSeconds()).padStart(2, '0')
|
|
|
+ return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
|
|
+ },
|
|
|
+ initFormData() {
|
|
|
+ const { first, second } = this.$store.getters.level || {}
|
|
|
+ this.formData.diDian = second || first
|
|
|
+
|
|
|
+ if (this.data && Object.keys(this.data).length > 0) {
|
|
|
+ this.formData = {
|
|
|
+ id: this.data.id || '',
|
|
|
+ peiZhiMingChen: this.data.peiZhiMingChen || '',
|
|
|
+ paiBanLeiXing: this.data.paiBanLeiXing || '',
|
|
|
+ shangBanShiJian: this.data.shangBanShiJian || '',
|
|
|
+ xiaBanShiJian: this.data.xiaBanShiJian || '',
|
|
|
+ shiFouKuaRi: this.data.shiFouKuaRi || 'N',
|
|
|
+ shengXiaoBiaoZhi: this.data.shengXiaoBiaoZhi || 'Y',
|
|
|
+ bianZhiBuMen: this.data.bianZhiBuMen || '',
|
|
|
+ paiBanBuMen: this.data.paiBanBuMen || '',
|
|
|
+ bianZhiRen: this.data.bianZhiRen || '',
|
|
|
+ bianZhiShiJian: this.data.bianZhiShiJian || this.getCurrentDateTime(),
|
|
|
+ shiFouGuoShen: this.data.shiFouGuoShen || '',
|
|
|
+ diDian: this.formData.diDian,
|
|
|
+ paiBanRenYuan: this.data.paiBanRenYuan || ''
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.resetForm()
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.$refs.form) {
|
|
|
+ this.$refs.form.clearValidate()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ resetForm() {
|
|
|
+ const { first, second } = this.$store.getters.level || {}
|
|
|
+ const currentDateTime = this.getCurrentDateTime()
|
|
|
+ const currentUserId = this.$store.getters.userId || ''
|
|
|
+ this.formData = {
|
|
|
+ id: '',
|
|
|
+ peiZhiMingChen: '',
|
|
|
+ paiBanLeiXing: '',
|
|
|
+ shangBanShiJian: '09:00',
|
|
|
+ xiaBanShiJian: '18:00',
|
|
|
+ shiFouKuaRi: 'N',
|
|
|
+ shengXiaoBiaoZhi: 'Y',
|
|
|
+ bianZhiBuMen: '',
|
|
|
+ paiBanBuMen: '',
|
|
|
+ bianZhiRen: currentUserId,
|
|
|
+ bianZhiShiJian: currentDateTime,
|
|
|
+ shiFouGuoShen: '',
|
|
|
+ diDian: second || first,
|
|
|
+ paiBanRenYuan: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleSubmit() {
|
|
|
+ this.$refs.form.validate((valid) => {
|
|
|
+ if (!valid) return
|
|
|
+
|
|
|
+ this.submitLoading = true
|
|
|
+
|
|
|
+ const submitData = { ...this.formData }
|
|
|
+ if (!submitData.diDian) {
|
|
|
+ const { first, second } = this.$store.getters.level || {}
|
|
|
+ submitData.diDian = second || first
|
|
|
+ }
|
|
|
+ // 排班人员已经是逗号分隔的字符串,直接提交
|
|
|
+ Object.keys(submitData).forEach(key => {
|
|
|
+ if (submitData[key] === '') {
|
|
|
+ delete submitData[key]
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ const savePromise = submitData.id
|
|
|
+ ? updateScheduleConfigItem(submitData)
|
|
|
+ : insertScheduleConfigItemBatch([submitData])
|
|
|
+
|
|
|
+ savePromise
|
|
|
+ .then(() => {
|
|
|
+ this.$message.success(submitData.id ? '更新成功' : '新增成功')
|
|
|
+ this.handleClose()
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error(err)
|
|
|
+ this.$message.error(submitData.id ? '更新失败' : '新增失败')
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.submitLoading = false
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleClose() {
|
|
|
+ this.dialogVisible = false
|
|
|
+ this.resetForm()
|
|
|
+ this.$emit('close')
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.schedule-config-dialog {
|
|
|
+ ::v-deep {
|
|
|
+ .el-dialog {
|
|
|
+ border-radius: 4px;
|
|
|
+ &__header {
|
|
|
+ padding: 15px 20px 16px;
|
|
|
+ border-bottom: 1px solid #e8e8e8;
|
|
|
+ }
|
|
|
+ &__title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ &__body {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ &__footer {
|
|
|
+ padding: 10px 20px 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .schedule-config-form {
|
|
|
+ padding: 20px;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+ max-height: 70vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog--center {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|