hlt_gis_admin/src/views/dataAdmin/dataAdmin/resVersion/ResHistoryVersionModal.vue

<!-- 资源的历史版本查询弹窗 -->
<template>
    <BasicModal :maskClosable="false" :width="1430" @register="registerModal" v-bind="$attrs" :title="title" centered
        :showOkBtn="false" :showCancelBtn="false" wrapClassName="res-history-version-modal" :footer="null">
        <div class="custom-content">
            <div class="right-header">
                <div class="search">
                    <span class="label">资源名称：</span>
                    <a-input v-model:value="searchValue" placeholder="输入关键字查询" allow-clear />
                </div>
                <div class="handle-btns">
                    <a-button class="btn" @click="resetTable">重置</a-button>
                    <a-button class="btn" type="primary" @click="searchTable">查询</a-button>
                </div>
            </div>
            <div class="right-body">
                <BasicTable @register="registerTable">
                    <template #action="{ record }">
                        <TableAction :actions="[
                            {
                                label: '选择',
                                tooltip: '选择',
                                onClick: handleSelectRes.bind(null, record),
                            }
                        ]" />
                    </template>
                </BasicTable>
            </div>
        </div>
    </BasicModal>
</template>
<script>
import { defineComponent, reactive, ref, onMounted, watch, computed } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
// 导入表格组件，表格事件
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { Button, message } from 'ant-design-vue';
import { getResVersionList } from '/@/api/sys/version';
import { session } from '/@/utils/Memory';
import moment from 'moment';

export default defineComponent({
    name: 'VersionResModal',
    components: { BasicModal, BasicTable, TableAction, Button },
    setup(_, { emit }) {
        const title = ref('');
        const currentType = ref('')
        const searchValue = ref('')
        const typeObj = {
            MR: "地图资源",
            ER: "场景资源",
            DR: "文件资源",
            SR: "组件服务",
            interface: "接口服务"
        }
        const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
            console.log(data)
            title.value = `【${typeObj[data.type]}】历史版本查询`
            currentType.value = data.type
            reload();
        });

        const getResData = () => {
            return new Promise((resolve, reject) => {
                let params = {
                    isgl: 1,
                    keyStr: searchValue.value,
                    serviceType: currentType.value
                }
                getResVersionList(params).then(res => {
                    if (res.resp_code === 0 && res.datas) {
                        let resData = res.datas.pageData;
                        resData.forEach(item => {
                            item.type = typeObj[item.RESOURCE_TYPE]
                        })
                        resolve(resData)
                    }
                    else {
                        resolve([])
                        message.error(res.resp_msg)
                    }
                })
            })
        }
        //表格列
        const columns = [
            {
                title: '资源类型',
                align: 'center',
                dataIndex: 'type',
                key: 'type'
            },
            {
                title: '资源名称',
                align: 'center',
                dataIndex: 'SERVICENAME',
                key: 'SERVICENAME'
            },
            {
                title: '版本',
                align: 'center',
                dataIndex: 'VERSION_NAME',
                key: 'VERSION_NAME'
            },
            {
                title: '版本号',
                align: 'center',
                dataIndex: 'VERSION',
                key: 'VERSION'
            },
            {
                title: '操作时间',
                align: 'center',
                dataIndex: 'MODIFY_DATE',
                key: 'MODIFY_DATE'
            },
            {
                title: '操作人',
                align: 'center',
                dataIndex: 'USER_NAME',
                key: 'USER_NAME'
            }
        ];
        const [
            registerTable,
            { reload, collapseAll, getRowSelection, getSelectRowKeys, setSelectedRowKeys },
        ] = useTable({
            title: '资源列表', //'菜单列表'
            api: getResData, //加载数据
            columns: columns,
            useSearchForm: false,     //开启搜索区域
            bordered: false,
            showTableSetting: true,  // 显示表格设置
            tableSetting: {
                redo: true,
                size: true,
                setting: false,
                fullScreen: false
            },
            showIndexColumn: true,
            pagination: {
                hideOnSinglePage: false
            },
            rowKey: (record) => record.SERVICEID,
            actionColumn: {
                width: 200,
                title: '操作',
                dataIndex: 'action',
                slots: { customRender: 'action' },
            }
        });
        //表格查询功能
        const searchTable = () => {
            reload()
        }
        //重置
        const resetTable = () => {
            searchValue.value = '';
            reload();
        }
        // 历史版本
        const handleSelectRes = (record) => {
            const detail = [
                {
                    label: "资源类型",
                    value: record.type
                },
                {
                    label: "资源名称",
                    value: record.SERVICENAME
                },
                {
                    label: "版本名称",
                    value: record.VERSION_NAME
                },
                {
                    label: "版本号",
                    value: record.VERSION
                },
                {
                    label: "版本时间",
                    value: record.MODIFY_DATE
                }
            ]
            const historyResId = record.SERVICEID;
            const historyVersionId = record.VERSION_ID;
            emit('select', { info: detail, resId: historyResId, versionId: historyVersionId });
            closeModal();
        }
        return {
            title,
            currentType,
            searchValue,
            registerModal,
            registerTable,
            resetTable,
            searchTable,

            handleSelectRes
        };
    },
});
</script>
<style lang="less">
.res-history-version-modal {

    .ant-modal-content {
        background-color: #eff0f5;

        .scroll-container .scrollbar__wrap {
            margin-bottom: 0 !important;
        }
    }
}
</style>
<style lang="less" scoped>
.custom-content {

    .right-header {
        margin-bottom: 10px;
        height: 74px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        background-color: #ffffff;
        border-radius: 6px;
        justify-content: space-between;

        .search {
            display: flex;
            align-items: center;

            .label {
                width: 120px;
            }
        }

        .handle-btns {
            display: flex;
            align-items: center;

            .btn {
                margin-left: 10px;
            }
        }
    }

    .right-body {
        padding: 0 20px;
        height: calc(100% - 84px);
        background-color: #ffffff;
        border-radius: 6px;
    }
}
</style>