hz_crm_web/src/views/system_manage/updateLogManage.vue

<template>
    <div class="update-log-manage-wrap">
        <div class="top-wrap">
            <el-button type="primary" @click="isLogSetShow=true">添加日志</el-button>
            <!-- <el-date-picker
                v-model="timeRange"
                type="daterange"
                clearable
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker> -->
            <el-input v-model="searchText" @input="getTableData"
                prefix-icon="el-icon-search" placeholder="输入更新内容检索" clearable></el-input>
        </div>
        <div class="table-wrap">
            <el-table :data="tableData" 
            @sort-change="sortChangeHandle" border>
                <el-table-column 
                    v-for="item in tableColumns" :key="item.key"
                    :label="item.label" :sortable="item.sort" 
                    align="center"
                    >

                    <template slot-scope="{row}">
                        <div v-if="item.key==='Content'" v-html="row[item.key]"></div>
                        <span v-else>{{ row[item.key] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="{row}">
                        <el-button type="text" @click="handleEditLog(row)">编辑</el-button>
                        <el-button type="text" style="color: red;" @click="handleDeleteLog(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination 
                layout="prev,pager,next,total" 
                background
                :current-page="pageNo"
                @current-change="currentChange"
                :page-size="pageSize" 
                :total="total"
                >
            </el-pagination>
        </div>
        <LogSetDialog 
            :isLogSetShow="isLogSetShow"
            :logInfo="logInfo"
            @saveLog="saveLog"
            @close="()=>{logInfo = {};isLogSetShow = false}"
        />
    </div>
</template>

<script>
import LogSetDialog from './components/logSetDialog.vue';
import {updateLogInterface} from '@/api/modules/updateLogApi';
export default {
    components: { LogSetDialog },
    data() {
        return {
            /* select */
            timeRange: null,
            searchText: '',
            /* dialog */
            logInfo:{},
            isLogSetShow:false,
            /* table */
            tableData: [],
            tableColumns: [
                {
                    label: '更新内容',
                    key: 'Content'
                },
                {
                    label: '版本号',
                    key: 'Version'
                },
                {
                    label: '更新日期',
                    key: 'UpdateDate',
                    sort:true
                },
            ],
            pageNo: 1,
            pageSize: 10,
            total: 0,
            sortType:0,
        };
    },
    methods: {
        getTableData(){
            updateLogInterface.getLogList({
                Keyword:this.searchText,
                SortType:this.sortType,
                CurrentIndex:this.pageNo,
                PageSize:this.pageSize
            }).then(res=>{
                if(res.Ret!==200) return 
                this.tableData = res.Data.List||[]
                this.total = res.Data.Paging.Totals
            })
        },
        currentChange(page) {
            this.pageNo = page;
            this.getTableData()
        },
        sortChangeHandle(params){
            this.sortType = params.order === 'ascending' ? 1 :params.order === 'descending' ? 2 : 0
            this.pageNo = 1
            this.getTableData()
        },
        handleEditLog(row){
            this.logInfo = row
            this.isLogSetShow = true
        },
        handleDeleteLog(row){
            //二次确认
            this.$confirm('删除操作不可恢复，确认删除吗?','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                updateLogInterface.deleteLogData({Id:row.Id}).then(res=>{
                    if(res.Ret!==200) return
                    this.$message.success('删除成功')
                    this.getTableData()
                })
            }).catch(() => {});
        },
        async saveLog(form){
            const res = form.Id
                        ?await updateLogInterface.editLogData(form)
                        :await updateLogInterface.addLogData(form)
            if(res.Ret!==200) return 
            this.$message.success(`${form.Id?'编辑':'添加'}成功`)
            this.getTableData()
            this.isLogSetShow = false
        }
    },
    mounted(){
        this.getTableData()
    }
    
};
</script>

<style scoped lang="scss">
.update-log-manage-wrap{
    padding:30px;
    background-color: #fff;
    border-radius: 4px;
    .top-wrap{
        display: flex;
        justify-content: space-between;
        .el-date-editor{
            margin-left: auto;
        }
        .el-input{
            margin-left:30px;
            width:420px;
        }
    }
    .table-wrap{
        margin-top: 30px;
        .el-pagination{
            margin-top: 30px;
            text-align: right;
        }
    }

}
</style>