创建结构

src/views/collect/sound/road/index.vue

@@ -0,0 +1,156 @@
+<template>
+<div class="ele-body">
+    <a-card :bordered="false">
+        <!-- 搜索表单 -->
+        <a-form :model="where" :label-col="{md: {span: 6}, sm: {span: 24}}" :wrapper-col="{md: {span: 18}, sm: {span: 24}}">
+            <a-row>
+                <a-col :lg="6" :md="12" :sm="24" :xs="24">
+                    <a-form-item label="菜单名称:">
+                        <a-input v-model:value.trim="where.title" placeholder="请输入" allow-clear />
+                    </a-form-item>
+                </a-col>
+
+            </a-row>
+        </a-form>
+        <!-- 表格 -->
+        <ele-pro-table ref="table" row-key="ecoRoadSoundBillId" :datasource="url" :columns="columns" :where="where" :scroll="{x: 'max-content'}">
+            <template #toolbar>
+                <a-space>
+                    <a-upload :before-upload="importFile" :show-file-list="false" accept=".xls,.xlsx,.csv">
+                        <a-button>导入excel</a-button>
+                    </a-upload>
+                </a-space>
+            </template>
+            <template #action="{ record }">
+                <a-space>
+                    <a @click="openEdit(null, record.menuId)">添加</a>
+                    <a-divider type="vertical" />
+                    <a @click="openEdit(record)">修改</a>
+                    <a-divider type="vertical" />
+                    <a-popconfirm @confirm="remove(record)" title="确定要删除此菜单吗？">
+                        <a class="ele-text-danger">删除</a>
+                    </a-popconfirm>
+                </a-space>
+            </template>
+        </ele-pro-table>
+    </a-card>
+</div>
+<!-- 编辑弹窗 -->
+</template>
+
+<script>
+import XLSX from 'xlsx';
+import {} from '@ant-design/icons-vue';
+import {
+    pageBillUrl
+} from "@/api/ecology/road_sound";
+export default {
+    name: 'RoadSound',
+    components: {},
+    data() {
+        return {
+            // 表格数据接口
+            url: pageBillUrl,
+            // 表格列配置
+            columns: [{
+                    key: 'index',
+                    dataIndex: 'index',
+                    width: 48,
+                    align: 'center',
+                    customRender: ({
+                        index
+                    }) => index + 1
+                },
+                // {
+                //   title: '菜单名称',
+                //   dataIndex: 'title',
+                //   sorter: true
+                // },
+                {
+                    title: '创建时间',
+                    dataIndex: 'createTime',
+                    sorter: true,
+                    customRender: ({
+                        text
+                    }) => this.$util.toDateString(text)
+                },
+                {
+                    title: '更新时间',
+                    dataIndex: 'updateTime',
+                    sorter: true,
+                    customRender: ({
+                        text
+                    }) => this.$util.toDateString(text)
+                },
+                {
+                    title: '操作',
+                    key: 'action',
+                    width: 150,
+                    align: 'center',
+                    slots: {
+                        customRender: 'action'
+                    }
+                }
+            ],
+            // 表格搜索条件
+            where: {},
+            // 表格选中数据
+            selection: [],
+            // 当前编辑数据
+            current: null,
+        };
+    },
+    methods: {
+
+        /* 刷新表格 */
+        reload() {
+            this.$refs.table.reload({
+                where: this.where
+            });
+        },
+        /* 重置搜索 */
+        reset() {
+            this.where = {};
+            this.reload();
+        },
+        /* 删除单个 */
+        remove(row) {
+            const hide = this.$message.loading('请求中..', 0);
+            this.$http.delete('/sys/menu/' + row.menuId).then(res => {
+                hide();
+                if (res.data.code === 0) {
+                    this.$message.success(res.data.msg);
+                    this.reload();
+                } else {
+                    this.$message.error(res.data.msg);
+                }
+            }).catch(e => {
+                hide();
+                this.$message.error(e.message);
+            });
+        },
+        /* 导入本地excel文件 */
+        importFile(file) {
+            let reader = new FileReader();
+            reader.onload = (e) => {
+                let data = new Uint8Array(e.target.result);
+                let workbook = XLSX.read(data, {
+                    type: 'array'
+                });
+                let sheetNames = workbook.SheetNames;
+                let worksheet = workbook.Sheets[sheetNames[0]];
+                // 解析成二维数组
+                let aoa = XLSX.utils.sheet_to_json(worksheet, {
+                    header: 1
+                });
+                console.log(aoa);
+            };
+            reader.readAsArrayBuffer(file);
+            return false;
+        }
+    }
+}
+</script>
+
+<style scoped>
+</style>