<template>
    <el-dialog 
        title="表单修改记录"
        v-if="modifyRecordDialog"
        :visible.sync="modifyRecordDialog"
        :close-on-click-modal="false"
    >
        <ht-table
            @load="loadRecordData"
            :data="data"
            :pageResult="pageResult"
            quick-search-props="userName,taskName"
            ref="htTable"
            :show-export="false"
            :show-custom-column="false"
            :defaultQuerys="[
            { property: 'instId', value: instId, operation: 'EQUAL'}]"
        >
            <template v-slot:toolbar>
                <el-button-group>
                    <ht-delete-button
                        :url="deleteUrl"
                        :htTable="$refs.htTable"
                        @after-delete="$refs.htTable.load();"
                    >删除</ht-delete-button>
                </el-button-group>
            </template>
            <template>
                <ht-table-column type="index" width="50" align="center" label="序号" />
                <ht-table-column prop="userName" label="修改人"  width="140" />
                <ht-table-column prop="taskName" label="任务名称"  width="140" />
                <ht-table-column prop="reason" label="审批意见" show-overflow-tooltip width="200" />
                <ht-table-column prop="modifyTime" label="修改时间" width="160" />
                <ht-table-column prop="detail" label="修改详情" show-overflow-tooltip>
                    <template v-slot="{row}">
                        <el-link type="primary" @click="openModifyDetail(row)" title="查看明细" >{{row.detail}}</el-link>
                    </template>
                </ht-table-column>
            </template>
        </ht-table>

        <el-dialog
            width="60%"
            title="修改明细"
            :visible.sync="detailDialogVisible"
            
            :append-to-body="true"
            :close-on-click-modal="false"
            >
            <el-form v-if="detailDialogVisible" v-model="curRow" data-vv-scope="editModifyForm">
                <ht-input style="width:100%" type="textarea" v-model="curRow.detail" :rows="20" :readonly="true" />
            </el-form>
        </el-dialog>
    </el-dialog>
</template>

<script>


export default {
    name:"modifyRecord",
    props: ["instId"],
    components: {},
    data() {
        return {
            modifyRecordDialog:false,
            detailDialogVisible:false,
            data: [],
            curRow:{},
            pageResult: {
                page: 1,
                pageSize: 20,
                total: 0
            },
        };
    },
    computed:{
        deleteUrl: function() {
            return window.context.bpmRunTime + "/bpm/boDataModifyRecord/v1/remove";
        }
    },
    mounted() {
        
    },
    methods: {
        handleClose(done) {
            this.modifyRecordDialog = true;
        },
        openModifyDetail(row) {
            this.curRow = row;
            this.detailDialogVisible = true;
        },
        loadRecordData(param, cb) {
            let this_ = this;
            this.$http.post(window.context.bpmRunTime + "/bpm/boDataModifyRecord/v1/listJson",param)
            .then(data => {
                let response = data.data;
                this.data = response.rows;
                this.pageResult = {
                    page: response.page,
                    pageSize: response.pageSize,
                    total: response.total
            };
        })
        .finally(() => cb());
        },
    }
}
</script>

<style>

</style>