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="name">
                <el-input
                    clearable
                    placeholder="请输入名称"
                    v-model="queryParams.name"
                    @keyup.enter.native="onHandleQuery"
                />
            </el-form-item>
            <el-form-item prop="status">
                <el-select
                    clearable
                    filterable
                    placeholder="选择类型"
                    v-model="queryParams.type"
                >
                    <el-option value="1" label="智慧基建" />
                    <el-option value="2" label="智慧后勤" />
                    <el-option value="3" label="数智装备" />
                </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 === 'file'"> 附件 </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>

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

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

<script>
import AddAndEditForm from './components/addAndEditForm.vue'
import DialogModel from '@/components/DialogModel'
export default {
    name: 'DocsCenter',
    components: {
        AddAndEditForm,
        DialogModel,
    },
    data() {
        return {
            tableData: [
                {
                    name: '产品1',
                    type: '智慧基建',
                    version: '1.0.0',
                    admin: '张三',
                    description: '描述',
                    createBy: 'admin',
                },
                {
                    name: '产品2',
                    type: '智慧后勤',
                    version: '1.0.0',
                    admin: '张三',
                    description: '描述',
                    createBy: 'admin',
                },
            ],
            queryParams: {
                name: undefined,
                type: undefined,
            },
            columns: [
                {
                    prop: 'name',
                    label: '名称',
                },
                {
                    prop: 'type',
                    label: '类型',
                },
                {
                    prop: 'admin',
                    label: '管理员',
                },

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

            dialogConfig: {
                outerTitle: '新增',
                outerVisible: false,
                outerWidth: '70%',
                minHeight: '50vh',
                maxHeight: '90vh',
            },
        }
    },
    methods: {
        onHandleQuery() {
            console.log(this.queryParams)
        },
        onResetQuery() {
            this.queryParams = {
                name: undefined,
                type: undefined,
            }
        },
        onHandleAdd() {
            console.log('新增')
            this.dialogConfig.outerTitle = '新增'
            this.dialogConfig.outerVisible = true
        },
        onHandleImport() {
            console.log('导入')
        },
        onHandleExport() {
            console.log('导出')
        },
        onHandleEdit(row) {
            console.log('编辑', row)
            this.dialogConfig.outerTitle = '编辑'
            this.dialogConfig.outerVisible = true
        },
        onHandleDelete(row) {
            console.log('删除', row)
        },
        // 关闭弹框
        handleCloseDialogOuter() {
            this.dialogConfig.outerVisible = false
        },
        // 关闭弹框 由子组件调用
        closeDialog(isSuccess) {
            this.dialogConfig.outerVisible = false
            if (isSuccess) {
                this.onHandleQuery()
            }
        },
    },
    created() {
        // this.onHandleQuery()
    },
}
</script>

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