1
lzhe
2024-06-05 dcf9c9e0410fe1186239e3f8d6f7bdc789c08010
src/views/master/time/day-off/index.vue
@@ -1,58 +1,63 @@
<!--
 * @Date: 2024-04-07 20:43:26
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-07 22:50:04
 * @LastEditTime: 2024-04-13 22:13:40
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/master/time/day-off/index.vue
-->
<template>
    <el-container>
        <el-header>
            <el-button :disabled="selections.length ==  0">
                删除
            </el-button>
            <el-button @click="table_add">
                创建
            </el-button>
            <el-select style="width: 200px;margin-left: auto;" v-model="year">
                <el-option v-for="(item, index) in years" :key="index" :label="item" :value="item"></el-option>
            </el-select>
            <el-date-picker style="width: 200px;flex: 0  0 auto;margin-left: 8px;" v-model="date" type="daterange"
                range-separator="至" start-placeholder="开始" end-placeholder="结束" />
        </el-header>
        <el-main>
            <scTable highlight-current-row @dataChange="dataChange" @row-click="rowClick" ref="table" :params="params"
                :apiObj="apiObj" @selection-change="selectionChange" stripe>
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column label="所属年份" prop="year"></el-table-column>
                <el-table-column label="日期" prop="startOffDay">
                    <template #default="scope">
                        <span>{{ scope.row.startOffDay }}-{{ scope.row.endOffDay }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="休息日说明" prop="remark"></el-table-column>
                <el-table-column label="操作" fixed="right" align="right" width="160">
                    <template #default="scope">
                        <el-button-group>
                            <el-button text type="primary" size="small"
                                @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                            <el-popconfirm title="确定删除吗?" @confirm="table_del(scope.row, scope.$index, '0')">
                                <template #reference>
                                    <el-button text type="primary" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
        <Dialog @success="success" ref="dialog" :option="{
            years
        }"></Dialog>
    </el-container>
    <el-main>
        <el-card shadow="never">
            <el-container>
                <el-header>
                    <el-button :disabled="selections.length == 0" @click="dels">
                        删除
                    </el-button>
                    <el-button @click="table_add">
                        创建
                    </el-button>
                    <el-select style="width: 200px;margin-left: auto;" v-model="year" @change="query">
                        <el-option v-for="(item, index) in years" :key="index" :label="item" :value="item"></el-option>
                    </el-select>
                    <el-date-picker @change="query" style="width: 300px;flex: 0  0 auto;margin-left: 8px;"
                        v-model="date" type="daterange" range-separator="至" start-placeholder="开始" end-placeholder="结束"
                        value-format="YYYY-MM-DD" />
                </el-header>
                <el-main>
                    <scTable highlight-current-row ref="table" :params="{}" :apiObj="apiObj"
                        @selection-change="selectionChange" stripe>
                        <el-table-column type="selection" width="50"></el-table-column>
                        <el-table-column label="所属年份" prop="year"></el-table-column>
                        <el-table-column label="日期" prop="startOffDay">
                            <template #default="scope">
                                <span>{{ scope.row.startOffDay }}-{{ scope.row.endOffDay }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="休息日说明" prop="remark"></el-table-column>
                        <el-table-column label="操作" fixed="right" align="right" width="160">
                            <template #default="scope">
                                <el-button-group>
                                    <el-button text type="primary" size="small"
                                        @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                                    <el-popconfirm title="确定删除吗?" @confirm="table_del(scope.row, scope.$index, '0')">
                                        <template #reference>
                                            <el-button text type="primary" size="small">删除</el-button>
                                        </template>
                                    </el-popconfirm>
                                </el-button-group>
                            </template>
                        </el-table-column>
                    </scTable>
                </el-main>
                <Dialog @success="success" ref="dialog" :option="{
                    years
                }"></Dialog>
            </el-container>
        </el-card>
    </el-main>
</template>
<script>
import Dialog from  './Dialog.vue'
import Dialog from './Dialog.vue'
export default {
    components: {
        Dialog
@@ -61,7 +66,7 @@
        return {
            year: '',
            date: '',
            apiObj:  '',
            apiObj: '',
            selections: [],
            years: []
        }
@@ -74,23 +79,38 @@
        }
        this.years = years;
        this.apiObj = this.$API.time.getList
        this.year = new Date().getFullYear()
        this.date = [`${this.year}-01-01`, `${this.year}-12-31`]
    },
    methods: {
        table_add () {
        table_add() {
            this.$refs.dialog.open()
        },
        table_edit (row) {
        table_edit(row) {
            this.$refs.dialog.open('edit', row)
        },
        table_del () {
        query() {
            this.$refs.table.reload({
                year: this.year,
                startOffDay: this.date[0] || '',
                endOffDay: this.date[1] || ''
            })
        },
        dataChange () {},
        rowClick () {},
        selectionChange (selections) {
        table_del(row) {
            this.$API.time.remove.delete([row.id]).then(res => {
                this.query()
            })
        },
        dels() {
            this.$API.time.remove.delete([...this.selections.map(item => item.id)]).then(res => {
                this.query()
            })
        },
        selectionChange(selections) {
            this.selections = selections
        },
        success () {
            this.$refs.table.reload()
        success() {
            this.query()
        }
    }
}