pub_svc_platform_web/src/views/dataManage/docs-center/index.vue

<template>
    <!-- 文档中心管理 -->
    <div class="app-container">
        <el-form
            size="small"
            :inline="true"
            ref="queryForm"
            :model="queryParams"
        >
            <el-form-item prop="folderName">
                <el-input
                    clearable
                    placeholder="请输入名称"
                    v-model="queryParams.folderName"
                    @keyup.enter.native="onHandleQuery"
                />
            </el-form-item>
            <el-form-item prop="fileType">
                <el-select
                    clearable
                    filterable
                    style="width: 100%"
                    placeholder="请选择类型"
                    v-model="queryParams.fileType"
                >
                    <el-option
                        :key="item.value"
                        :label="item.label"
                        :value="item.label"
                        v-for="item in dict.type.document_type"
                    />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    size="mini"
                    @click="onHandleQuery"
                    icon="el-icon-search"
                >
                    查询
                </el-button>
                <el-button
                    size="mini"
                    icon="el-icon-refresh"
                    @click="onResetQuery"
                >
                    重置
                </el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    plain
                    size="mini"
                    type="primary"
                    icon="el-icon-plus"
                    @click="onHandleAdd"
                >
                    新增
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    plain
                    size="mini"
                    type="primary"
                    icon="el-icon-upload"
                    @click="onHandleImport"
                >
                    导入
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    plain
                    size="mini"
                    type="primary"
                    icon="el-icon-download"
                    @click="onHandleExport"
                >
                    导出
                </el-button>
            </el-col>
        </el-row>

        <!-- 表格 -->
        <el-table :data="tableData" border>
            <el-table-column
                type="index"
                label="序号"
                width="50"
                align="center"
            />
            <el-table-column
                align="center"
                :key="column.prop"
                :prop="column.prop"
                :label="column.label"
                v-for="column in columns"
            >
                <template slot-scope="scope">
                    <template v-if="column.prop === 'isAdmin'">
                        {{
                            scope.row.authList && scope.row.authList.length > 0
                                ? scope.row.authList
                                      .map((item) => item.userName)
                                      .join(',')
                                : '-'
                        }}
                    </template>

                    <template v-else>
                        {{ scope.row[column.prop] }}
                    </template>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button
                        plain
                        size="mini"
                        type="success"
                        style="padding: 4px 8px"
                        @click="onHandleEdit(scope.row)"
                    >
                        编辑
                    </el-button>
                    <el-button
                        plain
                        size="mini"
                        type="danger"
                        style="padding: 4px 8px"
                        @click="onHandleDelete(scope.row)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getDocsCenterListFun"
        />

        <!-- 新增和编辑表单 -->

        <DialogModel
            :dialogConfig="dialogConfig"
            @closeDialogOuter="handleCloseDialogOuter"
        >
            <template #outerContent>
                <AddAndEditForm :editRow="editRow" @closeDialog="closeDialog" />
            </template>
        </DialogModel>
    </div>
</template>

<script>
import AddAndEditForm from './components/addAndEditForm.vue'
import DialogModel from '@/components/DialogModel'
import {
    getDocsCenterListAPI,
    deleteDocsCenterAPI,
} from '@/api/dataManage/docs-center'
export default {
    name: 'DocsCenter',
    dicts: ['document_type'],
    components: {
        AddAndEditForm,
        DialogModel,
    },
    data() {
        return {
            total: 0,
            editRow: null,
            tableData: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                folderName: undefined,
                fileType: undefined,
            },
            columns: [
                {
                    prop: 'folderName',
                    label: '名称',
                },
                {
                    prop: 'fileType',
                    label: '类型',
                },
                {
                    prop: 'isAdmin',
                    label: '管理员',
                },

                {
                    prop: 'remark',
                    label: '描述',
                },
                {
                    prop: 'createUser',
                    label: '创建人',
                },
                {
                    prop: 'createTime',
                    label: '创建时间',
                },
            ],

            dialogConfig: {
                outerTitle: '新增',
                outerVisible: false,
                outerWidth: '70%',
                minHeight: '50vh',
                maxHeight: '90vh',
            },
        }
    },
    methods: {
        onHandleQuery() {
            console.log(this.queryParams)
            this.getDocsCenterListFun()
        },
        onResetQuery() {
            this.queryParams = {
                folderName: undefined,
                fileType: undefined,
                pageNum: 1,
                pageSize: 10,
            }
            this.getDocsCenterListFun()
        },
        onHandleAdd() {
            console.log('新增')
            this.editRow = null
            this.dialogConfig.outerTitle = '新增'
            this.dialogConfig.outerVisible = true
        },
        onHandleImport() {
            console.log('导入')
        },
        onHandleExport() {
            console.log('导出')
        },
        onHandleEdit(row) {
            // console.log('编辑', row)
            this.editRow = row
            this.dialogConfig.outerTitle = '编辑'
            this.dialogConfig.outerVisible = true
        },
        onHandleDelete(row) {
            // console.log('删除', row)
            this.$confirm('确定删除该文档中心吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(async () => {
                const res = await deleteDocsCenterAPI(row.id)
                if (res.code === 200) {
                    this.$modal.msgSuccess('删除成功')
                    this.onHandleQuery()
                }
            })
        },
        // 关闭弹框
        handleCloseDialogOuter() {
            this.dialogConfig.outerVisible = false
        },
        // 关闭弹框 由子组件调用
        closeDialog(isSuccess) {
            this.dialogConfig.outerVisible = false
            if (isSuccess) {
                this.onHandleQuery()
            }
        },
        // 获取列表
        async getDocsCenterListFun() {
            const res = await getDocsCenterListAPI(this.queryParams)
            this.tableData = res?.rows
            this.total = res?.total
        },
    },
    created() {
        this.getDocsCenterListFun()
    },
}
</script>

<style scoped>
.link-text {
    color: #409eff;
    text-decoration: none;
}
.link-text:hover {
    color: #409eff;
    text-decoration: underline;
}
</style>