lzhe
2024-04-08 8999cef96b06012ca240dba7b918525df611fb71
src/views/master/time/day-off/Dialog.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,133 @@
<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')">
        <el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="120px"
            label-position="center">
            <el-row>
                <el-col :span="13">
                    <el-form-item label="年份" prop="year">
                        <el-select style="width: 240px;" v-model="form.year">
                            <el-option v-for="(item, index) in option.years" :key="index" :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="13">
                    <el-form-item label="日期" prop="date">
                        <el-date-picker value-format="YYYY-MM-DD" style="width: 240px;" v-model="form.date" type="daterange"
                range-separator="至" start-placeholder="开始" end-placeholder="结束" />
                    </el-form-item>
                </el-col>
                <el-col :span="13">
                    <el-form-item label="备注"  prop="remark">
                        <el-input style="width: 240px;" v-model="form.remark" type="textarea"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="visible = false">取 æ¶ˆ</el-button>
            <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 å­˜</el-button>
        </template>
    </el-dialog>
</template>
<script>
import deepmerge from 'deepmerge'
import http from "@/utils/request"
export default {
    emits: ['success', 'closed'],
    props: {
        option: {
            type: Object
        }
    },
    data() {
        return {
            mode: "add",
            titleMap: {
                add: '新建休息日',
                edit: '编辑休息日',
                // show: '查看'
            },
            visible: false,
            isSaveing: false,
            //表单数据
            form: {
                id: '',
                remark: "",
                year: '',
                date: ''
            },
            //验证规则
            rules: {
                year: [
                    { required: true, message: '请选择' }
                ],
                date: [
                    { required: true, message: '请选择' }
                ],
            },
        }
    },
    created() {
    },
    methods: {
        //显示
        open(mode = 'add', params) {
            this.mode = mode;
            this.visible = true;
            this.isSaveing = false;
            if (params)  {
                let {remark,year,startOffDay,endOffDay,id} = params
                this.form.remark = remark
                this.form.year = year
                this.form.date = [startOffDay,endOffDay]
                this.form.id = id
            } else {
                this.form.remark = ''
                this.form.year = ''
                this.form.date = []
                this.form.id = ''
            }
            return this
        },
        //表单提交方法
        submit() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    this.isSaveing = true;
                    let {remark,year,id} = this.form
                    let [startOffDay = '',endOffDay =  ''] = this.form.date
                    let data = {
                        endOffDay,
                        remark,
                        startOffDay,
                        year,
                        id
                    }
                    console.log('------',this.form.id)
                    let key = this.form.id ? 'update' :  'insert'
                    var res = await this.$API.time[key].post(data);
                    this.isSaveing = false;
                    if (res.code == 200) {
                        this.$emit('success', this.form, this.mode)
                        this.visible = false;
                        this.$message.success("操作成功")
                    } else {
                        this.$alert(res.message, "提示", { type: 'error' })
                    }
                } else {
                    this.isSaveing = false;
                    return false;
                }
            })
        },
        //表单注入数据
        setData(data) {
        }
    }
}
</script>
<style></style>