改变结构
添加权限指令
This commit is contained in:
weicw
@@ -1,164 +0,0 @@
|
||||
<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: 'SystemMenu',
|
||||
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,
|
||||
|
||||
// 全部菜单数据
|
||||
menuList: []
|
||||
};
|
||||
},
|
||||
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>
|
||||
@@ -1,158 +0,0 @@
|
||||
<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: 'SystemMenu',
|
||||
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,
|
||||
|
||||
// 全部菜单数据
|
||||
menuList: []
|
||||
};
|
||||
},
|
||||
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>
|
||||
@@ -1,245 +0,0 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card" style="padding-bottom: 48px;">
|
||||
<a-card title="发布实训活动" :bordered="false">
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{ md: {span: 18}, sm: {span: 24}}">
|
||||
<a-row :gutter="16">
|
||||
<a-col :md="8" :sm="24" :xs="24">
|
||||
<a-form-item label="实训名称:" name="title">
|
||||
<a-input
|
||||
v-model:value="form.title"
|
||||
placeholder="请输入实训名称"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24" :xs="24">
|
||||
<a-form-item label="起止日期:" name="datetime">
|
||||
<a-range-picker
|
||||
v-model:value="form.datetime"
|
||||
class="ele-fluid">
|
||||
<template #suffixIcon>
|
||||
<calendar-outlined/>
|
||||
</template>
|
||||
</a-range-picker>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24" :xs="24">
|
||||
<a-form-item label="实训地点:" name="address">
|
||||
<a-select
|
||||
v-model:value="form.address"
|
||||
placeholder="请选择地点"
|
||||
allow-clear>
|
||||
<a-select-option value="1">地点一</a-select-option>
|
||||
<a-select-option value="2">地点二</a-select-option>
|
||||
<a-select-option value="2">地点三</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item
|
||||
label="实训内容:"
|
||||
name="content"
|
||||
:label-col="{md: {span: 2}, sm: {span: 24}}"
|
||||
:wrapper-col="{ md: {span: 22}, sm: {span: 24}}">
|
||||
<a-textarea
|
||||
v-model:value="form.content"
|
||||
placeholder="请输入实训内容"
|
||||
:rows="4"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
<a-card title="选择实训班级:" :bordered="false">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<!-- 未选择的班级数据表格 -->
|
||||
<ele-pro-table
|
||||
bordered
|
||||
:toolkit="[]"
|
||||
:columns="columns"
|
||||
row-key="classesId"
|
||||
sub-title="未选班级:"
|
||||
empty-text="已全部选择"
|
||||
tools-theme="default"
|
||||
:show-size-changer="false"
|
||||
:datasource="unChooseClass"
|
||||
:scroll="{x: 'max-content'}">
|
||||
<template #toolkit>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="addAll">全部添加
|
||||
</a-button>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="add(record)">添加
|
||||
</a-button>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-col>
|
||||
<a-col :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<!-- 已选择的班级数据表格 -->
|
||||
<ele-pro-table
|
||||
bordered
|
||||
:toolkit="[]"
|
||||
:columns="columns"
|
||||
row-key="classesId"
|
||||
sub-title="已选班级:"
|
||||
emptyText="未选择班级"
|
||||
tools-theme="default"
|
||||
:show-size-changer="false"
|
||||
:datasource="chooseClasses"
|
||||
:scroll="{x: 'max-content'}">
|
||||
<template #toolkit>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
@click="removeAll">全部移除
|
||||
</a-button>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-button
|
||||
size="small"
|
||||
danger
|
||||
type="primary"
|
||||
@click="remove(record)">移除
|
||||
</a-button>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
<!-- 底部工具栏 -->
|
||||
<div class="ele-bottom-tool">
|
||||
<div class="ele-bottom-tool-actions">
|
||||
<a-button
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="submit">提交
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {CalendarOutlined} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'ExampleChoose',
|
||||
components: {CalendarOutlined},
|
||||
data() {
|
||||
return {
|
||||
// 加载状态
|
||||
loading: false,
|
||||
// 表单数据
|
||||
form: {},
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
title: [
|
||||
{required: true, message: '请输入实训名称', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
datetime: [
|
||||
{required: true, message: '请选择起止日期', type: 'array', trigger: 'blur'}
|
||||
],
|
||||
address: [
|
||||
{required: true, message: '请选择实训地点', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
content: [
|
||||
{required: true, message: '请输入实训内容', type: 'string', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 全部实训班级
|
||||
classes: [],
|
||||
// 已选择的班级数据
|
||||
chooseClasses: [],
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
width: 90,
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
align: 'center',
|
||||
slots: {customRender: 'action'}
|
||||
},
|
||||
{
|
||||
title: '班级名称',
|
||||
dataIndex: 'classesName'
|
||||
},
|
||||
{
|
||||
title: '专业',
|
||||
dataIndex: 'major'
|
||||
},
|
||||
{
|
||||
title: '学院',
|
||||
dataIndex: 'college'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
/* 未选择的班级数据 */
|
||||
unChooseClass() {
|
||||
return this.classes.filter(d => this.chooseClasses.indexOf(d) === -1);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.query();
|
||||
},
|
||||
methods: {
|
||||
/* 获取全部实训班级 */
|
||||
query() {
|
||||
this.$http.get('https://cdn.eleadmin.com/20200610/classes.json').then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.classes = res.data.data;
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 提交 */
|
||||
submit() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
if (!this.chooseClasses.length) {
|
||||
this.$message.error('请选择实训班级');
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.$message.success('提交成功');
|
||||
}, 1500);
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 添加 */
|
||||
add(row) {
|
||||
this.chooseClasses.push(row);
|
||||
},
|
||||
/* 移除 */
|
||||
remove(row) {
|
||||
this.chooseClasses.splice(this.chooseClasses.indexOf(row), 1);
|
||||
},
|
||||
/* 添加全部 */
|
||||
addAll() {
|
||||
this.unChooseClass.forEach(d => {
|
||||
this.chooseClasses.push(d);
|
||||
})
|
||||
},
|
||||
/* 移除所有 */
|
||||
removeAll() {
|
||||
this.chooseClasses.splice(0, this.chooseClasses.length);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,290 +0,0 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:width="1200"
|
||||
:visible="visible"
|
||||
title="卷内文件调整"
|
||||
@update:visible="updateVisible"
|
||||
@cancel="close"
|
||||
@ok="save">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
bordered
|
||||
ref="docTable"
|
||||
row-key="piece_no"
|
||||
sub-title="案卷列表"
|
||||
:columns="columns1"
|
||||
:datasource="documents"
|
||||
v-model:current="current"
|
||||
:scroll="{x: 'max-content'}"
|
||||
:row-selection="{columnWidth: 48}"
|
||||
:tool-style="{padding: '7px 14px'}"
|
||||
tools-theme="default"
|
||||
:need-page="false"
|
||||
:toolkit="[]">
|
||||
</ele-pro-table>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
bordered
|
||||
ref="fileTable"
|
||||
:loading="loading"
|
||||
sub-title="卷内列表"
|
||||
:datasource="data1"
|
||||
:columns="columns2"
|
||||
row-key="archive_no"
|
||||
tools-theme="default"
|
||||
:scroll="{x: 'max-content'}"
|
||||
v-model:selection="selection1"
|
||||
:row-selection="{columnWidth: 48}"
|
||||
:need-page="false"
|
||||
:toolkit="[]">
|
||||
<template #toolkit>
|
||||
<a-space>
|
||||
<a-button
|
||||
@click="moveUp"
|
||||
type="primary"
|
||||
class="ele-btn-icon">
|
||||
<span><arrow-up-outlined/>上移</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
@click="moveDown">
|
||||
<span><arrow-down-outlined/>下移</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
@click="moveOut">
|
||||
<span>调出<arrow-right-outlined/></span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
bordered
|
||||
:loading="loading"
|
||||
:datasource="data2"
|
||||
:columns="columns2"
|
||||
sub-title="未归档列表"
|
||||
row-key="archive_no"
|
||||
tools-theme="default"
|
||||
:scroll="{x: 'max-content'}"
|
||||
v-model:selection="selection2"
|
||||
:row-selection="{columnWidth: 48}"
|
||||
:need-page="false"
|
||||
:toolkit="[]">
|
||||
<template #toolkit>
|
||||
<a-button
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
@click="moveIn">
|
||||
<span><arrow-left-outlined/>调入</span>
|
||||
</a-button>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
ArrowUpOutlined,
|
||||
ArrowDownOutlined,
|
||||
ArrowLeftOutlined,
|
||||
ArrowRightOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'FileSort',
|
||||
components: {
|
||||
ArrowUpOutlined,
|
||||
ArrowDownOutlined,
|
||||
ArrowLeftOutlined,
|
||||
ArrowRightOutlined
|
||||
},
|
||||
props: {
|
||||
// 弹窗是否打开
|
||||
visible: Boolean,
|
||||
// 案卷列表
|
||||
documents: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
emits: ['update:visible'],
|
||||
data() {
|
||||
return {
|
||||
// 案卷表格列配置
|
||||
columns1: [
|
||||
{
|
||||
title: '案卷题名',
|
||||
dataIndex: 'title'
|
||||
},
|
||||
{
|
||||
title: '案卷档号',
|
||||
dataIndex: 'piece_no'
|
||||
}
|
||||
],
|
||||
// 卷内表格列配置
|
||||
columns2: [
|
||||
{
|
||||
title: '文件题名',
|
||||
dataIndex: 'title'
|
||||
},
|
||||
{
|
||||
title: '文件档号',
|
||||
dataIndex: 'archive_no'
|
||||
}
|
||||
],
|
||||
// 案卷下的全部文件列表
|
||||
data: [],
|
||||
// 选中案卷
|
||||
current: null,
|
||||
// 加载loading
|
||||
loading: true,
|
||||
// 卷内列表选中数据
|
||||
selection1: [],
|
||||
// 未归档列表选中数据
|
||||
selection2: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 选中案卷的卷内文件
|
||||
data1() {
|
||||
if (!this.current) {
|
||||
return [];
|
||||
}
|
||||
return this.data.filter(d => d.piece_no === this.current.piece_no);
|
||||
},
|
||||
// 未归档的卷内文件
|
||||
data2() {
|
||||
return this.data.filter(d => !d.piece_no);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 查询所选案卷的卷内文件 */
|
||||
query() {
|
||||
this.loading = true;
|
||||
this.$http.get('https://cdn.eleadmin.com/20200610/archive.json').then(res => {
|
||||
this.loading = false;
|
||||
if (res.data.code === 0) {
|
||||
this.data = res.data.data;
|
||||
this.current = this.documents[0];
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.loading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 上移 */
|
||||
moveUp() {
|
||||
if (!this.selection1.length) {
|
||||
this.$message.error('请选择一条数据');
|
||||
return;
|
||||
}
|
||||
if (this.selection1.length > 1) {
|
||||
this.$message.error('只能选择一条数据');
|
||||
return;
|
||||
}
|
||||
if (this.data1.indexOf(this.selection1[0]) === 0) {
|
||||
return;
|
||||
}
|
||||
let index = this.data.indexOf(this.selection1[0]);
|
||||
let old = this.data[index - 1];
|
||||
this.data[index - 1] = this.selection1[0];
|
||||
this.data[index] = old;
|
||||
this.selection1 = [this.data[index - 1]];
|
||||
},
|
||||
/* 下移 */
|
||||
moveDown() {
|
||||
if (!this.selection1.length) {
|
||||
this.$message.error('请选择一条数据');
|
||||
return;
|
||||
}
|
||||
if (this.selection1.length > 1) {
|
||||
this.$message.error('只能选择一条数据');
|
||||
return;
|
||||
}
|
||||
if (this.data1.indexOf(this.selection1[0]) === this.data1.length - 1) {
|
||||
return;
|
||||
}
|
||||
let index = this.data.indexOf(this.selection1[0]);
|
||||
let old = this.data[index + 1];
|
||||
this.data[index + 1] = this.selection1[0];
|
||||
this.data[index] = old;
|
||||
this.selection1 = [this.data[index + 1]];
|
||||
},
|
||||
/* 调出 */
|
||||
moveOut() {
|
||||
if (!this.selection1.length) {
|
||||
this.$message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
this.selection1.forEach(d => {
|
||||
d.piece_no = '';
|
||||
});
|
||||
this.selection1 = [];
|
||||
},
|
||||
/* 调入 */
|
||||
moveIn() {
|
||||
if (!this.current) {
|
||||
return;
|
||||
}
|
||||
if (!this.selection2.length) {
|
||||
this.$message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
this.selection2.forEach(d => {
|
||||
d.piece_no = this.current.piece_no;
|
||||
});
|
||||
this.selection2 = [];
|
||||
},
|
||||
/* 保存 */
|
||||
save() {
|
||||
let result = this.data.map(d => {
|
||||
return {
|
||||
archive_no: d.archive_no,
|
||||
piece_no: d.piece_no
|
||||
};
|
||||
});
|
||||
console.log(result);
|
||||
this.$message.success('调整成功');
|
||||
this.close();
|
||||
},
|
||||
/* 关闭弹窗 */
|
||||
close() {
|
||||
this.data = [];
|
||||
this.selection1 = [];
|
||||
this.selection2 = [];
|
||||
this.updateVisible(false);
|
||||
},
|
||||
/* 更新visible */
|
||||
updateVisible(value) {
|
||||
this.$emit('update:visible', value);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible() {
|
||||
if (this.visible) {
|
||||
this.query();
|
||||
}
|
||||
},
|
||||
current() {
|
||||
this.selection1 = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,108 +0,0 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="table"
|
||||
title="案卷列表"
|
||||
row-key="piece_no"
|
||||
:datasource="url"
|
||||
:columns="columns"
|
||||
v-model:selection="selection"
|
||||
:scroll="{x:'max-content'}">
|
||||
<template #toolkit>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="openFileSort">卷内文件调整
|
||||
</a-button>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
<!-- 卷内文件调整弹窗 -->
|
||||
<file-sort
|
||||
v-model:visible="showFileSort"
|
||||
:documents="fileSortChoose"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FileSort from './file-sort';
|
||||
|
||||
export default {
|
||||
name: 'ExampleDocument',
|
||||
components: {FileSort},
|
||||
data() {
|
||||
return {
|
||||
// 列表接口地址
|
||||
url: 'https://cdn.eleadmin.com/20200610/document.json',
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
key: 'index',
|
||||
customRender: ({index}) => this.$refs.table.tableIndex + index
|
||||
},
|
||||
{
|
||||
title: '案卷档号',
|
||||
dataIndex: 'piece_no',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '案卷题名',
|
||||
dataIndex: 'title',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '年度',
|
||||
dataIndex: 'year',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '保管期限',
|
||||
dataIndex: 'retention',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '密级',
|
||||
dataIndex: 'secret',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '档案类别',
|
||||
dataIndex: 'type',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '载体规格',
|
||||
dataIndex: 'carrier',
|
||||
sorter: true
|
||||
}
|
||||
],
|
||||
// 表格选中数据
|
||||
selection: [],
|
||||
// 是否显示卷内文件调整弹窗
|
||||
showFileSort: false,
|
||||
// 选中的案卷
|
||||
fileSortChoose: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 打开卷内文件调整弹窗 */
|
||||
openFileSort() {
|
||||
if (this.selection.length < 2) {
|
||||
this.$message.error('请至少选择两条数据');
|
||||
return;
|
||||
}
|
||||
// 实际项目用这一行
|
||||
/*this.fileSortChoose = this.selection.map(d => {
|
||||
return Object.assign({}, d);
|
||||
});*/
|
||||
// 演示强制选前三个演示
|
||||
this.fileSortChoose = this.$refs.table.data.slice(0, 3);
|
||||
this.showFileSort = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,214 +0,0 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||||
<a-card title="列表拖拽排序" :bordered="false">
|
||||
<div class="demo-drag-list">
|
||||
<draggable
|
||||
v-model="list"
|
||||
item-key="id"
|
||||
:animation="300"
|
||||
handle=".sort-handle">
|
||||
<template #item="{element}">
|
||||
<div class="demo-drag-list-item ele-cell">
|
||||
<menu-outlined class="sort-handle"/>
|
||||
<div class="ele-cell-content">{{ element.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="16" :md="24" :sm="24" :xs="24">
|
||||
<a-card title="列表相互拖拽" :bordered="false">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<div class="demo-drag-list">
|
||||
<draggable
|
||||
:list="list1"
|
||||
item-key="id"
|
||||
:animation="300"
|
||||
handle=".sort-handle"
|
||||
group="demoDragList">
|
||||
<template #item="{element}">
|
||||
<div class="demo-drag-list-item ele-cell">
|
||||
<menu-outlined class="sort-handle"/>
|
||||
<div class="ele-cell-content">{{ element.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="demo-drag-list">
|
||||
<draggable
|
||||
:list="list2"
|
||||
item-key="id"
|
||||
:animation="300"
|
||||
handle=".sort-handle"
|
||||
group="demoDragList">
|
||||
<template #item="{element}">
|
||||
<div class="demo-drag-list-item ele-cell">
|
||||
<menu-outlined class="sort-handle"/>
|
||||
<div class="ele-cell-content">{{ element.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||||
<a-card title="宫格拖拽排序" :bordered="false">
|
||||
<div class="demo-drag-grid">
|
||||
<draggable
|
||||
v-model="grid"
|
||||
item-key="id"
|
||||
:animation="300">
|
||||
<template #item="{element}">
|
||||
<div class="demo-drag-grid-item">{{ element.name }}</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="16" :md="24" :sm="24" :xs="24">
|
||||
<a-card title="宫格相互拖拽" :bordered="false">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<div class="demo-drag-grid">
|
||||
<draggable
|
||||
:list="grid1"
|
||||
item-key="id"
|
||||
:animation="300"
|
||||
group="demoDragGrid">
|
||||
<template #item="{element}">
|
||||
<div class="demo-drag-grid-item">{{ element.name }}</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="demo-drag-grid">
|
||||
<draggable
|
||||
:list="grid2"
|
||||
item-key="id"
|
||||
:animation="300"
|
||||
group="demoDragGrid">
|
||||
<template #item="{element}">
|
||||
<div class="demo-drag-grid-item">{{ element.name }}</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable';
|
||||
import {MenuOutlined} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionDragSort',
|
||||
components: {
|
||||
draggable,
|
||||
MenuOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{id: 1, name: '项目0000001'},
|
||||
{id: 2, name: '项目0000002'},
|
||||
{id: 3, name: '项目0000003'},
|
||||
{id: 4, name: '项目0000004'},
|
||||
{id: 5, name: '项目0000005'}
|
||||
],
|
||||
list1: [
|
||||
{id: 1, name: '项目0000001'},
|
||||
{id: 2, name: '项目0000002'},
|
||||
{id: 3, name: '项目0000003'},
|
||||
{id: 4, name: '项目0000004'},
|
||||
{id: 5, name: '项目0000005'}
|
||||
],
|
||||
list2: [
|
||||
{id: 6, name: '项目0000006'},
|
||||
{id: 7, name: '项目0000007'},
|
||||
{id: 8, name: '项目0000008'},
|
||||
{id: 9, name: '项目0000009'},
|
||||
{id: 10, name: '项目0000010'}
|
||||
],
|
||||
grid: [
|
||||
{id: 1, name: '项目0000001'},
|
||||
{id: 2, name: '项目0000002'},
|
||||
{id: 3, name: '项目0000003'},
|
||||
{id: 4, name: '项目0000004'},
|
||||
{id: 5, name: '项目0000005'}
|
||||
],
|
||||
grid1: [
|
||||
{id: 1, name: '项目0000001'},
|
||||
{id: 2, name: '项目0000002'},
|
||||
{id: 3, name: '项目0000003'},
|
||||
{id: 4, name: '项目0000004'},
|
||||
{id: 5, name: '项目0000005'}
|
||||
],
|
||||
grid2: [
|
||||
{id: 6, name: '项目0000006'},
|
||||
{id: 7, name: '项目0000007'},
|
||||
{id: 8, name: '项目0000008'},
|
||||
{id: 9, name: '项目0000009'},
|
||||
{id: 10, name: '项目0000010'}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/** 列表样式 */
|
||||
.demo-drag-list {
|
||||
border: 1px solid hsla(0, 0%, 60%, .2);
|
||||
}
|
||||
|
||||
.demo-drag-list-item {
|
||||
line-height: 1;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.demo-drag-list-item + .demo-drag-list-item {
|
||||
border-top: 1px solid hsla(0, 0%, 60%, .2);
|
||||
}
|
||||
|
||||
.demo-drag-list-item.sortable-chosen {
|
||||
background: hsla(0, 0%, 60%, .1);
|
||||
}
|
||||
|
||||
.demo-drag-list-item .sort-handle {
|
||||
cursor: move;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/** 宫格样式 */
|
||||
.demo-drag-grid {
|
||||
border: 1px solid hsla(0, 0%, 60%, .2);
|
||||
padding: 16px 0 0 16px;
|
||||
}
|
||||
|
||||
.demo-drag-grid-item {
|
||||
padding: 16px;
|
||||
margin: 0 16px 16px 0;
|
||||
display: inline-block;
|
||||
border: 1px solid hsla(0, 0%, 60%, .2);
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.demo-drag-grid-item.sortable-chosen {
|
||||
background: hsla(0, 0%, 60%, .1);
|
||||
}
|
||||
</style>
|
||||
@@ -1,68 +0,0 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 按钮 -->
|
||||
<a-space class="ele-table-tool">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="showHtml">获取html
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="showText">获取文本
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="setContent">修改内容
|
||||
</a-button>
|
||||
</a-space>
|
||||
<!-- 编辑器 -->
|
||||
<tinymce-editor
|
||||
v-model:value="value"
|
||||
:init="{height: 525}"/>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TinymceEditor from '@/components/TinymceEditor';
|
||||
import {Modal} from 'ant-design-vue';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionEditor',
|
||||
components: {TinymceEditor},
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 获取编辑器内容 */
|
||||
showHtml() {
|
||||
Modal.info({
|
||||
maskClosable: true,
|
||||
content: this.value
|
||||
});
|
||||
},
|
||||
/* 获取编辑器纯文本内容 */
|
||||
showText() {
|
||||
Modal.info({
|
||||
maskClosable: true,
|
||||
content: this.$util.htmlToText(this.value)
|
||||
});
|
||||
},
|
||||
/* 修改编辑器内容 */
|
||||
setContent() {
|
||||
this.value = [
|
||||
'<div style="text-align:center;color:#fff;background-image:linear-gradient(-90deg,rgb(62,119,255),rgb(159,98,212),rgb(255,78,170));padding:32px 0;">',
|
||||
' <div style="font-size:28px;margin-bottom:16px;">EleAdminPro后台管理模板</div>',
|
||||
' <div style="font-size:18px">通用型后台管理模板，界面美观、开箱即用，拥有丰富的组件和模板</div>',
|
||||
'</div><br/>'
|
||||
].join('');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,418 +0,0 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-card title="导出excel" :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
bordered
|
||||
row-key="key"
|
||||
:datasource="data"
|
||||
:columns="columns"
|
||||
:need-page="false"
|
||||
tools-theme="default"
|
||||
v-model:selection="selection"
|
||||
:toolkit="['size', 'columns', 'fullscreen']"
|
||||
:scroll="{x: 'max-content'}">
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="exportBas">导出excel
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="exportAdv">导出带合并
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="exportSel">导出选中
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
<a-card title="导入excel" :bordered="false">
|
||||
<!-- 操作按钮 -->
|
||||
<ele-toolbar :tools="[]">
|
||||
<a-space>
|
||||
<a-upload
|
||||
:before-upload="importFile"
|
||||
:show-upload-list="false"
|
||||
accept=".xls,.xlsx,.csv">
|
||||
<a-button type="primary">导入excel</a-button>
|
||||
</a-upload>
|
||||
<a-upload
|
||||
:before-upload="importFile2"
|
||||
:show-upload-list="false"
|
||||
accept=".xls,.xlsx,.csv">
|
||||
<a-button type="primary">导入拆分合并</a-button>
|
||||
</a-upload>
|
||||
<a-upload
|
||||
:before-upload="importFile3"
|
||||
:show-upload-list="false"
|
||||
accept=".xls,.xlsx,.csv">
|
||||
<a-button type="primary">导入保持合并</a-button>
|
||||
</a-upload>
|
||||
</a-space>
|
||||
</ele-toolbar>
|
||||
<div class="ant-table ant-table-middle ant-table-bordered">
|
||||
<div class="ant-table-content">
|
||||
<div class="ant-table-body">
|
||||
<table>
|
||||
<thead class="ant-table-thead">
|
||||
<tr>
|
||||
<th></th>
|
||||
<th
|
||||
v-for="item in importTitle"
|
||||
:key="item"
|
||||
style="text-align: center;">
|
||||
{{ item }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="ant-table-tbody">
|
||||
<tr v-for="(item,index) in importData" :key="index">
|
||||
<td style="text-align: center;">{{ index + 1 }}</td>
|
||||
<template v-for="key in importTitle">
|
||||
<td
|
||||
v-if="item['__colspan__'+key]!==0&&item['__rowspan__'+key]!==0"
|
||||
:key="key"
|
||||
:colspan="item['__colspan__'+key]"
|
||||
:rowspan="item['__rowspan__'+key]"
|
||||
style="text-align: center;">
|
||||
{{ item[key] }}
|
||||
</td>
|
||||
</template>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-row :gutter="32">
|
||||
<a-col :md="12" :xs="24">
|
||||
<div style="margin:16px 0;">二维数组格式数据：</div>
|
||||
<pre
|
||||
style="max-height: 300px;padding: 16px;overflow: auto;"
|
||||
class="ele-bg-base">{{ JSON.stringify(importDataAoa, null, 4) }}
|
||||
</pre>
|
||||
</a-col>
|
||||
<a-col :md="12" :xs="24">
|
||||
<div style="margin: 16px 0;">JSON格式数据：</div>
|
||||
<pre
|
||||
style="max-height: 300px;padding: 16px;overflow: auto;"
|
||||
class="ele-bg-base">{{ JSON.stringify(importData, null, 4) }}
|
||||
</pre>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import XLSX from 'xlsx';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionExcel',
|
||||
data() {
|
||||
return {
|
||||
// 表格数据
|
||||
data: [
|
||||
{
|
||||
key: 1,
|
||||
username: '张小三',
|
||||
amount: 18,
|
||||
province: '浙江',
|
||||
city: '杭州',
|
||||
zone: '西湖区',
|
||||
street: '西溪街道',
|
||||
address: '西溪花园30栋1单元',
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
username: '李小四',
|
||||
amount: 39,
|
||||
province: '江苏',
|
||||
city: '苏州',
|
||||
zone: '姑苏区',
|
||||
street: '丝绸路',
|
||||
address: '天墅之城9幢2单元',
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
username: '王小五',
|
||||
amount: 8,
|
||||
province: '江西',
|
||||
city: '南昌',
|
||||
zone: '青山湖区',
|
||||
street: '艾溪湖办事处',
|
||||
address: '中兴和园1幢3单元',
|
||||
},
|
||||
{
|
||||
key: 4,
|
||||
username: '赵小六',
|
||||
amount: 16,
|
||||
province: '福建',
|
||||
city: '泉州',
|
||||
zone: '丰泽区',
|
||||
street: '南洋街道',
|
||||
address: '南洋村6幢1单元',
|
||||
},
|
||||
{
|
||||
key: 5,
|
||||
username: '孙小七',
|
||||
amount: 12,
|
||||
province: '湖北',
|
||||
city: '武汉',
|
||||
zone: '武昌区',
|
||||
street: '武昌大道',
|
||||
address: '两湖花园16幢2单元',
|
||||
},
|
||||
{
|
||||
key: 6,
|
||||
username: '周小八',
|
||||
amount: 11,
|
||||
province: '安徽',
|
||||
city: '黄山',
|
||||
zone: '黄山区',
|
||||
street: '汤口镇',
|
||||
address: '温泉村21号',
|
||||
}
|
||||
],
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
key: 'index',
|
||||
customRender: ({index}) => `${index + 1}`,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'username',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'cityAddress',
|
||||
children: [
|
||||
{
|
||||
title: '省',
|
||||
dataIndex: 'province',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '市',
|
||||
dataIndex: 'city',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '区',
|
||||
dataIndex: 'zone',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '街道',
|
||||
dataIndex: 'street',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '详细地址',
|
||||
dataIndex: 'address',
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '金额',
|
||||
dataIndex: 'amount',
|
||||
align: 'center'
|
||||
}
|
||||
],
|
||||
// 选中数据
|
||||
selection: [],
|
||||
// 导入的数据
|
||||
importData: [],
|
||||
// 导入数据的列
|
||||
importTitle: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
|
||||
// 导入数据二维数组形式
|
||||
importDataAoa: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 导出excel */
|
||||
exportBas() {
|
||||
let array = [['用户名', '省', '市', '区', '街道', '详细地址', '金额']];
|
||||
this.data.forEach(d => {
|
||||
array.push([d.username, d.province, d.city, d.zone, d.street, d.address, d.amount]);
|
||||
});
|
||||
this.$util.exportSheet(XLSX, array, '用户数据');
|
||||
},
|
||||
/* 导出带单元格合并 */
|
||||
exportAdv() {
|
||||
let array = [
|
||||
['用户名', '地址', null, null, null, null, '金额'],
|
||||
[null, '省', '市', '区', '街道', '详细地址', null]
|
||||
];
|
||||
this.data.forEach(d => {
|
||||
array.push([d.username, d.province, d.city, d.zone, d.street, d.address, d.amount]);
|
||||
});
|
||||
let sheet = XLSX.utils.aoa_to_sheet(array);
|
||||
sheet['!merges'] = [
|
||||
{s: {r: 0, c: 1}, e: {r: 0, c: 5}}, // 合并第0行第1列到第0行第5列
|
||||
{s: {r: 0, c: 0}, e: {r: 1, c: 0}}, // 合并第0行第0列到第1行第0列
|
||||
{s: {r: 0, c: 6}, e: {r: 1, c: 6}} // 合并第0行第6列到第1行第6列
|
||||
];
|
||||
this.$util.exportSheet(XLSX, sheet, '用户数据');
|
||||
},
|
||||
/* 导出选中数据 */
|
||||
exportSel() {
|
||||
if (this.selection.length === 0) {
|
||||
this.$message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
let array = [['用户名', '省', '市', '区', '街道', '详细地址', '金额']];
|
||||
this.selection.forEach(d => {
|
||||
array.push([d.username, d.province, d.city, d.zone, d.street, d.address, d.amount]);
|
||||
});
|
||||
this.$util.exportSheet(XLSX, array, '用户数据');
|
||||
},
|
||||
/* 导入本地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});
|
||||
// 生成表格需要的数据
|
||||
let list = [], maxCols = 0, title = [];
|
||||
aoa.forEach(d => {
|
||||
if (d.length > maxCols) {
|
||||
maxCols = d.length;
|
||||
}
|
||||
let row = {};
|
||||
for (let i = 0; i < d.length; i++) {
|
||||
let key = this.getCharByIndex(i);
|
||||
row[key] = d[i];
|
||||
row['__colspan__' + key] = 1;
|
||||
row['__rowspan__' + key] = 1;
|
||||
}
|
||||
list.push(row);
|
||||
});
|
||||
for (let i = 0; i < maxCols; i++) {
|
||||
title.push(this.getCharByIndex(i));
|
||||
}
|
||||
this.importTitle = title;
|
||||
this.importData = list;
|
||||
this.importDataAoa = aoa;
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
return false;
|
||||
},
|
||||
/* 导入excel拆分合并单元格 */
|
||||
importFile2(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});
|
||||
// 拆分合并单元格
|
||||
if (worksheet['!merges']) {
|
||||
worksheet['!merges'].forEach(m => {
|
||||
for (let r = m.s.r; r <= m.e.r; r++) {
|
||||
for (let c = m.s.c; c <= m.e.c; c++) {
|
||||
aoa[r][c] = aoa[m.s.r][m.s.c];
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// 生成表格需要的数据
|
||||
let list = [], maxCols = 0, title = [];
|
||||
aoa.forEach(d => {
|
||||
if (d.length > maxCols) {
|
||||
maxCols = d.length;
|
||||
}
|
||||
let row = {};
|
||||
for (let i = 0; i < d.length; i++) {
|
||||
row[this.getCharByIndex(i)] = d[i];
|
||||
}
|
||||
list.push(row);
|
||||
});
|
||||
for (let i = 0; i < maxCols; i++) {
|
||||
title.push(this.getCharByIndex(i));
|
||||
}
|
||||
this.importTitle = title;
|
||||
this.importData = list;
|
||||
this.importDataAoa = aoa;
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
return false;
|
||||
},
|
||||
/* 导入excel读取合并信息 */
|
||||
importFile3(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});
|
||||
// 生成表格需要的数据
|
||||
let list = [], maxCols = 0, title = [];
|
||||
aoa.forEach(d => {
|
||||
if (d.length > maxCols) {
|
||||
maxCols = d.length;
|
||||
}
|
||||
let row = {};
|
||||
for (let i = 0; i < d.length; i++) {
|
||||
row[this.getCharByIndex(i)] = d[i];
|
||||
}
|
||||
list.push(row);
|
||||
});
|
||||
for (let i = 0; i < maxCols; i++) {
|
||||
title.push(this.getCharByIndex(i));
|
||||
}
|
||||
// 记录合并单元格
|
||||
if (worksheet['!merges']) {
|
||||
worksheet['!merges'].forEach(m => {
|
||||
for (let r = m.s.r; r <= m.e.r; r++) {
|
||||
for (let c = m.s.c; c <= m.e.c; c++) {
|
||||
let cc = this.getCharByIndex(c);
|
||||
list[r]['__colspan__' + cc] = 0;
|
||||
list[r]['__rowspan__' + cc] = 0;
|
||||
}
|
||||
}
|
||||
let char = this.getCharByIndex(m.s.c);
|
||||
list[m.s.r]['__colspan__' + char] = m.e.c - m.s.c + 1;
|
||||
list[m.s.r]['__rowspan__' + char] = m.e.r - m.s.r + 1;
|
||||
});
|
||||
}
|
||||
this.importTitle = title;
|
||||
this.importData = list;
|
||||
this.importDataAoa = aoa;
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
return false;
|
||||
},
|
||||
/* 生成Excel列字母序号 */
|
||||
getCharByIndex(index) {
|
||||
let chars = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
|
||||
'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
|
||||
if (index < chars.length) {
|
||||
return chars[index];
|
||||
}
|
||||
let n = parseInt(index / chars.length),
|
||||
m = index % chars.length;
|
||||
return chars[n] + chars[m];
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,289 +0,0 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:body-style="{padding: 0, minHeight: '520px'}">
|
||||
<div style="padding: 16px 16px 0 16px;">
|
||||
<!-- 工具栏 -->
|
||||
<div class="ele-table-tool">
|
||||
<div class="ele-table-tool-title">
|
||||
<a-space>
|
||||
<a-upload
|
||||
:showUploadList="false"
|
||||
:customRequest="doUpload">
|
||||
<a-button type="primary">上传</a-button>
|
||||
</a-upload>
|
||||
<a-button type="primary">新建文件夹</a-button>
|
||||
<a-button danger type="primary">删除</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<!-- 搜索框 -->
|
||||
<div style="max-width: 240px;">
|
||||
<a-input-search
|
||||
v-model:value="search"
|
||||
placeholder="搜索您的文件"/>
|
||||
</div>
|
||||
<!-- 显示方式切换 -->
|
||||
<menu-outlined
|
||||
v-if="grid"
|
||||
class="ele-file-tool-btn"
|
||||
@click="grid=!grid"/>
|
||||
<appstore-outlined
|
||||
v-else
|
||||
class="ele-file-tool-btn"
|
||||
@click="grid=!grid"/>
|
||||
</div>
|
||||
<!-- 文件目录面包屑 -->
|
||||
<div class="ele-file-breadcrumb-group ele-cell">
|
||||
<div class="ele-cell-content ele-cell">
|
||||
<div
|
||||
v-if="directory.length"
|
||||
class="ele-file-breadcrumb-back ele-text-primary"
|
||||
@click="back">返回上一级
|
||||
</div>
|
||||
<div class="ele-file-breadcrumb-list ele-cell-content ele-cell">
|
||||
<div
|
||||
:class="['ele-file-breadcrumb-item ele-cell', {'ele-text-primary': directory.length}]"
|
||||
@click="listAll">
|
||||
<div class="ele-file-breadcrumb-item-title">全部文件</div>
|
||||
<right-outlined v-if="directory.length"/>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item,index) in directory"
|
||||
:key="index"
|
||||
@click="listDir(index)"
|
||||
:class="['ele-file-breadcrumb-item ele-cell', {'ele-text-primary': index!==directory.length-1}]">
|
||||
<div class="ele-file-breadcrumb-item-title">{{ item }}</div>
|
||||
<right-outlined v-if="index!==directory.length-1"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>已全部加载，共 {{ data.length }} 个</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-spin :spinning="loading">
|
||||
<!-- 文件展示列表 -->
|
||||
<ele-file-list
|
||||
:data="data"
|
||||
v-model:checked="checked"
|
||||
:grid="grid"
|
||||
:sort="sort"
|
||||
:order="order"
|
||||
@item-click="onItemClick"
|
||||
@sort-change="onSortChange">
|
||||
</ele-file-list>
|
||||
</a-spin>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleFileList from 'ele-admin-pro/packages/ele-file-list';
|
||||
import {
|
||||
MenuOutlined,
|
||||
AppstoreOutlined,
|
||||
RightOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionFile',
|
||||
components: {
|
||||
EleFileList,
|
||||
MenuOutlined,
|
||||
AppstoreOutlined,
|
||||
RightOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 加载状态
|
||||
loading: true,
|
||||
// 是否网格展示
|
||||
grid: true,
|
||||
// 文件列表数据
|
||||
data: [],
|
||||
// 选中数据
|
||||
checked: [],
|
||||
// 文件目录面包屑数据
|
||||
directory: [],
|
||||
// 搜索
|
||||
search: '',
|
||||
// 排序字段
|
||||
sort: '',
|
||||
// 排序方式
|
||||
order: '',
|
||||
// 图片预览文件
|
||||
currentImage: '',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 图片预览列表
|
||||
previewList() {
|
||||
return this.data.filter(d => d.thumbnail).map(d => d.url);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.query();
|
||||
},
|
||||
methods: {
|
||||
/* 查询文件列表 */
|
||||
query() {
|
||||
this.checked = [];
|
||||
this.loading = true;
|
||||
this.$http.get('/file/list', {
|
||||
params: {
|
||||
directory: this.directory.join('/'),
|
||||
sort: this.sort,
|
||||
order: this.order
|
||||
}
|
||||
}).then(res => {
|
||||
this.loading = false;
|
||||
if (res.data.code === 0) {
|
||||
res.data.data.forEach(d => {
|
||||
// 文件地址加baseURL
|
||||
if (d.url) {
|
||||
d.url = this.$http.defaults.baseURL + '/' + d.url;
|
||||
}
|
||||
if (d.thumbnail) {
|
||||
d.thumbnail = this.$http.defaults.baseURL + '/' + d.thumbnail;
|
||||
}
|
||||
// 文件大小格式化
|
||||
if (d.isDirectory) {
|
||||
d.length = '-';
|
||||
} else {
|
||||
d.length = this.getFileSize(d.length);
|
||||
}
|
||||
// 修改时间格式化
|
||||
if (d.updateTime) {
|
||||
d.updateTime = this.$util.toDateString(d.updateTime);
|
||||
}
|
||||
});
|
||||
this.data = res.data.data;
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.loading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* item点击事件 */
|
||||
onItemClick(item) {
|
||||
if (item.isDirectory) { // 文件夹
|
||||
this.directory.push(item.name);
|
||||
this.query();
|
||||
} /*else if (item.thumbnail) {
|
||||
this.currentImage = item.url;
|
||||
}*/ else if (this.checked.indexOf(item) !== -1) {
|
||||
this.checked.splice(this.checked.indexOf(item), 1);
|
||||
} else {
|
||||
this.checked.push(item);
|
||||
}
|
||||
},
|
||||
/* 返回上级 */
|
||||
back() {
|
||||
this.directory.splice(this.directory.length - 1, 1);
|
||||
this.query();
|
||||
},
|
||||
/* 全部文件 */
|
||||
listAll() {
|
||||
if (!this.directory.length) {
|
||||
return;
|
||||
}
|
||||
this.directory = [];
|
||||
this.query();
|
||||
},
|
||||
/* 回到指定目录 */
|
||||
listDir(index) {
|
||||
if (index === this.directory.length - 1) {
|
||||
return;
|
||||
}
|
||||
this.directory.splice(index, this.directory.length - index);
|
||||
this.query();
|
||||
},
|
||||
/* 文件大小格式化 */
|
||||
getFileSize(value) {
|
||||
if (value < 1024) {
|
||||
return value + 'B';
|
||||
} else if (value < 1024 * 1024) {
|
||||
return (value / 1024).toFixed(1) + 'KB';
|
||||
} else if (value < 1024 * 1024 * 1024) {
|
||||
return (value / 1024 / 1024).toFixed(1) + 'M';
|
||||
} else {
|
||||
return (value / 1024 / 1024 / 1024).toFixed(1) + 'G';
|
||||
}
|
||||
},
|
||||
/* 文件列表排序方式改变 */
|
||||
onSortChange(obj) {
|
||||
this.order = obj.order;
|
||||
this.sort = obj.sort;
|
||||
this.query();
|
||||
},
|
||||
/* 查看文件 */
|
||||
view(item) {
|
||||
if (item.isDirectory) {
|
||||
this.onItemClick(item);
|
||||
} else if (item.url) {
|
||||
window.open(item.url);
|
||||
}
|
||||
},
|
||||
/* 上传 */
|
||||
doUpload({file}) {
|
||||
let formData = new FormData();
|
||||
formData.append('file', file);
|
||||
const hide = this.$message.loading('上传中..', 0);
|
||||
this.$http.post('/file/upload', formData).then(res => {
|
||||
hide();
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.directory = [res.data.dir.replace(/\//, '')];
|
||||
this.query();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
hide();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 图标按钮 */
|
||||
.ele-file-tool-btn {
|
||||
font-size: 20px;
|
||||
margin-left: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 文件目录面包屑 */
|
||||
.ele-file-breadcrumb-group {
|
||||
margin-bottom: 12px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.ele-file-breadcrumb-back {
|
||||
padding-right: 12px;
|
||||
border-right: 1px solid hsla(0, 0%, 60%, .3);
|
||||
}
|
||||
|
||||
.ele-file-breadcrumb-back:hover,
|
||||
.ele-file-breadcrumb-item.ele-text-primary:hover > .ele-file-breadcrumb-item-title {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ele-file-breadcrumb-item .anticon {
|
||||
margin: 0 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.ele-table-tool > .ele-table-tool-title + div,
|
||||
.ele-file-breadcrumb-group > .ele-cell-content + div {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,261 +0,0 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<!-- 地图位置选择弹窗 -->
|
||||
<ele-map-picker
|
||||
v-model:visible="showPicker"
|
||||
:need-city="true"
|
||||
@done="onChoose"/>
|
||||
<ele-map-picker
|
||||
v-model:visible="showPicker2"
|
||||
:need-city="true"
|
||||
:search-type="1"
|
||||
@done="onChoose"/>
|
||||
<!-- 弹窗选择位置 -->
|
||||
<a-card title="弹窗选择位置" :bordered="false">
|
||||
<a-space>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="showPicker=true">地图选择位置(POI)
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="showPicker2=true">关键字检索模式
|
||||
</a-button>
|
||||
</a-space>
|
||||
<div v-if="form.location">
|
||||
<div style="margin-top: 12px;">选择位置: {{ form.location }}</div>
|
||||
<div style="margin-top: 12px;">详细地址: {{ form.address }}</div>
|
||||
<div style="margin-top: 12px;">经 纬 度 : {{ form.jinweidu }}</div>
|
||||
</div>
|
||||
</a-card>
|
||||
<!-- 官网底部地图 -->
|
||||
<a-card title="官网底部地图" :bordered="false">
|
||||
<div ref="locationMap" style="height: 360px;max-width: 1000px;"></div>
|
||||
</a-card>
|
||||
<!-- 轨迹展示及轨迹回放 -->
|
||||
<a-card title="轨迹展示及轨迹回放" :bordered="false">
|
||||
<div ref="trackMap" style="height: 360px;margin-bottom: 16px;max-width: 1000px;"></div>
|
||||
<a-space>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="startTrackAnim">开始动画
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="pauseTrackAnim">暂停动画
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="resumeTrackAnim">继续动画
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleMapPicker from 'ele-admin-pro/packages/ele-map-picker';
|
||||
import AMapLoader from '@amap/amap-jsapi-loader';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionMap',
|
||||
components: {EleMapPicker},
|
||||
data() {
|
||||
return {
|
||||
// 是否显示地图选择弹窗
|
||||
showPicker: false,
|
||||
// 是否显示地图选择弹窗2
|
||||
showPicker2: false,
|
||||
// 表单
|
||||
form: {},
|
||||
// 小车的marker
|
||||
carMarker: null,
|
||||
// 轨迹路线
|
||||
lineData: [
|
||||
[116.478935, 39.997761],
|
||||
[116.478939, 39.997825],
|
||||
[116.478912, 39.998549],
|
||||
[116.478912, 39.998549],
|
||||
[116.478998, 39.998555],
|
||||
[116.478998, 39.998555],
|
||||
[116.479282, 39.99856],
|
||||
[116.479658, 39.998528],
|
||||
[116.480151, 39.998453],
|
||||
[116.480784, 39.998302],
|
||||
[116.480784, 39.998302],
|
||||
[116.481149, 39.998184],
|
||||
[116.481573, 39.997997],
|
||||
[116.481863, 39.997846],
|
||||
[116.482072, 39.997718],
|
||||
[116.482362, 39.997718],
|
||||
[116.483633, 39.998935],
|
||||
[116.48367, 39.998968],
|
||||
[116.484648, 39.999861]
|
||||
],
|
||||
// 官网底部地图的实例
|
||||
mapInsLocation: null,
|
||||
// 小车轨迹地图的实例
|
||||
mapInsTrack: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 是否是暗黑模式
|
||||
darkMode() {
|
||||
return this.$store.state.theme.darkMode;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.renderLocationMap();
|
||||
this.renderTrackMap();
|
||||
},
|
||||
methods: {
|
||||
/* 地图选择后回调 */
|
||||
onChoose(location) {
|
||||
console.log(location);
|
||||
this.form = {
|
||||
location: location.city.province + '/' + location.city.city + '/' + location.city.district,
|
||||
address: location.name + ' ' + location.address,
|
||||
jinweidu: location.lng + ',' + location.lat
|
||||
};
|
||||
this.showPicker = false;
|
||||
this.showPicker2 = false;
|
||||
},
|
||||
/* 渲染官网底部地图 */
|
||||
renderLocationMap() {
|
||||
AMapLoader.load({
|
||||
'key': '006d995d433058322319fa797f2876f5',
|
||||
'version': '2.0',
|
||||
'plugins': ['AMap.InfoWindow', 'AMap.Marker']
|
||||
}).then((AMap) => {
|
||||
// 渲染地图
|
||||
let option = {
|
||||
zoom: 13, // 初缩放级别
|
||||
center: [114.346084, 30.511215 + 0.005] // 初始中心点
|
||||
};
|
||||
if (this.darkMode) {
|
||||
option.mapStyle = 'amap://styles/dark';
|
||||
}
|
||||
this.mapInsLocation = new AMap.Map(this.$refs.locationMap, option);
|
||||
// 创建信息窗体
|
||||
let infoWindow = new AMap.InfoWindow({
|
||||
content: `
|
||||
<div style="color: #333;">
|
||||
<div style="padding: 5px;font-size: 16px;">武汉易云智科技有限公司</div>
|
||||
<div style="padding: 0 5px;">地址：湖北省武汉市洪山区雄楚大道222号</div>
|
||||
<div style="padding: 0 5px;">电话：020-123456789</div>
|
||||
</div>
|
||||
<a style="padding: 8px 5px 0;text-decoration: none;display: inline-block;" class="ele-text-primary"
|
||||
href="//uri.amap.com/marker?position=114.346084,30.511215&name=武汉易云智科技有限公司"
|
||||
target="_blank">到这里去→</a>
|
||||
`
|
||||
});
|
||||
infoWindow.open(this.mapInsLocation, [114.346084, 30.511215]);
|
||||
let icon = new AMap.Icon({
|
||||
size: new AMap.Size(25, 34),
|
||||
image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
|
||||
imageSize: new AMap.Size(25, 34)
|
||||
});
|
||||
let marker = new AMap.Marker({
|
||||
icon: icon,
|
||||
position: [114.346084, 30.511215],
|
||||
offset: new AMap.Pixel(-12, -28)
|
||||
});
|
||||
marker.setMap(this.mapInsLocation);
|
||||
marker.on('click', () => {
|
||||
infoWindow.open(this.mapInsLocation);
|
||||
});
|
||||
}).catch(e => {
|
||||
console.error(e);
|
||||
});
|
||||
},
|
||||
/* 渲染轨迹回放地图 */
|
||||
renderTrackMap() {
|
||||
AMapLoader.load({
|
||||
'key': '006d995d433058322319fa797f2876f5',
|
||||
'version': '2.0',
|
||||
'plugins': ['AMap.MoveAnimation', 'AMap.Marker', 'AMap.Polyline']
|
||||
}).then((AMap) => {
|
||||
// 渲染地图
|
||||
let option = {
|
||||
zoom: 17,
|
||||
center: [116.478935, 39.997761],
|
||||
};
|
||||
if (this.darkMode) {
|
||||
option.mapStyle = 'amap://styles/dark';
|
||||
}
|
||||
this.mapInsTrack = new AMap.Map(this.$refs.trackMap, option);
|
||||
// 创建小车marker
|
||||
this.carMarker = new AMap.Marker({
|
||||
map: this.mapInsTrack,
|
||||
position: [116.478935, 39.997761],
|
||||
icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
|
||||
offset: new AMap.Pixel(-13, -26),
|
||||
});
|
||||
// 绘制轨迹
|
||||
new AMap.Polyline({
|
||||
map: this.mapInsTrack,
|
||||
path: this.lineData,
|
||||
showDir: true,
|
||||
strokeColor: '#28F', // 线颜色
|
||||
strokeOpacity: 1, // 线透明度
|
||||
strokeWeight: 6, // 线宽
|
||||
//strokeStyle: 'solid' // 线样式
|
||||
});
|
||||
// 通过的轨迹
|
||||
let passedPolyline = new AMap.Polyline({
|
||||
map: this.mapInsTrack,
|
||||
showDir: true,
|
||||
strokeColor: '#4B5', // 线颜色
|
||||
strokeOpacity: 1, // 线透明度
|
||||
strokeWeight: 6, // 线宽
|
||||
});
|
||||
// 小车移动回调
|
||||
this.carMarker.on('moving', function (e) {
|
||||
passedPolyline.setPath(e.passedPath);
|
||||
});
|
||||
// 地图自适应
|
||||
this.mapInsTrack.setFitView();
|
||||
}).catch(e => {
|
||||
console.error(e);
|
||||
});
|
||||
},
|
||||
/* 开始轨迹回放动画 */
|
||||
startTrackAnim() {
|
||||
this.carMarker.stopMove();
|
||||
this.carMarker.moveAlong(this.lineData, {
|
||||
duration: 200,
|
||||
autoRotation: true,
|
||||
});
|
||||
},
|
||||
/* 暂停轨迹回放动画 */
|
||||
pauseTrackAnim() {
|
||||
this.carMarker.pauseMove();
|
||||
},
|
||||
/* 继续开始轨迹回放动画 */
|
||||
resumeTrackAnim() {
|
||||
this.carMarker.resumeMove();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
darkMode() {
|
||||
if (this.mapInsLocation) {
|
||||
if (this.darkMode) {
|
||||
this.mapInsLocation.setMapStyle('amap://styles/dark');
|
||||
} else {
|
||||
this.mapInsLocation.setMapStyle('amap://styles/normal');
|
||||
}
|
||||
}
|
||||
if (this.mapInsTrack) {
|
||||
if (this.darkMode) {
|
||||
this.mapInsTrack.setMapStyle('amap://styles/dark');
|
||||
} else {
|
||||
this.mapInsTrack.setMapStyle('amap://styles/normal');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,34 +0,0 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<more-tag/>
|
||||
<more-city-select/>
|
||||
<more-modal/>
|
||||
<more-color-picker/>
|
||||
<more-cropper/>
|
||||
<more-count-up/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MoreModal from './more-modal';
|
||||
import MoreTag from './more-tag';
|
||||
import MoreCitySelect from './more-city-select';
|
||||
import MoreColorPicker from './more-color-picker';
|
||||
import MoreCropper from './more-cropper';
|
||||
import MoreCountUp from './more-count-up';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionMore',
|
||||
components: {
|
||||
MoreTag,
|
||||
MoreCitySelect,
|
||||
MoreColorPicker,
|
||||
MoreCropper,
|
||||
MoreCountUp,
|
||||
MoreModal
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,44 +0,0 @@
|
||||
<template>
|
||||
<a-card title="省市区级联选择" :bordered="false">
|
||||
<a-space>
|
||||
<a-cascader
|
||||
v-model:value="city"
|
||||
:options="cityData.cityData"
|
||||
placeholder="请选择省市区"
|
||||
popup-class-name="ele-pop-wrap-higher"/>
|
||||
<a-cascader
|
||||
v-model:value="provinceCity"
|
||||
:options="cityData.provinceCityData"
|
||||
placeholder="请选择省市"
|
||||
popup-class-name="ele-pop-wrap-higher"/>
|
||||
<a-cascader
|
||||
v-model:value="province"
|
||||
:options="cityData.provinceData"
|
||||
placeholder="请选择省"
|
||||
popup-class-name="ele-pop-wrap-higher"/>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import regions from 'ele-admin-pro/packages/regions.js';
|
||||
|
||||
export default {
|
||||
name: 'MoreCitySelect',
|
||||
data() {
|
||||
return {
|
||||
// 省市区数据
|
||||
cityData: regions,
|
||||
// 选中的省市区
|
||||
city: [],
|
||||
// 选中的省市
|
||||
provinceCity: [],
|
||||
// 选中的省
|
||||
province: [],
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,53 +0,0 @@
|
||||
<template>
|
||||
<a-card title="颜色选择器" :bordered="false">
|
||||
<a-space>
|
||||
<ele-color-picker
|
||||
size="large"
|
||||
:show-alpha="true"
|
||||
v-model:value="color"
|
||||
:predefine="predefineColors"/>
|
||||
<ele-color-picker
|
||||
:show-alpha="true"
|
||||
v-model:value="color"
|
||||
:predefine="predefineColors"/>
|
||||
<ele-color-picker
|
||||
size="small"
|
||||
:show-alpha="true"
|
||||
v-model:value="color"
|
||||
:predefine="predefineColors"/>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleColorPicker from 'ele-admin-pro/packages/ele-color-picker';
|
||||
|
||||
export default {
|
||||
name: 'MoreColorPicker',
|
||||
components: {EleColorPicker},
|
||||
data() {
|
||||
return {
|
||||
color: 'rgba(255, 69, 0, 0.68)',
|
||||
predefineColors: [
|
||||
'#ff4500',
|
||||
'#ff8c00',
|
||||
'#ffd700',
|
||||
'#90ee90',
|
||||
'#00ced1',
|
||||
'#1e90ff',
|
||||
'#c71585',
|
||||
'rgba(255, 69, 0, 0.68)',
|
||||
'rgb(255, 120, 0)',
|
||||
'hsv(51, 100, 98)',
|
||||
'hsva(120, 40, 94, 0.5)',
|
||||
'hsl(181, 100%, 37%)',
|
||||
'hsla(209, 100%, 56%, 0.73)',
|
||||
'#c7158577'
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,71 +0,0 @@
|
||||
<template>
|
||||
<a-card title="数字滚动" :bordered="false">
|
||||
<h1 style="margin-bottom: 12px;">
|
||||
<ele-count-up
|
||||
:delay="0"
|
||||
:end-val="countUpVal"
|
||||
:options="countUpOptions"
|
||||
@ready="onCountUpReady"/>
|
||||
</h1>
|
||||
<a-space>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="startCountUp">重新开始
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="updateCountUp">更新数字
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleCountUp from 'ele-admin-pro/packages/ele-count-up';
|
||||
|
||||
export default {
|
||||
name: 'MoreCountUp',
|
||||
components: {EleCountUp},
|
||||
data() {
|
||||
return {
|
||||
// countUp值
|
||||
countUpVal: 6317,
|
||||
// countUp配置
|
||||
countUpOptions: {
|
||||
useEasing: true,
|
||||
useGrouping: true,
|
||||
separator: ',',
|
||||
decimal: '.',
|
||||
prefix: '',
|
||||
suffix: ''
|
||||
},
|
||||
// countUp实例
|
||||
countUpIns: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* countUp渲染完成 */
|
||||
onCountUpReady(instance) {
|
||||
this.countUpIns = instance;
|
||||
},
|
||||
/* countUp重新开始 */
|
||||
startCountUp() {
|
||||
if (!this.countUpIns) {
|
||||
return;
|
||||
}
|
||||
this.countUpIns.reset();
|
||||
this.countUpIns.start();
|
||||
},
|
||||
/* countUp更新 */
|
||||
updateCountUp() {
|
||||
if (!this.countUpIns) {
|
||||
return;
|
||||
}
|
||||
this.countUpIns.update(1000 + Math.round(Math.random() * 9000));
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,54 +0,0 @@
|
||||
<template>
|
||||
<a-card title="图片裁剪" :bordered="false">
|
||||
<a-space size="middle">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="visible1=true">1 : 1 裁剪
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="visible2=true">16 : 9 裁剪
|
||||
</a-button>
|
||||
</a-space>
|
||||
<div v-if="result" style="margin-top: 16px;">
|
||||
<img :src="result" style="height: 120px;width: auto;"/>
|
||||
</div>
|
||||
<!-- 图片裁剪 -->
|
||||
<ele-cropper-modal
|
||||
:src="src"
|
||||
v-model:visible="visible1"
|
||||
@done="onDone"/>
|
||||
<ele-cropper-modal
|
||||
:src="src"
|
||||
:aspect-ratio="16/9"
|
||||
v-model:visible="visible2"
|
||||
@done="onDone"/>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleCropperModal from 'ele-admin-pro/packages/ele-cropper-modal';
|
||||
|
||||
export default {
|
||||
name: 'MoreCropper',
|
||||
components: {EleCropperModal},
|
||||
data() {
|
||||
return {
|
||||
visible1: false,
|
||||
visible2: false,
|
||||
src: 'https://cdn.eleadmin.com/20200610/LrCTN2j94lo9N7wEql7cBr1Ux4rHMvmZ.jpg',
|
||||
result: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onDone(result) {
|
||||
this.result = result;
|
||||
this.visible1 = false;
|
||||
this.visible2 = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,207 +0,0 @@
|
||||
<template>
|
||||
<a-card title="可拖拽、拉伸、全屏弹窗" :bordered="false">
|
||||
<div>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="openDialog">可拖拽弹窗</a-button>
|
||||
<a-button type="primary" @click="openMoveOutDialog">允许拖出边界</a-button>
|
||||
<a-button type="primary" @click="openHideModalDialog">不要遮罩层</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<div style="margin-top: 16px;">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="openFullDialog">默认全屏打开</a-button>
|
||||
<a-button type="primary" @click="openMoreDialog">默认左下角打开</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-card>
|
||||
<!-- 弹窗1 -->
|
||||
<a-modal
|
||||
:mask="mask"
|
||||
:width="400"
|
||||
v-model:visible="visible"
|
||||
:wrap-class-name="wrapClassName"
|
||||
:body-style="{paddingBottom: '16px'}"
|
||||
@cancel="cancel"
|
||||
@ok="save">
|
||||
<template #title>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">拖拽弹窗</div>
|
||||
<compress-outlined class="ele-modal-icon-compress"/>
|
||||
<expand-outlined class="ele-modal-icon-expand"/>
|
||||
</div>
|
||||
</template>
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{flex: '70px'}"
|
||||
:wrapper-col="{flex: 'auto'}">
|
||||
<a-form-item label="用户名" name="nickname" style="flex-wrap: nowrap;">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入用户名"
|
||||
v-model:value="form.nickname"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="性别" name="sex">
|
||||
<a-select
|
||||
allow-clear
|
||||
placeholder="请选择性别"
|
||||
v-model:value="form.sex">
|
||||
<a-select-option value="男">男</a-select-option>
|
||||
<a-select-option value="女">女</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号" name="phone" style="flex-wrap: nowrap;">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入手机号"
|
||||
v-model:value="form.phone"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="邮箱" name="email" style="flex-wrap: nowrap;">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入邮箱"
|
||||
v-model:value="form.email"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="个人简介" style="flex-wrap: nowrap;">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
placeholder="请输入个人简介"
|
||||
v-model:value="form.introduction"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
<!-- 弹窗2 -->
|
||||
<a-modal
|
||||
:width="400"
|
||||
:mask="false"
|
||||
v-model:visible="visible2"
|
||||
wrap-class-name="ele-modal-movable ele-modal-resizable ele-modal-multiple ele-modal-wrap-fullscreen">
|
||||
<template #title>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">默认全屏打开</div>
|
||||
<compress-outlined class="ele-modal-icon-compress"/>
|
||||
<expand-outlined class="ele-modal-icon-expand"/>
|
||||
</div>
|
||||
</template>
|
||||
<div style="min-height: 66px;">我是弹窗2</div>
|
||||
</a-modal>
|
||||
<!-- 弹窗3 -->
|
||||
<a-modal
|
||||
:width="400"
|
||||
:mask="false"
|
||||
title="默认左下角打开"
|
||||
class="demo-modal-eg3"
|
||||
v-model:visible="visible3"
|
||||
wrap-class-name="ele-modal-movable ele-modal-resizable ele-modal-multiple">
|
||||
<div style="min-height: 66px;">我是弹窗3</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ExpandOutlined, CompressOutlined} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'MoreModal',
|
||||
components: {ExpandOutlined, CompressOutlined},
|
||||
data() {
|
||||
return {
|
||||
// 弹窗是否打开
|
||||
visible: false,
|
||||
visible2: false,
|
||||
visible3: false,
|
||||
// 表单数据
|
||||
form: {},
|
||||
// 是否显示遮罩层
|
||||
mask: true,
|
||||
// 是否允许拖出边界
|
||||
moveOut: false,
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
nickname: [
|
||||
{required: true, message: '请输入用户名', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
sex: [
|
||||
{required: true, message: '请选择性别', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
phone: [
|
||||
{required: true, message: '请输入手机号', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
email: [
|
||||
{required: true, message: '请输入邮箱', type: 'string', trigger: 'blur'}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 弹窗一的wrap-class
|
||||
wrapClassName() {
|
||||
return [
|
||||
this.moveOut ? 'ele-modal-move-out' : 'ele-modal-movable',
|
||||
this.mask ? '' : 'ele-modal-multiple',
|
||||
'ele-modal-resizable'
|
||||
].join(' ');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 打开弹窗 */
|
||||
openDialog() {
|
||||
if (!this.visible) {
|
||||
this.mask = true;
|
||||
this.moveOut = false;
|
||||
this.visible = true;
|
||||
}
|
||||
},
|
||||
/* 打开允许拖出边界弹窗 */
|
||||
openMoveOutDialog() {
|
||||
this.moveOut = true;
|
||||
if (!this.visible) {
|
||||
this.mask = true;
|
||||
this.visible = true;
|
||||
}
|
||||
},
|
||||
/* 打开无遮罩层弹窗 */
|
||||
openHideModalDialog() {
|
||||
this.moveOut = false;
|
||||
if (!this.visible) {
|
||||
this.mask = false;
|
||||
this.visible = true;
|
||||
}
|
||||
},
|
||||
/* 弹窗关闭回调 */
|
||||
cancel() {
|
||||
this.$refs.form.clearValidate();
|
||||
},
|
||||
/* 保存编辑 */
|
||||
save() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
this.$message.success('保存成功');
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 打开默认全屏弹窗 */
|
||||
openFullDialog() {
|
||||
if (!this.visible2) {
|
||||
this.visible2 = true;
|
||||
}
|
||||
},
|
||||
/* 打开弹窗3 */
|
||||
openMoreDialog() {
|
||||
if (!this.visible3) {
|
||||
this.visible3 = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-modal-eg3 {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
left: auto;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,161 +0,0 @@
|
||||
<template>
|
||||
<a-card title="标签" :bordered="false">
|
||||
<div class="demo-tag-item">
|
||||
<div class="demo-tag-label">预设颜色:</div>
|
||||
<div class="demo-tag-content">
|
||||
<ele-tag
|
||||
:color="colors[type][0]"
|
||||
:size="size">标签一
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][1]"
|
||||
:size="size">标签二
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][2]"
|
||||
:size="size">标签三
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][3]"
|
||||
:size="size">标签四
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][4]"
|
||||
:size="size">标签五
|
||||
</ele-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-tag-item">
|
||||
<div class="demo-tag-label">圆角样式:</div>
|
||||
<div class="demo-tag-content">
|
||||
<ele-tag
|
||||
:color="colors[type][0]"
|
||||
:size="size"
|
||||
shape="round">标签一
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][1]"
|
||||
:size="size"
|
||||
shape="round">标签二
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][2]"
|
||||
:size="size"
|
||||
shape="round">标签三
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][3]"
|
||||
:size="size"
|
||||
shape="round">标签四
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][4]"
|
||||
:size="size"
|
||||
shape="round">标签五
|
||||
</ele-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-tag-item">
|
||||
<div class="demo-tag-label">圆形样式:</div>
|
||||
<div class="demo-tag-content">
|
||||
<ele-tag
|
||||
:color="colors[type][0]"
|
||||
:size="size"
|
||||
shape="circle">1
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][1]"
|
||||
:size="size"
|
||||
shape="circle">2
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][2]"
|
||||
:size="size"
|
||||
shape="circle">3
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][3]"
|
||||
:size="size"
|
||||
shape="circle">4
|
||||
</ele-tag>
|
||||
<ele-tag
|
||||
:color="colors[type][4]"
|
||||
:size="size"
|
||||
shape="circle">5
|
||||
</ele-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-tag-item" style="align-items: flex-start;">
|
||||
<div class="demo-tag-label">标签输入:</div>
|
||||
<div class="demo-tag-content">
|
||||
<ele-edit-tag
|
||||
v-model:data="tags"
|
||||
:color="colors[type][0]"
|
||||
:size="size"/>
|
||||
<div>{{ JSON.stringify(tags) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-tag-item">
|
||||
<div class="demo-tag-label">尺寸选择:</div>
|
||||
<div class="demo-tag-content">
|
||||
<a-radio-group
|
||||
:options="sizes"
|
||||
v-model:value="size"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-tag-item">
|
||||
<div class="demo-tag-label">主题选择:</div>
|
||||
<div class="demo-tag-content">
|
||||
<a-radio-group
|
||||
:options="types"
|
||||
v-model:value="type"/>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MoreTag',
|
||||
data() {
|
||||
return {
|
||||
size: 'mini',
|
||||
sizes: [
|
||||
{label: 'mini', value: 'mini'},
|
||||
{label: 'small', value: 'small'},
|
||||
{label: 'middle', value: 'middle'},
|
||||
{label: 'large', value: 'large'}
|
||||
],
|
||||
colors: [
|
||||
['', 'blue', 'green', 'orange', 'red'],
|
||||
['#909399', '#1890ff', '#52c41a', '#fa8c16', '#f5222d']
|
||||
],
|
||||
types: [
|
||||
{label: 'presets', value: 0},
|
||||
{label: 'custom', value: 1},
|
||||
],
|
||||
type: 0,
|
||||
tags: ['标签一', '标签二', '标签三']
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-tag-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.demo-tag-item .demo-tag-label {
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.demo-tag-item .demo-tag-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.demo-tag-item + .demo-tag-item {
|
||||
margin-top: 22px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,334 +0,0 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<a-card title="基础演示" :bordered="false">
|
||||
<!-- 操作按钮 -->
|
||||
<a-space style="margin-bottom: 16px;">
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="!ready1"
|
||||
@click="play">播放
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="!ready1"
|
||||
@click="pause">暂停
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="!ready1"
|
||||
@click="replay">重新播放
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="!ready1"
|
||||
@click="changeSrc">切换视频源
|
||||
</a-button>
|
||||
</a-space>
|
||||
<!-- 播放器 -->
|
||||
<xgplayer
|
||||
:config="config1"
|
||||
@player="onPlayer1"/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<a-card title="显示弹幕" :bordered="false">
|
||||
<!-- 操作按钮 -->
|
||||
<a-space style="margin-bottom: 16px;">
|
||||
<a-input
|
||||
style="width: 160px;"
|
||||
v-model:value="dmText"
|
||||
placeholder="请输入弹幕内容"
|
||||
:disabled="!ready2"/>
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="!ready2"
|
||||
@click="shoot">发射
|
||||
</a-button>
|
||||
</a-space>
|
||||
<!-- 播放器 -->
|
||||
<xgplayer
|
||||
:config="config2"
|
||||
@player="onPlayer2"/>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Xgplayer from 'xgplayer-vue';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionPlayer',
|
||||
components: {Xgplayer},
|
||||
data() {
|
||||
return {
|
||||
// 视频播放器一配置
|
||||
config1: {
|
||||
id: 'demoPlayer1',
|
||||
lang: 'zh-cn',
|
||||
fluid: true,
|
||||
// 视频地址
|
||||
url: 'https://s1.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4',
|
||||
// 封面
|
||||
poster: 'https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/solution/general-video/css/img/scene/1.png',
|
||||
// 开启倍速播放
|
||||
playbackRate: [0.5, 1, 1.5, 2],
|
||||
// 开启画中画
|
||||
pip: true
|
||||
},
|
||||
// 视频播放器一实例
|
||||
player1: null,
|
||||
// 视频播放器一是否实例化完成
|
||||
ready1: false,
|
||||
// 视频播放器二配置
|
||||
config2: {
|
||||
id: 'demoPlayer2',
|
||||
lang: 'zh-cn',
|
||||
fluid: true,
|
||||
url: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_TheatricalTeaser_WeAreOverwatch_zhCN.mp4',
|
||||
poster: 'https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/solution/general-video/css/img/scene/1.png',
|
||||
danmu: {
|
||||
comments: [
|
||||
{
|
||||
id: '1',
|
||||
start: 0,
|
||||
txt: '空降',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
start: 1500,
|
||||
txt: '前方高能',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
start: 3500,
|
||||
txt: '弹幕护体',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
start: 4500,
|
||||
txt: '弹幕护体',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
start: 6000,
|
||||
txt: '前方高能',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
start: 8500,
|
||||
txt: '弹幕护体',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
start: 10000,
|
||||
txt: '666666666',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
start: 12500,
|
||||
txt: '前方高能',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
start: 15500,
|
||||
txt: '666666666',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
start: 16500,
|
||||
txt: '666666666',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
start: 18000,
|
||||
txt: '关弹幕，保智商',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '12',
|
||||
start: 20500,
|
||||
txt: '关弹幕，保智商',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '13',
|
||||
start: 22000,
|
||||
txt: '666666666',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '14',
|
||||
start: 25500,
|
||||
txt: '666666666',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '15',
|
||||
start: 26000,
|
||||
txt: '前方高能',
|
||||
duration: 15000,
|
||||
color: true,
|
||||
style: {
|
||||
color: '#ffcd08',
|
||||
fontSize: '20px'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
// 视频播放器二实例
|
||||
player2: null,
|
||||
// 视频播放器二是否实例化完成
|
||||
ready2: false,
|
||||
// 弹幕输入内容
|
||||
dmText: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 播放器一渲染完成 */
|
||||
onPlayer1(e) {
|
||||
this.player1 = e;
|
||||
this.player1.on('play', () => {
|
||||
this.ready1 = true;
|
||||
});
|
||||
},
|
||||
/* 播放 */
|
||||
play() {
|
||||
if (this.player1.paused) {
|
||||
this.player1.play();
|
||||
}
|
||||
},
|
||||
/* 暂停 */
|
||||
pause() {
|
||||
if (!this.player1.paused) {
|
||||
this.player1.pause();
|
||||
}
|
||||
},
|
||||
/* 重新播放 */
|
||||
replay() {
|
||||
this.player1.replay();
|
||||
},
|
||||
/* 切换视频源 */
|
||||
changeSrc() {
|
||||
this.player1.src = 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_TheatricalTeaser_WeAreOverwatch_zhCN.mp4';
|
||||
if (this.player1.paused) {
|
||||
this.player1.play();
|
||||
}
|
||||
},
|
||||
/* 播放器二渲染完成 */
|
||||
onPlayer2(e) {
|
||||
this.player2 = e;
|
||||
this.player2.on('play', () => {
|
||||
this.ready2 = true;
|
||||
});
|
||||
},
|
||||
/* 发射弹幕 */
|
||||
shoot() {
|
||||
if (!this.dmText) {
|
||||
this.$message.error('请输入弹幕内容');
|
||||
return;
|
||||
}
|
||||
this.player2.danmu.sendComment({
|
||||
id: new Date().getTime(),
|
||||
duration: 15000,
|
||||
color: true,
|
||||
start: this.player2.currentTime * 1000,
|
||||
txt: this.dmText,
|
||||
style: {
|
||||
color: '#fa1f41',
|
||||
fontSize: '20px',
|
||||
border: 'solid 1px #fa1f41'
|
||||
}
|
||||
});
|
||||
this.dmText = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,366 +0,0 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-card title="打印当前页面" :bordered="false">
|
||||
<div style="margin-bottom: 16px;">支持IE浏览器打印预览</div>
|
||||
<a-space>
|
||||
<a-button @click="print({})">打印当前页面</a-button>
|
||||
<a-button @click="print({horizontal:true})">横屏打印</a-button>
|
||||
<!--<a-button @click="print({blank:true})">新窗口打印</a-button>-->
|
||||
<a-button @click="print({hide:['.demo-hide-1']})">打印时隐藏指定内容</a-button>
|
||||
</a-space>
|
||||
<div style="margin-top: 16px;">
|
||||
<span class="ele-text-danger ele-printer-hide">此段内容会在所有打印时自动隐藏，打印完自动复原。</span>
|
||||
<span class="ele-text-primary demo-hide-1">此段内容在指定打印时才隐藏。</span>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-card title="打印任意内容" :bordered="false">
|
||||
<a-space>
|
||||
<a-button @click="printHtml()">打印任意内容</a-button>
|
||||
<!--<a-button @click="printHtml(true)">新窗口打印</a-button>-->
|
||||
<a-button @click="printAddHeader">设置页眉页脚</a-button>
|
||||
<a-button @click="printImage">打印图片</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
<a-card title="分页打印" :bordered="false">
|
||||
<a-space>
|
||||
<a-button @click="printPage()">分页打印</a-button>
|
||||
<!--<a-button @click="printPage(true)">新窗口分页打印</a-button>-->
|
||||
<a-button @click="printPageAddHeader">分页打印设置页眉页脚</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
<a-card title="进阶示例" :bordered="false">
|
||||
<a-space>
|
||||
<a-button @click="printDataTable">打印数据表格</a-button>
|
||||
<a-tooltip title="对于复杂的打印需求，可以后端生成pdf给前端打印">
|
||||
<a-button @click="printPdf">打印pdf</a-button>
|
||||
</a-tooltip>
|
||||
<a-button @click="printQrCode">打印条码</a-button>
|
||||
<a-button @click="printTable">打印自定义表格</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import printer from 'ele-admin-pro/packages/printer.js';
|
||||
|
||||
export default {
|
||||
name: 'ExtensionPrinter',
|
||||
data() {
|
||||
return {
|
||||
users: [
|
||||
{
|
||||
key: 1,
|
||||
username: '张小三',
|
||||
amount: 18,
|
||||
province: '浙江',
|
||||
city: '杭州',
|
||||
zone: '西湖区',
|
||||
street: '西溪街道',
|
||||
address: '西溪花园30栋1单元',
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
username: '李小四',
|
||||
amount: 39,
|
||||
province: '江苏',
|
||||
city: '苏州',
|
||||
zone: '姑苏区',
|
||||
street: '丝绸路',
|
||||
address: '天墅之城9幢2单元',
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
username: '王小五',
|
||||
amount: 8,
|
||||
province: '江西',
|
||||
city: '南昌',
|
||||
zone: '青山湖区',
|
||||
street: '艾溪湖办事处',
|
||||
address: '中兴和园1幢3单元',
|
||||
},
|
||||
{
|
||||
key: 4,
|
||||
username: '赵小六',
|
||||
amount: 16,
|
||||
province: '福建',
|
||||
city: '泉州',
|
||||
zone: '丰泽区',
|
||||
street: '南洋街道',
|
||||
address: '南洋村6幢1单元',
|
||||
},
|
||||
{
|
||||
key: 5,
|
||||
username: '孙小七',
|
||||
amount: 12,
|
||||
province: '湖北',
|
||||
city: '武汉',
|
||||
zone: '武昌区',
|
||||
street: '武昌大道',
|
||||
address: '两湖花园16幢2单元',
|
||||
},
|
||||
{
|
||||
key: 6,
|
||||
username: '周小八',
|
||||
amount: 11,
|
||||
province: '安徽',
|
||||
city: '黄山',
|
||||
zone: '黄山区',
|
||||
street: '汤口镇',
|
||||
address: '温泉村21号',
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 打印当前页面 */
|
||||
print(options) {
|
||||
printer.print(options);
|
||||
},
|
||||
/* 打印任意内容 */
|
||||
printHtml(blank) {
|
||||
printer.printHtml({
|
||||
html: '<h1>Hello! Welcome To EleAdminPro!</h1>',
|
||||
blank: blank
|
||||
});
|
||||
},
|
||||
/* 打印设置页眉页脚 */
|
||||
printAddHeader() {
|
||||
printer.printHtml({
|
||||
html: `
|
||||
<div style="padding: 0 60px;">
|
||||
<h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
|
||||
<h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
|
||||
<h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
|
||||
<h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
|
||||
<h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
|
||||
<h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
|
||||
</div>
|
||||
`,
|
||||
margin: 0,
|
||||
header: `
|
||||
<div style="text-align: center;font-size: 12px;padding: 15px 30px 25px;">
|
||||
<span style="float: left;">我是页眉左侧</span>
|
||||
<span>我是页眉</span>
|
||||
<span style="float: right;">我是页眉右侧</span>
|
||||
</div>`,
|
||||
footer: `
|
||||
<div style="text-align: center;font-size: 12px;padding: 15px 30px 25px;">
|
||||
<span style="float: left;">我是页脚左侧</span>
|
||||
<span>我是页脚</span>
|
||||
<span style="float: right;">我是页脚右侧</span>
|
||||
</div>`
|
||||
});
|
||||
},
|
||||
/* 打印图片 */
|
||||
printImage() {
|
||||
printer.printHtml({
|
||||
html: '<img src="https://cdn.eleadmin.com/20200610/LrCTN2j94lo9N7wEql7cBr1Ux4rHMvmZ.jpg" style="width: 100%;"/>'
|
||||
});
|
||||
},
|
||||
/* 分页打印 */
|
||||
printPage(blank) {
|
||||
printer.printPage({
|
||||
htmls: [
|
||||
'<div>我是第一页</div>',
|
||||
'<div>我是第二页</div>',
|
||||
'<div>我是第三页</div>',
|
||||
'<div>我是第四页</div>',
|
||||
'<div>我是第五页</div>'
|
||||
],
|
||||
style: '<style>div{color: red;}</style>',
|
||||
blank: blank
|
||||
});
|
||||
},
|
||||
/* 分页打印设置页眉页脚 */
|
||||
printPageAddHeader() {
|
||||
printer.printPage({
|
||||
htmls: [
|
||||
'<span class="ele-printer-num">1/5</span><div>我是第一页</div>',
|
||||
'<span class="ele-printer-num">2/5</span><div>我是第二页</div>',
|
||||
'<span class="ele-printer-num">3/5</span><div>我是第三页</div>',
|
||||
'<span class="ele-printer-num">4/5</span><div>我是第四页</div>',
|
||||
'<span class="ele-printer-num">5/5</span><div>我是第五页</div>'
|
||||
],
|
||||
margin: 0,
|
||||
padding: '30px 60px',
|
||||
header: `
|
||||
<div style="text-align: center;font-size: 12px;padding: 15px 30px;">
|
||||
<span style="float: left;">我是页眉左侧</span>
|
||||
<span>我是页眉</span>
|
||||
<span style="float: right;">我是页眉右侧</span>
|
||||
</div>`,
|
||||
footer: `
|
||||
<div style="text-align: center;font-size: 12px;padding: 15px 30px;">
|
||||
<span style="float: left;">我是页脚左侧</span>
|
||||
<span>我是页脚</span>
|
||||
<span style="float: right;">我是页脚右侧</span>
|
||||
</div>`,
|
||||
style: `
|
||||
<style>
|
||||
.ele-printer-page-item > div { color: red; }
|
||||
.ele-printer-num {
|
||||
position: absolute;
|
||||
top: -35px;
|
||||
right: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>`
|
||||
});
|
||||
},
|
||||
/* 打印数据表格 */
|
||||
printDataTable() {
|
||||
let html = printer.makeTable(this.users, [
|
||||
[
|
||||
{field: 'username', width: 150, rowspan: 2, title: '联系人'},
|
||||
{align: 'center', colspan: 3, title: '地址'},
|
||||
{field: 'amount', width: 120, rowspan: 2, title: '金额', align: 'center'}
|
||||
],
|
||||
[
|
||||
{field: 'province', width: 120, title: '省'},
|
||||
{field: 'city', width: 120, title: '市'},
|
||||
{
|
||||
width: 200, title: '区', templet: (d) => {
|
||||
return `<span style="color:red;">${d.zone}</span>`;
|
||||
}
|
||||
}
|
||||
]
|
||||
]);
|
||||
printer.printHtml({html: '<p>提供数据和cols配置自动生成复杂表格，非常的方便</p>' + html});
|
||||
},
|
||||
/* 打印pdf */
|
||||
printPdf() {
|
||||
printer.printPdf({url: 'https://cdn.eleadmin.com/20200610/20200708224450.pdf'});
|
||||
},
|
||||
/* 打印条码 */
|
||||
printQrCode() {
|
||||
let html = `
|
||||
<div class="code-group">
|
||||
<div class="code-group-title">EasyWeb授权凭证</div>
|
||||
<div class="code-group-body">
|
||||
<p>手机扫描右侧二维码，或登录</p>
|
||||
<p>网站https://easyweb.vip</p>
|
||||
<p>查询产品真伪</p>
|
||||
<img src="https://cdn.eleadmin.com/20200610/20200708230820.png" width="70px" height="70px"/>
|
||||
<span>515AE3X1</span>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.code-group {
|
||||
display: inline-block;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.code-group-title {
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 10px 15px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
.code-group-body {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding: 15px 115px 0 25px;
|
||||
min-height: 90px;
|
||||
}
|
||||
.code-group-body > p {
|
||||
margin: 0 0 13px 0;
|
||||
font-size: 15px;
|
||||
font-family: 幼圆;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
.code-group-body > img, .code-group-body > span {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 15px;
|
||||
}
|
||||
.code-group-body > span {
|
||||
top: 90px;
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
printer.printHtml({html: html});
|
||||
},
|
||||
/* 打印自定义表格 */
|
||||
printTable() {
|
||||
let html = `
|
||||
<h2 style="text-align: center;color: #333;">软工xxxx班课程表</h2>
|
||||
<table class="ele-printer-table">
|
||||
<colgroup>
|
||||
<col width="130px"/>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<th style="position: relative;">
|
||||
<span style="position: absolute;right: 20px;top: 10px;line-height: normal;">星期</span>
|
||||
<span style="position: absolute;left: 20px;bottom: 10px;line-height: normal;">时间</span>
|
||||
<div style="height: 1px; width:140px;background-color: #000;position: absolute;left: 0;top: 0;transform: rotate(21deg);transform-origin: 0 0;"></div>
|
||||
</th>
|
||||
<th>周一</th>
|
||||
<th>周二</th>
|
||||
<th>周三</th>
|
||||
<th>周四</th>
|
||||
<th>周五</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8:00-10:00</td>
|
||||
<td>HTML5网页设计<br/>曲丽丽 - 441教室</td>
|
||||
<td>数据库原理及应用<br/>严良 - 716机房</td>
|
||||
<td>JavaSE初级程序设计<br/>肖萧 - 715机房</td>
|
||||
<td></td>
|
||||
<td>JavaScript程序设计<br/>董娜 - 733机房</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10:30-12:30</td>
|
||||
<td></td>
|
||||
<td>JavaScript程序设计<br/>董娜 - 733机房</td>
|
||||
<td></td>
|
||||
<td>锋利的jQuery<br/>程咏 - 303教室</td>
|
||||
<td>JavaEE应用开发<br/>周星 - 303教室</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="6" style="height: auto;">午休</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>13:30-15:30</td>
|
||||
<td>JavaSE初级程序设计<br/>肖萧 - 715机房</td>
|
||||
<td></td>
|
||||
<td>HTML5网页设计<br/>曲丽丽 - 441教室</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>16:00-18:00</td>
|
||||
<td></td>
|
||||
<td>JavaEE应用开发<br/>周星 - 303教室</td>
|
||||
<td></td>
|
||||
<td>数据库原理及应用<br/>严良 - 716机房</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<style>
|
||||
th, td {
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
}
|
||||
td {
|
||||
height: 110px;
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
printer.printHtml({html: html, horizontal: true});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ant-space {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ant-space .ant-btn {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,401 +0,0 @@
|
||||
<template>
|
||||
<a-page-header :ghost="false" title="复杂表单">
|
||||
<div class="ele-text-secondary">复杂表单常见于一次性输入和提交大批量数据的场景。</div>
|
||||
</a-page-header>
|
||||
<div class="ele-body ele-body-card" style="padding-bottom: 48px;">
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 18}, sm: {span: 24}}">
|
||||
<a-card :bordered="false" title="仓库信息">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="仓库名:" name="name">
|
||||
<a-input
|
||||
v-model:value="form.name"
|
||||
placeholder="请输入仓库名"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="仓库域名:" name="url">
|
||||
<a-input
|
||||
v-model:value="form.url"
|
||||
placeholder="请输入"
|
||||
allow-clear
|
||||
addon-before="http://"
|
||||
addon-after=".com"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="仓库管理员:" name="administrator">
|
||||
<a-select
|
||||
v-model:value="form.administrator"
|
||||
placeholder="请选择仓库管理员"
|
||||
allow-clear>
|
||||
<a-select-option value="1">SunSmile</a-select-option>
|
||||
<a-select-option value="2">Jasmine</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="审批人:" name="approver">
|
||||
<a-select
|
||||
v-model:value="form.approver"
|
||||
placeholder="请选择审批人"
|
||||
allow-clear>
|
||||
<a-select-option value="1">SunSmile</a-select-option>
|
||||
<a-select-option value="2">Jasmine</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="生效日期:" name="datetime">
|
||||
<a-range-picker
|
||||
v-model:value="form.datetime"
|
||||
class="ele-fluid">
|
||||
<template #suffixIcon>
|
||||
<calendar-outlined/>
|
||||
</template>
|
||||
</a-range-picker>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="仓库类型:" name="type">
|
||||
<a-select
|
||||
v-model:value="form.type"
|
||||
placeholder="请选择仓库类型"
|
||||
allow-clear>
|
||||
<a-select-option value="private">私密</a-select-option>
|
||||
<a-select-option value="public">公开</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
<a-card :bordered="false" title="任务信息">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="任务名:" name="task">
|
||||
<a-input
|
||||
v-model:value="form.task"
|
||||
placeholder="请输入任务名"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="任务表述:" name="description">
|
||||
<a-input
|
||||
v-model:value="form.description"
|
||||
placeholder="请输入任务表述"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="执行人:" name="executor">
|
||||
<a-select
|
||||
v-model:value="form.executor"
|
||||
placeholder="请选择执行人"
|
||||
allow-clear>
|
||||
<a-select-option value="1">SunSmile</a-select-option>
|
||||
<a-select-option value="2">Jasmine</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="责任人:" name="officer">
|
||||
<a-select
|
||||
v-model:value="form.officer"
|
||||
placeholder="请选择责任人"
|
||||
allow-clear>
|
||||
<a-select-option value="1">SunSmile</a-select-option>
|
||||
<a-select-option value="2">Jasmine</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="提醒时间:" name="reminder">
|
||||
<a-time-picker
|
||||
v-model:value="form.reminder"
|
||||
placeholder="请选择提醒时间"
|
||||
value-format="hh:mm:ss"
|
||||
class="ele-fluid"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="任务类型:" name="taskType">
|
||||
<a-select
|
||||
v-model:value="form.taskType"
|
||||
placeholder="请选择任务类型"
|
||||
allow-clear>
|
||||
<a-select-option value="1">私密</a-select-option>
|
||||
<a-select-option value="2">公开</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
<a-card :bordered="false" title="选择成员">
|
||||
<!-- 数据表格 -->
|
||||
<a-table
|
||||
:data-source="users"
|
||||
row-key="__index"
|
||||
size="middle"
|
||||
:pagination="false"
|
||||
:scroll="{x: 'max-content'}">
|
||||
<a-table-column
|
||||
data-index="__index"
|
||||
align="center"
|
||||
:width="58"/>
|
||||
<a-table-column
|
||||
title="用户名"
|
||||
data-index="name">
|
||||
<template #default="{text,index}">
|
||||
<a-input
|
||||
v-if="index===editIndex"
|
||||
v-model:value="editRow.name"
|
||||
placeholder="请输入用户名"/>
|
||||
<span v-else>{{ text }}</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column
|
||||
title="工号"
|
||||
data-index="number">
|
||||
<template #default="{text,index}">
|
||||
<a-input
|
||||
v-if="index===editIndex"
|
||||
v-model:value="editRow.number"
|
||||
placeholder="请输入工号"/>
|
||||
<span v-else>{{ text }}</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column
|
||||
title="所属部门"
|
||||
data-index="department">
|
||||
<template #default="{text,index}">
|
||||
<a-select
|
||||
v-if="index===editIndex"
|
||||
v-model:value="editRow.department"
|
||||
placeholder="请选择部门">
|
||||
<a-select-option value="研发部">研发部</a-select-option>
|
||||
<a-select-option value="测试部">测试部</a-select-option>
|
||||
<a-select-option value="产品部">产品部</a-select-option>
|
||||
</a-select>
|
||||
<span v-else>{{ text }}</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column
|
||||
title="操作"
|
||||
key="action"
|
||||
align="center"
|
||||
:width="160">
|
||||
<template #default="{index,record}">
|
||||
<a-space v-if="index===editIndex">
|
||||
<a @click="onSave(record, index)">保存</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a @click="onCancel(record, index)">取消</a>
|
||||
</a-space>
|
||||
<a-space v-else>
|
||||
<a @click="onEdit(record, index)">修改</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-popconfirm
|
||||
title="确定要删除此用户吗？"
|
||||
@confirm="onRemove(record,index)">
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</a-table>
|
||||
<a-button
|
||||
block
|
||||
type="dashed"
|
||||
style="margin-top: 16px;"
|
||||
@click="addRow">
|
||||
<template #icon>
|
||||
<plus-outlined/>
|
||||
</template>
|
||||
<span>新增成员</span>
|
||||
</a-button>
|
||||
</a-card>
|
||||
<!-- 底部工具栏 -->
|
||||
<div class="ele-bottom-tool">
|
||||
<div v-if="validMsg" class="ele-text-danger">
|
||||
<close-circle-outlined/>
|
||||
<span>{{ validMsg }}</span>
|
||||
</div>
|
||||
<div class="ele-bottom-tool-actions">
|
||||
<a-button
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="submit">提交
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
CalendarOutlined,
|
||||
PlusOutlined,
|
||||
CloseCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'FormAdvanced',
|
||||
components: {
|
||||
CalendarOutlined,
|
||||
PlusOutlined,
|
||||
CloseCircleOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 加载状态
|
||||
loading: false,
|
||||
// 表单数据
|
||||
form: {
|
||||
name: '',
|
||||
url: '',
|
||||
datetime: [],
|
||||
task: '',
|
||||
description: '',
|
||||
reminder: ''
|
||||
},
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
name: [
|
||||
{required: true, message: '请输入仓库名', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
url: [
|
||||
{required: true, message: '请输入仓库域名', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
administrator: [
|
||||
{required: true, message: '请选择仓库管理员', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
approver: [
|
||||
{required: true, message: '请选择审批人', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
datetime: [
|
||||
{required: true, message: '请选择生效日期', type: 'array', trigger: 'blur'}
|
||||
],
|
||||
type: [
|
||||
{required: true, message: '请选择仓库类型', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
task: [
|
||||
{required: true, message: '请输入任务名', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
description: [
|
||||
{required: true, message: '请输入任务表述', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
executor: [
|
||||
{required: true, message: '请选择执行人', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
officer: [
|
||||
{required: true, message: '请选择责任人', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
reminder: [
|
||||
{required: true, message: '请选择提醒时间', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
taskType: [
|
||||
{required: true, message: '请选择任务类型', type: 'string', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 用户列表
|
||||
users: [
|
||||
{__index: 1, name: 'John Brown', number: '00001', department: '研发部'},
|
||||
{__index: 2, name: 'Jim Green', number: '00002', department: '产品部'},
|
||||
{__index: 3, name: 'Joe Black', number: '00003', department: '产品部'}
|
||||
],
|
||||
// 表单验证失败提示信息
|
||||
validMsg: '',
|
||||
// 表格编辑行索引
|
||||
editIndex: null,
|
||||
// 表格编辑行数据
|
||||
editRow: {}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 表单提交 */
|
||||
submit() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
this.validMsg = '';
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.$message.success('提交成功');
|
||||
}, 1500);
|
||||
}).catch((e) => {
|
||||
this.validMsg = ` 共有 ${e.errorFields.length} 项校验不通过`;
|
||||
});
|
||||
},
|
||||
/* 添加一行 */
|
||||
addRow() {
|
||||
if (this.users.length && this.users[this.users.length - 1].__is_add) {
|
||||
return;
|
||||
}
|
||||
this.editRow = {
|
||||
__is_add: true, // 此字段标识为添加状态
|
||||
__index: this.users.length + 1 // 此字段标识索引
|
||||
};
|
||||
this.editIndex = this.users.length;
|
||||
this.users.push(this.editRow);
|
||||
},
|
||||
/* 修改行 */
|
||||
onEdit(row, index) {
|
||||
if (this.users.length && this.users[this.users.length - 1].__is_add) {
|
||||
return;
|
||||
}
|
||||
this.editIndex = index;
|
||||
this.editRow = Object.assign({}, row);
|
||||
},
|
||||
/* 删除行 */
|
||||
onRemove(row, index) {
|
||||
this.users[this.editIndex].__is_add = false;
|
||||
this.users.splice(index, 1); // 删除数据
|
||||
// 重置__index
|
||||
this.users = this.users.map((d, index) => {
|
||||
return Object.assign({}, d, {
|
||||
__index: index + 1
|
||||
});
|
||||
})
|
||||
// 如果需要请求接口删除可以在这里写
|
||||
},
|
||||
/* 保存编辑 */
|
||||
onSave(row, index) {
|
||||
if (!this.editRow.name) {
|
||||
this.$message.error('请输入用户');
|
||||
return;
|
||||
}
|
||||
if (!this.editRow.number) {
|
||||
this.$message.error('请输入工号');
|
||||
return;
|
||||
}
|
||||
if (!this.editRow.department) {
|
||||
this.$message.error('请选择部门');
|
||||
return;
|
||||
}
|
||||
this.users[index] = Object.assign({}, this.editRow, {
|
||||
__is_add: null
|
||||
});
|
||||
this.editIndex = null;
|
||||
this.editRow = {};
|
||||
// 如果需要请求接口保存可以在这里写
|
||||
},
|
||||
/* 取消编辑 */
|
||||
onCancel(row, index) {
|
||||
if (row.__is_add) {
|
||||
this.users.splice(index, 1);
|
||||
}
|
||||
this.editIndex = null;
|
||||
this.editRow = {};
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,185 +0,0 @@
|
||||
<template>
|
||||
<a-page-header :ghost="false" title="基础表单">
|
||||
<div class="ele-text-secondary">表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。</div>
|
||||
</a-page-header>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
style="max-width: 800px;margin: 0 auto;"
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 18}, sm: {span: 24}}">
|
||||
<a-form-item label="标题:" name="title">
|
||||
<a-input
|
||||
v-model:value="form.title"
|
||||
placeholder="请输入标题"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
<a-form-item label="起止日期:" name="datetime">
|
||||
<a-range-picker
|
||||
v-model:value="form.datetime"
|
||||
value-format="YYYY-MM-DD"
|
||||
class="ele-fluid">
|
||||
<template #suffixIcon>
|
||||
<calendar-outlined/>
|
||||
</template>
|
||||
</a-range-picker>
|
||||
</a-form-item>
|
||||
<a-form-item label="目标描述:" name="goal">
|
||||
<a-textarea
|
||||
v-model:value="form.goal"
|
||||
placeholder="请输入目标描述"
|
||||
:rows="4"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="衡量标准:" name="standard">
|
||||
<a-textarea
|
||||
v-model:value="form.standard"
|
||||
placeholder="请输入衡量标准"
|
||||
:rows="4"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="地点:" name="address">
|
||||
<a-select
|
||||
v-model:value="form.address"
|
||||
placeholder="请选择地点"
|
||||
allow-clear>
|
||||
<a-select-option value="1">地点一</a-select-option>
|
||||
<a-select-option value="2">地点二</a-select-option>
|
||||
<a-select-option value="3">地点三</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="邀评人:">
|
||||
<a-select
|
||||
v-model:value="form.invites"
|
||||
placeholder="请选择邀评人"
|
||||
mode="multiple"
|
||||
allow-clear>
|
||||
<a-select-option
|
||||
v-for="item in users"
|
||||
:key="item.id"
|
||||
:value="item.id">{{ item.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="权重:">
|
||||
<a-space>
|
||||
<a-input-number
|
||||
v-model:value="form.weight"
|
||||
:min="0"
|
||||
:max="100"/>
|
||||
<span>%</span>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<a-form-item label="目标公开:">
|
||||
<a-radio-group
|
||||
v-model:value="form.publicType"
|
||||
name="publicType">
|
||||
<a-radio :value="1">公开</a-radio>
|
||||
<a-radio :value="2">部分公开</a-radio>
|
||||
<a-radio :value="3">不公开</a-radio>
|
||||
</a-radio-group>
|
||||
<div style="margin-top: 12px;">
|
||||
<a-input
|
||||
v-if="form.publicType===2"
|
||||
placeholder="公开给"/>
|
||||
</div>
|
||||
<div class="ele-text-secondary" style="margin-top: 12px;">客户、邀评人默认被分享</div>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{md: {offset: 6}}">
|
||||
<a-space size="middle">
|
||||
<a-button @click="closePage">关闭</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="submit"
|
||||
:loading="loading">提交
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {CalendarOutlined} from '@ant-design/icons-vue';
|
||||
import {finishPageTab} from '@/utils/page-tab-util';
|
||||
|
||||
export default {
|
||||
name: 'FormBasic',
|
||||
components: {CalendarOutlined},
|
||||
data() {
|
||||
return {
|
||||
// 加载状态
|
||||
loading: false,
|
||||
// 表单数据
|
||||
form: {
|
||||
title: '',
|
||||
datetime: [],
|
||||
goal: '',
|
||||
standard: '',
|
||||
invites: [],
|
||||
weight: 0,
|
||||
publicType: 1
|
||||
},
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
title: [
|
||||
{required: true, message: '请输入标题', trigger: 'blur'}
|
||||
],
|
||||
datetime: [
|
||||
{required: true, message: '请选择起止日期', type: 'array', trigger: 'blur'}
|
||||
],
|
||||
goal: [
|
||||
{required: true, message: '请输入目标描述', trigger: 'blur'}
|
||||
],
|
||||
standard: [
|
||||
{required: true, message: '请输入衡量标准', trigger: 'blur'}
|
||||
],
|
||||
address: [
|
||||
{required: true, message: '请选择地点', type: 'string', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 邀评人下拉列表数据
|
||||
users: [
|
||||
{id: 1, name: 'SunSmile'},
|
||||
{id: 2, name: '你的名字很好听'},
|
||||
{id: 3, name: '全村人的希望'},
|
||||
{id: 4, name: 'Jasmine'},
|
||||
{id: 5, name: '酷酷的大叔'}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 提交 */
|
||||
submit() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
// 重置表单
|
||||
this.form = {
|
||||
title: '',
|
||||
datetime: [],
|
||||
goal: '',
|
||||
standard: '',
|
||||
address: '',
|
||||
invites: [],
|
||||
weight: 0,
|
||||
publicType: 1
|
||||
};
|
||||
this.$message.success('提交成功');
|
||||
}, 1500);
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 关闭当前页面 */
|
||||
closePage() {
|
||||
finishPageTab();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,228 +0,0 @@
|
||||
<template>
|
||||
<a-page-header :ghost="false" title="分步表单">
|
||||
<div class="ele-text-secondary">将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。</div>
|
||||
</a-page-header>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<div style="max-width: 800px;margin: 0 auto;">
|
||||
<a-steps :current="active" style="margin: 10px 0 30px 0;">
|
||||
<a-step title="第一步" description="填写转账信息"/>
|
||||
<a-step title="第二步" description="确认转账信息"/>
|
||||
<a-step title="第三步" description="转账成功"/>
|
||||
</a-steps>
|
||||
<!-- 第一步 -->
|
||||
<a-form
|
||||
v-if="active===0"
|
||||
ref="form1"
|
||||
:model="form1"
|
||||
:rules="rules1"
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 16}, sm: {span: 24}}">
|
||||
<a-form-item label="付款账户:" name="account">
|
||||
<a-select
|
||||
v-model:value="form1.account"
|
||||
placeholder="请选择付款账户"
|
||||
allow-clear>
|
||||
<a-select-option value="eleadmin@eclouds.com">eleadmin@eclouds.com</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="收款账户:" name="receiver">
|
||||
<a-input
|
||||
v-model:value="form1.receiver"
|
||||
placeholder="请输入收款账户"
|
||||
allow-clear>
|
||||
<template #addonBefore>
|
||||
<a-select
|
||||
v-model:value="form1.pay"
|
||||
style="width: 100px;margin: -5px -12px;">
|
||||
<a-select-option value="alipay">支付宝</a-select-option>
|
||||
<a-select-option value="wxpay">微信</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="收款人姓名:" name="name">
|
||||
<a-input
|
||||
v-model:value="form1.name"
|
||||
placeholder="请输入收款人姓名"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
<a-form-item label="转账金额:" name="amount">
|
||||
<a-input
|
||||
v-model:value.number="form1.amount"
|
||||
placeholder="请输入转账金额"
|
||||
prefix="￥"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{sm: {offset: 6}}">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="submit1"
|
||||
:loading="loading1">下一步
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<!-- 第二步 -->
|
||||
<a-form
|
||||
v-if="active===1"
|
||||
ref="form2"
|
||||
:model="form2"
|
||||
:rules="rules2"
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 16}, sm: {span: 24}}"
|
||||
class="ele-form-detail">
|
||||
<a-alert
|
||||
message="确认转账后，资金将直接打入对方账户，无法退回。"
|
||||
type="info"
|
||||
show-icon
|
||||
closable/>
|
||||
<a-form-item
|
||||
label="付款账户:"
|
||||
style="margin-top: 24px;">{{ form1.account }}
|
||||
</a-form-item>
|
||||
<a-form-item label="收款账户:">{{ form1.receiver }}</a-form-item>
|
||||
<a-form-item label="收款人姓名:">{{ form1.name }}</a-form-item>
|
||||
<a-form-item label="转账金额:">
|
||||
<span style="font-size: 24px;line-height: 1;">{{ form1.amount }}</span> 元
|
||||
</a-form-item>
|
||||
<a-divider style="margin: 20px 0 30px 0;"/>
|
||||
<a-form-item label="支付密码:" name="password">
|
||||
<a-input-password
|
||||
v-model:value="form2.password"
|
||||
placeholder="请输入支付密码"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:wrapper-col="{sm: {offset: 6}}"
|
||||
style="margin-top: 24px;">
|
||||
<a-space size="middle">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="submit2"
|
||||
:loading="loading2">下一步
|
||||
</a-button>
|
||||
<a-button @click="active=0">上一步</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<!-- 第三步 -->
|
||||
<div v-if="active===2">
|
||||
<a-result
|
||||
status="success"
|
||||
title="操作成功"
|
||||
sub-title="预计两小时内到账">
|
||||
<a-form
|
||||
:label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 16}, sm: {span: 24}}"
|
||||
class="ele-form-detail">
|
||||
<a-form-item label="付款账户:">{{ form1.account }}</a-form-item>
|
||||
<a-form-item label="收款账户:">{{ form1.receiver }}</a-form-item>
|
||||
<a-form-item label="收款人姓名:">{{ form1.name }}</a-form-item>
|
||||
<a-form-item label="转账金额:">
|
||||
<span style="font-size: 24px;line-height: 1;">{{ form1.amount }}</span> 元
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<template #extra>
|
||||
<a-space size="middle">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="active=0">再转一笔
|
||||
</a-button>
|
||||
<a-button>查看账单</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-result>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="active===0">
|
||||
<a-divider style="margin: 35px 0 25px 0;"/>
|
||||
<a-alert type="info">
|
||||
<template #description>
|
||||
<h6 style="margin: 5px 0 15px 0;">说明</h6>
|
||||
<h6 style="margin-bottom: 10px;">转账到支付宝</h6>
|
||||
<p style="margin-bottom: 15px;">如果需要，这里可以放一些关于产品的常见问题说明。如果需要，
|
||||
这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
|
||||
<h6 style="margin-bottom: 10px;">转账到微信</h6>
|
||||
<p style="margin-bottom: 15px;">如果需要，这里可以放一些关于产品的常见问题说明。如果需要，
|
||||
这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
|
||||
</template>
|
||||
</a-alert>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FormStep',
|
||||
data() {
|
||||
return {
|
||||
// 选中步骤
|
||||
active: 0,
|
||||
// 表单一数据
|
||||
form1: {
|
||||
account: 'eleadmin@eclouds.com',
|
||||
receiver: 'test@example.com',
|
||||
pay: 'alipay',
|
||||
name: 'Alex',
|
||||
amount: 500
|
||||
},
|
||||
// 表单一验证规则
|
||||
rules1: {
|
||||
account: [
|
||||
{required: true, message: '请选择付款账户', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
receiver: [
|
||||
{required: true, message: '请输入收款账户', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
name: [
|
||||
{required: true, message: '请输入收款人姓名', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
amount: [
|
||||
{required: true, message: '请输入合法金额数字', type: 'number', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 步骤一提交状态
|
||||
loading1: false,
|
||||
// 表单二数据
|
||||
form2: {
|
||||
password: '123456',
|
||||
},
|
||||
// 表单二验证规则
|
||||
rules2: {
|
||||
password: [
|
||||
{required: true, message: '请输入支付密码', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 步骤二提交状态
|
||||
loading2: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 步骤一提交 */
|
||||
submit1() {
|
||||
this.$refs.form1.validate().then(() => {
|
||||
this.loading1 = true;
|
||||
setTimeout(() => {
|
||||
this.loading1 = false;
|
||||
this.active = 1;
|
||||
}, 300);
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 步骤二提交 */
|
||||
submit2() {
|
||||
this.$refs.form2.validate().then(() => {
|
||||
this.loading2 = true;
|
||||
setTimeout(() => {
|
||||
this.loading2 = false;
|
||||
this.active = 2;
|
||||
}, 300);
|
||||
}).catch(() => {
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,12 +1,13 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
123
|
||||
<a-card :bordered="false">这是首页
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "roadSoundStatistic"
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,417 +0,0 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-card :bordered="false">
|
||||
<a-row>
|
||||
<a-col :md="8" :sm="24" :xs="24">
|
||||
<div class="ele-text-center">
|
||||
<div style="margin-bottom: 8px;">进行中的任务</div>
|
||||
<h2>10 个任务</h2>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24" :xs="24">
|
||||
<div class="ele-text-center">
|
||||
<div style="margin-bottom: 8px;">剩余任务</div>
|
||||
<h2>3 个任务</h2>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24" :xs="24">
|
||||
<div class="ele-text-center">
|
||||
<div style="margin-bottom: 8px;">任务总耗时</div>
|
||||
<h2>120 个小时</h2>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
<a-card :bordered="false">
|
||||
<!-- 头部工具栏 -->
|
||||
<div class="ele-table-tool">
|
||||
<h6 class="ele-table-tool-title">复杂列表</h6>
|
||||
<a-space size="middle">
|
||||
<a-radio-group
|
||||
v-model:value="search.state"
|
||||
@change="query">
|
||||
<a-radio-button value="0">全部</a-radio-button>
|
||||
<a-radio-button value="1">进行中</a-radio-button>
|
||||
<a-radio-button value="2">已完成</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-input-search
|
||||
v-model:value="search.keyword"
|
||||
placeholder="请输入"
|
||||
style="width: 200px"
|
||||
@search="query">
|
||||
<template #enterButton>
|
||||
<a-button>
|
||||
<template #icon>
|
||||
<search-outlined/>
|
||||
</template>
|
||||
</a-button>
|
||||
</template>
|
||||
</a-input-search>
|
||||
</a-space>
|
||||
</div>
|
||||
<a-button
|
||||
block
|
||||
type="dashed"
|
||||
@click="openEdit()">
|
||||
<template #icon>
|
||||
<plus-outlined/>
|
||||
</template>
|
||||
<span>添加</span>
|
||||
</a-button>
|
||||
<!-- 数据列表 -->
|
||||
<a-spin :spinning="loading">
|
||||
<div v-for="(item,index) in data" :key="index">
|
||||
<div class="basic-list-item">
|
||||
<div class="ele-cell">
|
||||
<a-avatar
|
||||
shape="square"
|
||||
:size="60"
|
||||
:src="item.cover"/>
|
||||
<div class="ele-cell-content">
|
||||
<div class="ele-cell-title">{{ item.title }}</div>
|
||||
<div class="ele-cell-desc">{{ item.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="basic-list-item-owner">
|
||||
<div>发布人</div>
|
||||
<div class="ele-text-secondary">{{ item.user }}</div>
|
||||
</div>
|
||||
<div class="basic-list-item-time">
|
||||
<div>开始时间</div>
|
||||
<div class="ele-text-secondary">{{ item.time }}</div>
|
||||
</div>
|
||||
<div class="basic-list-item-progress">
|
||||
<a-progress
|
||||
:percent="item.progress"
|
||||
:status="item.status"/>
|
||||
</div>
|
||||
<div class="basic-list-item-tool">
|
||||
<a-space>
|
||||
<a @click="openEdit(item)">编辑</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-dropdown>
|
||||
<a>
|
||||
<span>更多<down-outlined class="ele-text-small"/></span>
|
||||
</a>
|
||||
<template #overlay>
|
||||
<a-menu @click="(obj) => dropClick(obj.key, item)">
|
||||
<a-menu-item key="share">分享</a-menu-item>
|
||||
<a-menu-item key="remove">删除</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider/>
|
||||
</div>
|
||||
<div class="ele-text-center" style="margin-top: 18px;">
|
||||
<a-pagination
|
||||
v-model:current="page.page"
|
||||
:total="count"
|
||||
show-quick-jumper
|
||||
@change="query"/>
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-card>
|
||||
<!-- 编辑弹窗 -->
|
||||
<a-modal
|
||||
:width="460"
|
||||
v-model:visible="showEdit"
|
||||
:confirm-loading="editLoading"
|
||||
:title="form.id?'任务编辑':'任务添加'"
|
||||
:body-style="{paddingBottom: '8px'}"
|
||||
@ok="save">
|
||||
<a-form
|
||||
ref="editForm"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{md: {span: 5}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 19}, sm: {span: 24}}">
|
||||
<a-form-item label="任务名称:" name="title">
|
||||
<a-input
|
||||
v-model:value="form.title"
|
||||
placeholder="请输入任务名称"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
<a-form-item label="开始时间:" name="time">
|
||||
<a-date-picker
|
||||
v-model:value="form.time"
|
||||
placeholder="请选择开始时间"
|
||||
show-time
|
||||
value-format="YYYY-MM-DD hh:mm:ss"
|
||||
class="ele-fluid"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="负责人:" name="user">
|
||||
<a-select
|
||||
v-model:value="form.user"
|
||||
placeholder="请选择负责人"
|
||||
allow-clear>
|
||||
<a-select-option value="SunSmile">SunSmile</a-select-option>
|
||||
<a-select-option value="Pojin">Pojin</a-select-option>
|
||||
<a-select-option value="SuperWill">SuperWill</a-select-option>
|
||||
<a-select-option value="Jasmine">Jasmine</a-select-option>
|
||||
<a-select-option value="Vast">Vast</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="任务描述:">
|
||||
<a-textarea
|
||||
v-model:value="form.content"
|
||||
placeholder="请输入任务描述"
|
||||
:rows="4"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {createVNode} from 'vue';
|
||||
import {
|
||||
SearchOutlined,
|
||||
PlusOutlined,
|
||||
DownOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'ListAdvanced',
|
||||
components: {
|
||||
SearchOutlined,
|
||||
PlusOutlined,
|
||||
DownOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 列表加载状态
|
||||
loading: false,
|
||||
// 列表数据
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'ElementUI',
|
||||
time: '2020-06-13 08:33',
|
||||
user: 'SunSmile',
|
||||
progress: 87,
|
||||
content: 'Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Vue.js',
|
||||
time: '2020-06-13 06:40',
|
||||
user: 'Pojin',
|
||||
progress: 100,
|
||||
content: 'Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Vuex',
|
||||
time: '2020-06-13 04:40',
|
||||
user: 'SuperWill',
|
||||
progress: 75,
|
||||
content: 'Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Vue Router',
|
||||
time: '2020-06-13 02:40',
|
||||
user: 'Jasmine',
|
||||
progress: 65,
|
||||
content: 'Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Sass',
|
||||
time: '2020-06-13 00:40',
|
||||
user: 'Vast',
|
||||
progress: 45,
|
||||
status: 'exception',
|
||||
content: 'Sass 是世界上最成熟、稳定、强大的专业级 CSS 扩展语言。',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
}
|
||||
],
|
||||
// 搜索表单
|
||||
search: {
|
||||
state: '0',
|
||||
keyword: ''
|
||||
},
|
||||
// 分页参数
|
||||
page: {
|
||||
page: 1,
|
||||
limit: 5
|
||||
},
|
||||
// 数据总数
|
||||
count: 100,
|
||||
// 是否显示编辑弹窗
|
||||
showEdit: false,
|
||||
// 编辑弹窗数据
|
||||
form: {},
|
||||
// 编辑弹窗表单验证规则
|
||||
rules: {
|
||||
title: [
|
||||
{required: true, message: '请输入任务名称', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
time: [
|
||||
{required: true, message: '请选择开始时间', type: 'string', trigger: 'blur'}
|
||||
],
|
||||
user: [
|
||||
{required: true, message: '请选择负责人', type: 'string', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 编辑表单提交状态
|
||||
editLoading: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 查询数据 */
|
||||
query() {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 300);
|
||||
},
|
||||
/* 显示编辑弹窗 */
|
||||
openEdit(row) {
|
||||
if (row) {
|
||||
this.form = Object.assign({}, row);
|
||||
} else {
|
||||
this.form = {};
|
||||
}
|
||||
this.showEdit = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.editForm.clearValidate();
|
||||
});
|
||||
},
|
||||
/* 保存编辑 */
|
||||
save() {
|
||||
this.$refs.editForm.validate().then(() => {
|
||||
this.editLoading = true;
|
||||
setTimeout(() => {
|
||||
this.editLoading = false;
|
||||
this.showEdit = false;
|
||||
this.$message.success('保存成功');
|
||||
if (this.form.id) { // 保存修改
|
||||
Object.assign(this.data.filter(d => d.id === this.form.id)[0], this.form);
|
||||
} else { // 保存添加
|
||||
this.data.push(Object.assign({
|
||||
id: new Date().getTime(),
|
||||
cover: 'https://cdn.eleadmin.com/20200610/RZ8FQmZfHkcffMlTBCJllBFjEhEsObVo.jpg'
|
||||
}, this.form));
|
||||
}
|
||||
}, 300);
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 下拉菜单点击事件 */
|
||||
dropClick(command, item) {
|
||||
console.log(item);
|
||||
if (command === 'remove') { // 删除
|
||||
this.$confirm({
|
||||
title: '提示',
|
||||
content: '确定删除该任务吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
this.$message.success('删除成功');
|
||||
}
|
||||
});
|
||||
} else if (command === 'share') {
|
||||
this.$message.success('点击了分享');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/** 列表样式 */
|
||||
.basic-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 8px;
|
||||
}
|
||||
|
||||
.basic-list-item .ele-cell {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.basic-list-item .basic-list-item-owner {
|
||||
width: 80px;
|
||||
padding: 0 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.basic-list-item .basic-list-item-time {
|
||||
width: 160px;
|
||||
padding: 0 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.basic-list-item .ele-text-secondary {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.basic-list-item .basic-list-item-progress {
|
||||
width: 180px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.basic-list-item .basic-list-item-tool {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media screen and (max-width: 992px) {
|
||||
.basic-list-item .basic-list-item-owner,
|
||||
.basic-list-item .basic-list-item-time,
|
||||
.basic-list-item .basic-list-item-progress,
|
||||
.basic-list-item .basic-list-item-tool {
|
||||
width: auto;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.basic-list-item .basic-list-item-progress {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.basic-list-item {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.basic-list-item .basic-list-item-owner,
|
||||
.basic-list-item .basic-list-item-time,
|
||||
.basic-list-item .basic-list-item-progress,
|
||||
.basic-list-item .basic-list-item-tool {
|
||||
width: auto;
|
||||
padding: 8px 0 0 0;
|
||||
}
|
||||
|
||||
.basic-list-item .ele-text-secondary {
|
||||
margin-top: 0;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.basic-list-item .basic-list-item-owner > div,
|
||||
.basic-list-item .basic-list-item-time > div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.basic-list-item .basic-list-item-tool {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ele-table-tool .ant-input-search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ele-table-tool :deep(.ant-space-item) {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,335 +0,0 @@
|
||||
<template>
|
||||
<div class="ele-body ele-body-card">
|
||||
<a-card :bordered="false" :body-style="{paddingBottom: 0}">
|
||||
<!-- 搜索表单 -->
|
||||
<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="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="规则名称:">
|
||||
<a-input
|
||||
v-model:value="where.name"
|
||||
placeholder="请输入"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="状态:">
|
||||
<a-select
|
||||
v-model:value="where.state"
|
||||
placeholder="请选择"
|
||||
allow-clear>
|
||||
<a-select-option value="0">运行中</a-select-option>
|
||||
<a-select-option value="1">已上线</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col v-if="searchExpand" :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="描述:">
|
||||
<a-input
|
||||
v-model:value="where.desc"
|
||||
placeholder="请输入"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col v-if="searchExpand" :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="上次调度时间:">
|
||||
<a-date-picker
|
||||
v-model:value="where.lastTime"
|
||||
placeholder="请选择"
|
||||
show-time
|
||||
value-format="YYYY-MM-DD hh:mm:ss"
|
||||
class="ele-fluid"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col v-if="searchExpand" :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="服务调用次数:">
|
||||
<a-input-number
|
||||
v-model:value="where.callTimes"
|
||||
placeholder="请输入"
|
||||
:min="0"
|
||||
:max="100"
|
||||
class="ele-fluid"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item
|
||||
class="ele-text-right"
|
||||
:wrapper-col="{span: 24}">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="reload">查询</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
<a @click="searchExpand = !searchExpand">
|
||||
<span v-if="searchExpand">收起 <up-outlined class="ele-text-small"/></span>
|
||||
<span v-else>展开 <down-outlined class="ele-text-small"/></span>
|
||||
</a>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-card>
|
||||
<a-card :bordered="false">
|
||||
<a-alert
|
||||
type="info"
|
||||
show-icon
|
||||
style="margin-bottom: 16px;">
|
||||
<template #message>
|
||||
<span>已选择 <b class="ele-text-primary">{{ choose.length }}</b> 项<em/></span>
|
||||
<span>服务调用次数总计 <b>{{ sumTimes }} 万</b><em/><em/></span>
|
||||
<a @click="clearChoose">清空</a>
|
||||
</template>
|
||||
</a-alert>
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="table"
|
||||
row-key="id"
|
||||
title="基础列表"
|
||||
:datasource="url"
|
||||
:columns="columns"
|
||||
:where="where"
|
||||
:custom-row="customRow"
|
||||
v-model:selection="choose"
|
||||
:scroll="{x: 'max-content'}">
|
||||
<template #toolkit>
|
||||
<a-space size="middle">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="openEdit()"
|
||||
class="ele-btn-icon">
|
||||
<template #icon>
|
||||
<plus-outlined/>
|
||||
</template>
|
||||
<span>新建</span>
|
||||
</a-button>
|
||||
<a-dropdown :disabled="choose.length===0">
|
||||
<a-button class="ele-btn-icon">
|
||||
<span>批量操作 <down-outlined/></span>
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu @click="onDropClick">
|
||||
<a-menu-item key="del">批量删除</a-menu-item>
|
||||
<a-menu-item key="check">批量审批</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
<a-divider type="vertical"/>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a @click.stop="openEdit(record)">配置</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a @click.stop="doRSS(record)">订阅警报</a>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #state="{ record }">
|
||||
<a-badge
|
||||
:status="['processing', 'success', 'error', 'default'][record.state]"
|
||||
:text="['运行中', '已上线', '异常', '关闭'][record.state]"/>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
<!-- 编辑弹窗 -->
|
||||
<a-modal
|
||||
v-model:visible="showEdit"
|
||||
:title="form.id?'配置规则':'新建规则'"
|
||||
:width="520"
|
||||
:confirm-loading="loading"
|
||||
:body-style="{paddingBottom: '16px'}"
|
||||
@ok="save">
|
||||
<a-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{md: {span: 5}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 19}, sm: {span: 24}}">
|
||||
<a-form-item label="规则名称:" name="name">
|
||||
<a-input
|
||||
v-model:value="form.name"
|
||||
placeholder="请输入规则名称"
|
||||
allow-clear/>
|
||||
</a-form-item>
|
||||
<a-form-item label="描述:">
|
||||
<a-textarea
|
||||
v-model:value="form.desc"
|
||||
placeholder="请输入描述"
|
||||
:rows="4"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
DownOutlined,
|
||||
UpOutlined,
|
||||
PlusOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'ListBasic',
|
||||
components: {
|
||||
DownOutlined,
|
||||
UpOutlined,
|
||||
PlusOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 数据接口
|
||||
url: 'https://cdn.eleadmin.com/20200610/list-demo-basic.json',
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
key: 'index',
|
||||
customRender: ({index}) => `${this.$refs.table.tableIndex + index}`
|
||||
},
|
||||
{
|
||||
title: '规则名称',
|
||||
dataIndex: 'name',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'desc',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '服务调用次数',
|
||||
dataIndex: 'callTimes',
|
||||
customRender: ({text}) => `${text} 万`,
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'state',
|
||||
sorter: true,
|
||||
slots: {customRender: 'state'},
|
||||
filters: [
|
||||
{
|
||||
text: '运行中',
|
||||
value: '0'
|
||||
},
|
||||
{
|
||||
text: '已上线',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
text: '异常',
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
text: '关闭',
|
||||
value: '3'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '上次调度时间',
|
||||
dataIndex: 'lastTime',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
align: 'center',
|
||||
slots: {customRender: 'action'}
|
||||
}
|
||||
],
|
||||
// 表格选中数据
|
||||
choose: [],
|
||||
// 表格搜索条件
|
||||
where: {},
|
||||
// 编辑弹窗数据
|
||||
form: {},
|
||||
// 编辑弹窗表单验证规则
|
||||
rules: {
|
||||
name: [
|
||||
{required: true, message: '请输入规则名称', type: 'string', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
// 是否显示编辑弹窗
|
||||
showEdit: false,
|
||||
// 编辑表单提交状态
|
||||
loading: false,
|
||||
// 搜索表单是否展开
|
||||
searchExpand: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 计算服务总调用次数
|
||||
sumTimes() {
|
||||
let sum = 0;
|
||||
this.choose.forEach(d => sum += d.callTimes);
|
||||
return sum;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 设置行属性 */
|
||||
customRow(record) {
|
||||
return {
|
||||
onClick: () => {
|
||||
const index = this.choose.findIndex(d => d.id === record.id);
|
||||
if (index === -1) {
|
||||
this.choose = this.choose.concat([record]);
|
||||
} else {
|
||||
this.choose = this.choose.slice(0, index).concat(this.choose.slice(index + 1));
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
/* 刷新表格 */
|
||||
reload() {
|
||||
this.$refs.table.reload({page: 1, where: this.where});
|
||||
},
|
||||
/* 重置搜索 */
|
||||
reset() {
|
||||
this.where = {};
|
||||
this.reload();
|
||||
},
|
||||
/* 清空选择 */
|
||||
clearChoose() {
|
||||
this.choose = [];
|
||||
},
|
||||
/* 保存编辑 */
|
||||
save() {
|
||||
this.$refs.form.validate().then(() => {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.showEdit = false;
|
||||
this.$message.success('保存成功');
|
||||
}, 300);
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
/* 编辑 */
|
||||
openEdit(row) {
|
||||
this.form = Object.assign({}, row);
|
||||
this.showEdit = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.form.clearValidate();
|
||||
});
|
||||
},
|
||||
/* 订阅 */
|
||||
doRSS(row) {
|
||||
console.log(row);
|
||||
this.$message.success('订阅成功');
|
||||
},
|
||||
/* 下拉按钮点击 */
|
||||
onDropClick(obj) {
|
||||
if (obj.key === 'del') {
|
||||
this.$message.info('点击了批量删除');
|
||||
} else if (obj.key === 'check') {
|
||||
this.$message.info('点击了批量审批');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,120 +0,0 @@
|
||||
<template>
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-for="(item, index) in data"
|
||||
:key="index"
|
||||
:lg="6"
|
||||
:md="8"
|
||||
:sm="12"
|
||||
:xs="12">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
hoverable
|
||||
style="margin-top: 16px;">
|
||||
<div class="ele-cell" style="margin-bottom: 16px;">
|
||||
<a-avatar size="large" :src="item.cover"/>
|
||||
<h6 class="ele-cell-content">{{ item.title }}</h6>
|
||||
</div>
|
||||
<div class="ele-elip" style="margin-bottom: 6px;">网址：{{ item.url }}</div>
|
||||
<div class="ele-elip">最后更新时间：{{ item.time }}</div>
|
||||
<template #actions>
|
||||
<a-tooltip title="下载">
|
||||
<download-outlined/>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="编辑">
|
||||
<edit-outlined/>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="分享">
|
||||
<share-alt-outlined/>
|
||||
</a-tooltip>
|
||||
<a-dropdown>
|
||||
<ellipsis-outlined/>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>1st menu item</a-menu-item>
|
||||
<a-menu-item>2nd menu item</a-menu-item>
|
||||
<a-menu-item>3rd menu item</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
DownloadOutlined,
|
||||
EditOutlined,
|
||||
ShareAltOutlined,
|
||||
EllipsisOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'ListCardApplication',
|
||||
components: {
|
||||
DownloadOutlined,
|
||||
EditOutlined,
|
||||
ShareAltOutlined,
|
||||
EllipsisOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
title: 'ElementUI',
|
||||
url: 'https://element.eleme.cn',
|
||||
time: '2 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Vue.js',
|
||||
url: 'https://cn.vuejs.org',
|
||||
time: '4 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Vuex',
|
||||
url: 'https://vuex.vuejs.org',
|
||||
time: '12 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Vue Router',
|
||||
url: 'https://vuex.vuejs.org',
|
||||
time: '14 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Sass',
|
||||
url: 'https://www.sass.hk',
|
||||
time: '10 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Axios',
|
||||
url: 'http://www.axios-js.com',
|
||||
time: '16 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/faa0202700ee455b90fe77d8bef98bc0.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Webpack',
|
||||
url: 'https://www.webpackjs.com',
|
||||
time: '6 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/d3519518b00d42d3936b2ab5ce3a4cc3.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Node.js',
|
||||
url: 'http://nodejs.cn',
|
||||
time: '8 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200609/fe9196dd091e438fba115205c1003ee7.jpg'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,234 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false" style="margin-top: 16px;">
|
||||
<a-image-preview-group>
|
||||
<a-list
|
||||
:data-source="data"
|
||||
:loading="loading&&page===1"
|
||||
item-layout="vertical"
|
||||
size="large">
|
||||
<template #renderItem="{item,index}">
|
||||
<a-list-item :key="index">
|
||||
<a-list-item-meta :title="item.title">
|
||||
<template #description>
|
||||
<a-tag v-for="(tag,i) in item.tags" :key="i">
|
||||
{{ tag }}
|
||||
</a-tag>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
<div class="ele-text-heading">
|
||||
{{ item.content }}
|
||||
</div>
|
||||
<div class="ele-cell" style="margin-top: 16px;">
|
||||
<a-avatar :src="item.avatar" size="small"/>
|
||||
<div class="ele-cell-content">
|
||||
{{ item.user }} 发表于 {{ item.time }}
|
||||
</div>
|
||||
</div>
|
||||
<template #extra>
|
||||
<a-image
|
||||
:width="280"
|
||||
:src="item.cover"
|
||||
style="max-width: 100%;cursor: zoom-in;"/>
|
||||
</template>
|
||||
<template #actions>
|
||||
<span>
|
||||
<like-outlined/>
|
||||
<span><s/>{{ item.likes }}</span>
|
||||
</span>
|
||||
<span>
|
||||
<star-outlined/>
|
||||
<span><s/>{{ item.favorites }}</span>
|
||||
</span>
|
||||
<span>
|
||||
<message-outlined/>
|
||||
<span><s/>{{ item.comments }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</a-list-item>
|
||||
</template>
|
||||
<template #loadMore>
|
||||
<div class="ele-text-center" style="margin-top: 20px;">
|
||||
<a-button
|
||||
v-if="page!==1"
|
||||
:loading="loading"
|
||||
@click="query">
|
||||
{{ loading ? '加载中..' : '加载更多' }}
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-list>
|
||||
</a-image-preview-group>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
LikeOutlined,
|
||||
StarOutlined,
|
||||
MessageOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'ListCardArticle',
|
||||
components: {
|
||||
LikeOutlined,
|
||||
StarOutlined,
|
||||
MessageOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
title: 'ElementUI',
|
||||
content: 'Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。',
|
||||
time: '2 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/RZ8FQmZfHkcffMlTBCJllBFjEhEsObVo.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
},
|
||||
{
|
||||
title: 'Vue.js',
|
||||
content: 'Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。',
|
||||
time: '4 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: '你的名字很好听',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
},
|
||||
{
|
||||
title: 'Vuex',
|
||||
content: 'Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。',
|
||||
time: '12 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/4Z0QR2L0J1XStxBh99jVJ8qLfsGsOgjU.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: '全村人的希望',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
},
|
||||
{
|
||||
title: 'Vue Router',
|
||||
content: 'Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。',
|
||||
time: '14 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/ttkIjNPlVDuv4lUTvRX8GIlM2QqSe0jg.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
},
|
||||
{
|
||||
title: 'Sass',
|
||||
content: 'Sass 是世界上最成熟、稳定、强大的专业级 CSS 扩展语言。',
|
||||
time: '10 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/fAenQ8nvRjL7x0i0jEfuDBZHvJfHf3v6.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
},
|
||||
{
|
||||
title: 'Axios',
|
||||
content: 'Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。',
|
||||
time: '16 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/LrCTN2j94lo9N7wEql7cBr1Ux4rHMvmZ.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
},
|
||||
{
|
||||
title: 'Webpack',
|
||||
content: 'webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用。',
|
||||
time: '6 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/yeKvhT20lMU0f1T3Y743UlGEOLLnZSnp.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: '全村人的希望',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
},
|
||||
{
|
||||
title: 'Node.js',
|
||||
content: 'Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。',
|
||||
time: '8 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/CyrCNmTJfv7D6GFAg39bjT3eRkkRm5dI.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
}
|
||||
],
|
||||
loading: false,
|
||||
page: 2
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
previewList() {
|
||||
return this.data.map(item => item.cover);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
//this.query();
|
||||
},
|
||||
methods: {
|
||||
query() {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.page++;
|
||||
this.data = this.data.concat([
|
||||
{
|
||||
title: 'ElementUI',
|
||||
content: 'Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。',
|
||||
time: '2 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/RZ8FQmZfHkcffMlTBCJllBFjEhEsObVo.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
},
|
||||
{
|
||||
title: 'Vue.js',
|
||||
content: 'Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。',
|
||||
time: '4 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd.jpg',
|
||||
tags: ['EleAdminPro', 'UI框架', '设计语言'],
|
||||
user: '你的名字很好听',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg',
|
||||
favorites: 104,
|
||||
likes: 189,
|
||||
comments: 15
|
||||
}
|
||||
]);
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@media screen and (max-width: 768px) {
|
||||
.ant-list-item :deep(.ant-list-item-extra .ant-image) {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,66 +0,0 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
:body-style="{padding: '0 24px'}">
|
||||
<h5 style="padding: 16px 0 24px 0;">卡片列表</h5>
|
||||
<div class="ele-text-center">
|
||||
<a-input-search
|
||||
v-model:value="keyword"
|
||||
placeholder="请输入内容"
|
||||
enter-button
|
||||
style="max-width: 500px;"
|
||||
size="large"/>
|
||||
</div>
|
||||
<a-tabs
|
||||
class="list-card-tabs"
|
||||
:active-key="active"
|
||||
@tabClick="onTabChange">
|
||||
<a-tab-pane key="/list/card/project" tab="项目"/>
|
||||
<a-tab-pane key="/list/card/application" tab="应用"/>
|
||||
<a-tab-pane key="/list/card/article" tab="文章"/>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
<ele-empty-layout/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleEmptyLayout from 'ele-admin-pro/packages/ele-empty-layout';
|
||||
|
||||
export default {
|
||||
name: 'ListCard',
|
||||
components: {EleEmptyLayout},
|
||||
data() {
|
||||
return {
|
||||
keyword: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
active() {
|
||||
return this.$route.path;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 切换tab */
|
||||
onTabChange(key) {
|
||||
this.$router.push(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.list-card-tabs {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.list-card-tabs :deep(.ant-tabs-bar) {
|
||||
margin-bottom: 0;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
.list-card-tabs :deep(.ant-tabs-tab) {
|
||||
padding: 12px 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,228 +0,0 @@
|
||||
<template>
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-for="(item, index) in data"
|
||||
:key="index"
|
||||
:lg="6"
|
||||
:md="8"
|
||||
:sm="12"
|
||||
:xs="12">
|
||||
<a-card
|
||||
:bordered="false"
|
||||
hoverable
|
||||
style="margin-top: 16px;">
|
||||
<template #cover>
|
||||
<img :src="item.cover" alt=""/>
|
||||
</template>
|
||||
<a-card-meta :title="item.title">
|
||||
<template #description>
|
||||
<div class="project-list-desc">
|
||||
{{ item.content }}
|
||||
</div>
|
||||
</template>
|
||||
</a-card-meta>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content ele-text-secondary">
|
||||
{{ item.time }}
|
||||
</div>
|
||||
<ele-avatar-list :data="item.users" size="small"/>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ListCardProject',
|
||||
data() {
|
||||
return {
|
||||
// 分页参数
|
||||
page: {
|
||||
page: 1,
|
||||
limit: 8
|
||||
},
|
||||
// 数据总数
|
||||
count: 40,
|
||||
data: [
|
||||
{
|
||||
title: 'ElementUI',
|
||||
content: 'Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。',
|
||||
time: '2 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/RZ8FQmZfHkcffMlTBCJllBFjEhEsObVo.jpg',
|
||||
users: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Vue.js',
|
||||
content: 'Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。',
|
||||
time: '4 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd.jpg',
|
||||
users: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Vuex',
|
||||
content: 'Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。',
|
||||
time: '12 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/4Z0QR2L0J1XStxBh99jVJ8qLfsGsOgjU.jpg',
|
||||
users: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Vue Router',
|
||||
content: 'Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。',
|
||||
time: '14 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/ttkIjNPlVDuv4lUTvRX8GIlM2QqSe0jg.jpg',
|
||||
users: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Sass',
|
||||
content: 'Sass 是世界上最成熟、稳定、强大的专业级 CSS 扩展语言。',
|
||||
time: '10 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/fAenQ8nvRjL7x0i0jEfuDBZHvJfHf3v6.jpg',
|
||||
users: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Axios',
|
||||
content: 'Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。',
|
||||
time: '16 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/LrCTN2j94lo9N7wEql7cBr1Ux4rHMvmZ.jpg',
|
||||
users: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Webpack',
|
||||
content: 'webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用。',
|
||||
time: '6 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/yeKvhT20lMU0f1T3Y743UlGEOLLnZSnp.jpg',
|
||||
users: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Node.js',
|
||||
content: 'Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。',
|
||||
time: '8 小时前',
|
||||
cover: 'https://cdn.eleadmin.com/20200610/CyrCNmTJfv7D6GFAg39bjT3eRkkRm5dI.jpg',
|
||||
users: [
|
||||
{
|
||||
name: 'SunSmile',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||||
},
|
||||
{
|
||||
name: '酷酷的大叔',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Jasmine',
|
||||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
query() {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.project-list-desc {
|
||||
height: 44px;
|
||||
line-height: 22px;
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
</style>
|
||||
@@ -34,7 +34,7 @@
|
||||
</a-row>
|
||||
</a-form>
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table v-model:selection="selectionList" ref="table" row-key="roadSoundBillId" :datasource="url"
|
||||
<ele-pro-table v-model:selection="selectionList" ref="table" row-key="roadNoiseBillId" :datasource="url"
|
||||
:columns="columns" :where="where" :scroll="{x: 'max-content'}">
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
@@ -49,8 +49,8 @@
|
||||
</template>
|
||||
<template #billName="{ text, record }">
|
||||
<div class="editable-cell">
|
||||
<div v-if="editableData[record.roadSoundBillId]" class="editable-cell-input-wrapper">
|
||||
<a-input v-model:value="editableData[record.roadSoundBillId].billName" @pressEnter="save(record)" />
|
||||
<div v-if="editableData[record.roadNoiseBillId]" class="editable-cell-input-wrapper">
|
||||
<a-input v-model:value="editableData[record.roadNoiseBillId].billName" @pressEnter="save(record)" />
|
||||
<check-outlined class="editable-cell-icon-check" @click="save(record)" />
|
||||
</div>
|
||||
<div v-else class="editable-cell-text-wrapper">
|
||||
@@ -61,9 +61,9 @@
|
||||
</template>
|
||||
<template #reportTime="{ text, record }">
|
||||
<div class="editable-cell">
|
||||
<div v-if="editableData[record.roadSoundBillId]" class="editable-cell-input-wrapper">
|
||||
<a-date-picker v-model:value="editableData[record.roadSoundBillId].reportTime"></a-date-picker>
|
||||
<!-- <a-input v-model:value="editableData[record.roadSoundBillId].reportTime" @pressEnter="save(record)" /> -->
|
||||
<div v-if="editableData[record.roadNoiseBillId]" class="editable-cell-input-wrapper">
|
||||
<a-date-picker v-model:value="editableData[record.roadNoiseBillId].reportTime"></a-date-picker>
|
||||
<!-- <a-input v-model:value="editableData[record.roadNoiseBillId].reportTime" @pressEnter="save(record)" /> -->
|
||||
<check-outlined class="editable-cell-icon-check" @click="save(record)" />
|
||||
</div>
|
||||
<div v-else class="editable-cell-text-wrapper">
|
||||
@@ -104,16 +104,16 @@
|
||||
} from '@ant-design/icons-vue';
|
||||
import {
|
||||
pageBillUrl,
|
||||
saveRoadSoundBill,
|
||||
removeRoadSoundBill,
|
||||
removeBatchRoadSoundBill,
|
||||
updateRoadSoundBill,
|
||||
verifyRoadSoundBill
|
||||
} from "@/api/ecology/road_sound";
|
||||
saveRoadNoiseBill,
|
||||
removeRoadNoiseBill,
|
||||
removeBatchRoadNoiseBill,
|
||||
updateRoadNoiseBill,
|
||||
verifyRoadNoiseBill
|
||||
} from "@/api/ecology/road-sound";
|
||||
import utils from "./utils";
|
||||
import moment from "moment";
|
||||
export default {
|
||||
name: 'RoadSound',
|
||||
name: 'RoadNoise',
|
||||
components: {
|
||||
CheckOutlined,
|
||||
EditOutlined
|
||||
@@ -233,17 +233,17 @@
|
||||
},
|
||||
detail(record) {
|
||||
this.$router.replace({
|
||||
path: "/collect/sound/road/table/" + record.roadSoundBillId
|
||||
path: "/collect/sound/road/table/" + record.roadNoiseBillId
|
||||
})
|
||||
},
|
||||
edit(record) {
|
||||
this.editableData[record.roadSoundBillId] = _.cloneDeep(record);
|
||||
this.editableData[record.roadSoundBillId].reportTime = moment(this.editableData[record.roadSoundBillId]
|
||||
this.editableData[record.roadNoiseBillId] = _.cloneDeep(record);
|
||||
this.editableData[record.roadNoiseBillId].reportTime = moment(this.editableData[record.roadNoiseBillId]
|
||||
.reportTime)
|
||||
},
|
||||
verify(record) {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
verifyRoadSoundBill({roadSoundBillId:record.roadSoundBillId}).then(res => {
|
||||
verifyRoadNoiseBill({roadNoiseBillId:record.roadNoiseBillId}).then(res => {
|
||||
if (res.data.code == 0) {
|
||||
record.checked = 1
|
||||
this.$message.success(res.data.msg);
|
||||
@@ -259,19 +259,19 @@
|
||||
save(record) {
|
||||
|
||||
let {
|
||||
roadSoundBillId,
|
||||
roadNoiseBillId,
|
||||
billName,
|
||||
reportTime
|
||||
} = this.editableData[record.roadSoundBillId];
|
||||
if (!roadSoundBillId || !reportTime) {
|
||||
} = this.editableData[record.roadNoiseBillId];
|
||||
if (!roadNoiseBillId || !reportTime) {
|
||||
this.$message.error('请填写完整信息再提交')
|
||||
return
|
||||
}
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
reportTime = reportTime.format("x")
|
||||
reportTime = Number(reportTime)
|
||||
updateRoadSoundBill({
|
||||
roadSoundBillId,
|
||||
updateRoadNoiseBill({
|
||||
roadNoiseBillId,
|
||||
billName,
|
||||
reportTime
|
||||
}).then(res => {
|
||||
@@ -286,7 +286,7 @@
|
||||
console.log(e);
|
||||
this.$message.error(e.message);
|
||||
}).finally(() => {
|
||||
delete this.editableData[record.roadSoundBillId]
|
||||
delete this.editableData[record.roadNoiseBillId]
|
||||
hide()
|
||||
})
|
||||
|
||||
@@ -294,7 +294,7 @@
|
||||
/* 删除单个 */
|
||||
remove(row) {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
removeRoadSoundBill(row.roadSoundBillId).then(res => {
|
||||
removeRoadNoiseBill(row.roadNoiseBillId).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
@@ -306,9 +306,9 @@
|
||||
}).finally(() => hide());
|
||||
},
|
||||
removeBatch() {
|
||||
const ids = this.selectionList.map(item => item.roadSoundBillId);
|
||||
const ids = this.selectionList.map(item => item.roadNoiseBillId);
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
removeBatchRoadSoundBill(ids).then(res => {
|
||||
removeBatchRoadNoiseBill(ids).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
@@ -337,14 +337,14 @@
|
||||
|
||||
});
|
||||
const reportDate = aoa[1][0].replace(/[^\d]+/g, "-")
|
||||
const roadSoundList = aoa.filter(item => item.length == 21 && typeof item[0] == "number");
|
||||
const roadNoiseList = aoa.filter(item => item.length == 21 && typeof item[0] == "number");
|
||||
// 解析成对象数组
|
||||
const billData = utils.toObjData(roadSoundList);
|
||||
const billData = utils.toObjData(roadNoiseList);
|
||||
// 上传到服务器
|
||||
saveRoadSoundBill({
|
||||
saveRoadNoiseBill({
|
||||
reportTime: new Date(reportDate).getTime(),
|
||||
billName: file.name.substr(0, file.name.lastIndexOf(".")),
|
||||
roadSoundList: billData
|
||||
roadNoiseList: billData
|
||||
}).then(() => {
|
||||
this.reload()
|
||||
})
|
||||
@@ -30,7 +30,7 @@
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<a-modal v-model:visible="showEdit" :title="form.roadSoundId!==undefined?'修改用户':'添加用户'" :confirm-loading="loading"
|
||||
<a-modal v-model:visible="showEdit" :title="form.roadNoiseId!==undefined?'修改用户':'添加用户'" :confirm-loading="loading"
|
||||
:width="1000" :body-style="{paddingBottom: '8px'}" @ok="save">
|
||||
<a-form ref="form" :model="form" :rules="rules" :label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 18}, sm: {span: 24}}">
|
||||
@@ -139,7 +139,7 @@
|
||||
|
||||
</a-modal>
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table v-model:selection="selectionList" ref="table" row-key="roadSoundId" :datasource="url"
|
||||
<ele-pro-table v-model:selection="selectionList" ref="table" row-key="roadNoiseId" :datasource="url"
|
||||
:columns="columns" :where="where" :scroll="{x: 'max-content'}">
|
||||
<template v-if="bill.checked != 1" #toolbar>
|
||||
<a-space>
|
||||
@@ -169,18 +169,18 @@
|
||||
<script>
|
||||
import _ from "lodash"
|
||||
import {
|
||||
pageRoadSoundUrl,
|
||||
saveRoadSound,
|
||||
removeRoadSound,
|
||||
removeBatchRoadSound,
|
||||
updateRoadSound,
|
||||
getRoadSoundBill
|
||||
} from "@/api/ecology/road_sound";
|
||||
pageRoadNoiseUrl,
|
||||
saveRoadNoise,
|
||||
removeRoadNoise,
|
||||
removeBatchRoadNoise,
|
||||
updateRoadNoise,
|
||||
getRoadNoiseBill
|
||||
} from "@/api/ecology/road-sound";
|
||||
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
|
||||
import moment from 'moment';
|
||||
// import utils from "./utils";
|
||||
export default {
|
||||
name: 'RoadSound',
|
||||
name: 'RoadNoise',
|
||||
components: {},
|
||||
data() {
|
||||
const {
|
||||
@@ -191,7 +191,7 @@
|
||||
locale,
|
||||
bill:{},
|
||||
// 表格数据接口
|
||||
url: pageRoadSoundUrl,
|
||||
url: pageRoadNoiseUrl,
|
||||
selection: [],
|
||||
// 表格列配置
|
||||
columns: [
|
||||
@@ -312,9 +312,9 @@
|
||||
}
|
||||
],
|
||||
// 表格搜索条件
|
||||
roadSoundBillId: billId,
|
||||
roadNoiseBillId: billId,
|
||||
where: {
|
||||
roadSoundBillId: billId
|
||||
roadNoiseBillId: billId
|
||||
},
|
||||
// 表格选中数据
|
||||
selectionList: [],
|
||||
@@ -331,7 +331,7 @@
|
||||
const {
|
||||
billId
|
||||
} = this.$route.params
|
||||
getRoadSoundBill(billId).then(res=>{
|
||||
getRoadNoiseBill(billId).then(res=>{
|
||||
this.bill = res.data.data
|
||||
if(res.data.data.checked == 1){
|
||||
this.columns.splice(this.columns.length-1,1)
|
||||
@@ -350,7 +350,7 @@
|
||||
/* 重置搜索 */
|
||||
reset() {
|
||||
this.where = {
|
||||
roadSoundBillId: this.roadSoundBillId
|
||||
roadNoiseBillId: this.roadNoiseBillId
|
||||
};
|
||||
this.reload();
|
||||
},
|
||||
@@ -386,8 +386,8 @@
|
||||
form.monitorHour = date.getHours();
|
||||
form.monitorMinute = date.getMinutes();
|
||||
delete form['monitorDate']
|
||||
if (form.roadSoundId) {
|
||||
updateRoadSound(form).then(res => {
|
||||
if (form.roadNoiseId) {
|
||||
updateRoadNoise(form).then(res => {
|
||||
if (res.data.code == 0) {
|
||||
this.showEdit = false;
|
||||
this.$message.success(res.data.msg);
|
||||
@@ -402,8 +402,8 @@
|
||||
hide();
|
||||
})
|
||||
}else{
|
||||
form.roadSoundBillId = this.roadSoundBillId;
|
||||
saveRoadSound(form).then(res => {
|
||||
form.roadNoiseBillId = this.roadNoiseBillId;
|
||||
saveRoadNoise(form).then(res => {
|
||||
if (res.data.code == 0) {
|
||||
this.showEdit = false;
|
||||
this.$message.success(res.data.msg);
|
||||
@@ -423,7 +423,7 @@
|
||||
/* 删除单个 */
|
||||
remove(row) {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
removeRoadSound(row.roadSoundId).then(res => {
|
||||
removeRoadNoise(row.roadNoiseId).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
@@ -435,9 +435,9 @@
|
||||
}).finally(() => hide());
|
||||
},
|
||||
removeBatch() {
|
||||
const ids = this.selectionList.map(item => item.roadSoundId);
|
||||
const ids = this.selectionList.map(item => item.roadNoiseId);
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
removeBatchRoadSound(ids).then(res => {
|
||||
removeBatchRoadNoise(ids).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
420
src/views/sound/road/collect/index.vue
Normal file
420
src/views/sound/road/collect/index.vue
Normal file
@@ -0,0 +1,420 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 搜索表单 -->
|
||||
<a-form :model="where" :labelCol="{ offset: 1}">
|
||||
<a-row>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="审核状态:">
|
||||
<a-select v-model:value="where.checked" allowClear placeholder="全部">
|
||||
<a-select-option value="1">已审核</a-select-option>
|
||||
<a-select-option value="0">未审核</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="表格名称:">
|
||||
<a-input v-model:value.trim="where.billName" placeholder="请输入" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="上报时间:">
|
||||
<a-range-picker separator="~" v-model:value="reportTimeScope" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item class="ele-text-right" :wrapper-col="{span: 24}">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="reload">查询</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table v-model:selection="selectionList" ref="table" row-key="roadNoiseBillId" :datasource="url"
|
||||
:columns="columns" :where="where" :scroll="{x: 'max-content'}">
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-upload :before-upload="importFile" :showUploadList="false" accept=".xls,.xlsx,.csv">
|
||||
<a-button>导入excel</a-button>
|
||||
</a-upload>
|
||||
<a-popconfirm :disabled="selectionList.length == 0" :title="`确认删除${selectionList.length}条数据吗?`"
|
||||
ok-text="Yes" cancel-text="No" @confirm="removeBatch">
|
||||
<a-button :disabled="selectionList.length == 0" type="primary" ghost danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #billName="{ text, record }">
|
||||
<div class="editable-cell">
|
||||
<div v-if="editableData[record.roadNoiseBillId]" class="editable-cell-input-wrapper">
|
||||
<a-input v-model:value="editableData[record.roadNoiseBillId].billName" @pressEnter="save(record)" />
|
||||
<check-outlined class="editable-cell-icon-check" @click="save(record)" />
|
||||
</div>
|
||||
<div v-else class="editable-cell-text-wrapper">
|
||||
{{ text || ' ' }}
|
||||
<edit-outlined class="editable-cell-icon" @click="edit(record)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #reportTime="{ text, record }">
|
||||
<div class="editable-cell">
|
||||
<div v-if="editableData[record.roadNoiseBillId]" class="editable-cell-input-wrapper">
|
||||
<a-date-picker v-model:value="editableData[record.roadNoiseBillId].reportTime"></a-date-picker>
|
||||
<!-- <a-input v-model:value="editableData[record.roadNoiseBillId].reportTime" @pressEnter="save(record)" /> -->
|
||||
<check-outlined class="editable-cell-icon-check" @click="save(record)" />
|
||||
</div>
|
||||
<div v-else class="editable-cell-text-wrapper">
|
||||
{{ $util.toDateString(text,'yyyy-MM-dd') || ' ' }}
|
||||
<edit-outlined class="editable-cell-icon" @click="edit(record)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #checked="{text}">
|
||||
<span>
|
||||
<a-tag v-if="text" color="green">已审核</a-tag>
|
||||
<a-tag v-else color="orange">未审核</a-tag>
|
||||
</span>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-button @click="detail(record)" shape="round" size="small">查看</a-button>
|
||||
<span v-hasPermi="['ecology:sound:verify']">
|
||||
<a-popconfirm v-if="record.checked != 1" :title="`审核通过后将无法修改，确认？`" ok-text="Yes" cancel-text="No"
|
||||
@confirm="verify(record)">
|
||||
<a-button type="primary" shape="round" size="small">审核</a-button>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
<a-popconfirm :title="`确认删除${record.billName}吗?`" ok-text="Yes" cancel-text="No" @confirm="remove(record)">
|
||||
<a-button type="primary" danger shape="round" size="small">删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import XLSX from 'xlsx';
|
||||
import _ from "lodash"
|
||||
import {
|
||||
CheckOutlined,
|
||||
EditOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import {
|
||||
pageBillUrl,
|
||||
saveRoadNoiseBill,
|
||||
removeRoadNoiseBill,
|
||||
removeBatchRoadNoiseBill,
|
||||
updateRoadNoiseBill,
|
||||
verifyRoadNoiseBill
|
||||
} from "@/api/ecology/road-sound";
|
||||
import utils from "./utils";
|
||||
import moment from "moment";
|
||||
export default {
|
||||
name: 'RoadNoise',
|
||||
components: {
|
||||
CheckOutlined,
|
||||
EditOutlined
|
||||
},
|
||||
data() {
|
||||
|
||||
return {
|
||||
// 表格数据接口
|
||||
url: pageBillUrl,
|
||||
selection: [],
|
||||
// 表格列配置
|
||||
columns: [{
|
||||
key: 'index',
|
||||
dataIndex: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
customRender: ({
|
||||
index
|
||||
}) => index + 1
|
||||
},
|
||||
{
|
||||
title: '表格名称',
|
||||
dataIndex: 'billName',
|
||||
sorter: true,
|
||||
slots: {
|
||||
customRender: 'billName',
|
||||
},
|
||||
|
||||
},
|
||||
{
|
||||
title: '条目',
|
||||
dataIndex: 'recordSize',
|
||||
sorter: true,
|
||||
|
||||
},
|
||||
// {
|
||||
// title: '菜单名称',
|
||||
// dataIndex: 'title',
|
||||
// sorter: true
|
||||
// },
|
||||
{
|
||||
title: '上报时间',
|
||||
dataIndex: 'reportTime',
|
||||
sorter: true,
|
||||
slots: {
|
||||
customRender: 'reportTime',
|
||||
},
|
||||
// customRender: ({
|
||||
// text
|
||||
// }) => this.$util.toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '导入时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
customRender: ({
|
||||
text
|
||||
}) => this.$util.toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '审核状态',
|
||||
dataIndex: 'checked',
|
||||
sorter: true,
|
||||
slots: {
|
||||
customRender: 'checked',
|
||||
},
|
||||
|
||||
},
|
||||
// {
|
||||
// title: '更新时间',
|
||||
// dataIndex: 'updateTime',
|
||||
// sorter: true,
|
||||
// customRender: ({
|
||||
// text
|
||||
// }) => this.$util.toDateString(text)
|
||||
// },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
slots: {
|
||||
customRender: 'action'
|
||||
}
|
||||
}
|
||||
],
|
||||
// 表格搜索条件
|
||||
where: {},
|
||||
reportTimeScope: [],
|
||||
// 表格选中数据
|
||||
selectionList: [],
|
||||
editableData: {},
|
||||
// 当前编辑数据
|
||||
current: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
/* 刷新表格 */
|
||||
reload() {
|
||||
this.where.reportTimeStart = null;
|
||||
this.where.reportTimeEnd = null;
|
||||
if (this.reportTimeScope && this.reportTimeScope.length == 2) {
|
||||
this.where.reportTimeStart = this.reportTimeScope[0].format("Y-M-D H:m:s")
|
||||
this.where.reportTimeEnd = this.reportTimeScope[1].format("Y-M-D H:m:s")
|
||||
}
|
||||
this.$refs.table.reload({
|
||||
where: this.where
|
||||
});
|
||||
},
|
||||
/* 重置搜索 */
|
||||
reset() {
|
||||
this.where = {};
|
||||
this.reportTimeScope = [];
|
||||
this.reload();
|
||||
},
|
||||
detail(record) {
|
||||
this.$router.replace({
|
||||
path: "/sound/road/collect/table/" + record.roadNoiseBillId
|
||||
})
|
||||
},
|
||||
edit(record) {
|
||||
this.editableData[record.roadNoiseBillId] = _.cloneDeep(record);
|
||||
this.editableData[record.roadNoiseBillId].reportTime = moment(this.editableData[record.roadNoiseBillId]
|
||||
.reportTime)
|
||||
},
|
||||
verify(record) {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
verifyRoadNoiseBill({
|
||||
roadNoiseBillId: record.roadNoiseBillId
|
||||
}).then(res => {
|
||||
if (res.data.code == 0) {
|
||||
record.checked = 1
|
||||
this.$message.success(res.data.msg);
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch((e) => {
|
||||
this.$message.error(e.message);
|
||||
}).finally(() => {
|
||||
hide();
|
||||
})
|
||||
},
|
||||
save(record) {
|
||||
|
||||
let {
|
||||
roadNoiseBillId,
|
||||
billName,
|
||||
reportTime
|
||||
} = this.editableData[record.roadNoiseBillId];
|
||||
if (!roadNoiseBillId || !reportTime) {
|
||||
this.$message.error('请填写完整信息再提交')
|
||||
return
|
||||
}
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
reportTime = reportTime.format("x")
|
||||
reportTime = Number(reportTime)
|
||||
updateRoadNoiseBill({
|
||||
roadNoiseBillId,
|
||||
billName,
|
||||
reportTime
|
||||
}).then(res => {
|
||||
if (res.data.code == 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
record.billName = billName;
|
||||
record.reportTime = reportTime
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
console.log(e);
|
||||
this.$message.error(e.message);
|
||||
}).finally(() => {
|
||||
delete this.editableData[record.roadNoiseBillId]
|
||||
hide()
|
||||
})
|
||||
|
||||
},
|
||||
/* 删除单个 */
|
||||
remove(row) {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
removeRoadNoiseBill(row.roadNoiseBillId).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.$message.error(e.msg);
|
||||
}).finally(() => hide());
|
||||
},
|
||||
removeBatch() {
|
||||
const ids = this.selectionList.map(item => item.roadNoiseBillId);
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
removeBatchRoadNoiseBill(ids).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
|
||||
this.$message.error(e.msg);
|
||||
}).finally(() => hide());
|
||||
},
|
||||
/* 导入本地excel文件 */
|
||||
importFile(file) {
|
||||
try {
|
||||
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 aoa = XLSX.utils.sheet_to_json(workbook.Sheets[sheetNames[0]], {
|
||||
header: 1,
|
||||
});
|
||||
let aoa2 = XLSX.utils.sheet_to_json(workbook.Sheets[sheetNames[1]], {
|
||||
header: 1,
|
||||
});
|
||||
const reportDate = aoa[1][0].replace(/[^\d]+/g, "-")
|
||||
const reportDate2 = aoa2[1][0].replace(/[^\d]+/g, "-")
|
||||
const roadNoiseList = aoa.filter(item => item.length == 21 && typeof item[0] == "number");
|
||||
const roadNoiseList2 = aoa2.filter(item => item.length == 21 && typeof item[0] == "number");
|
||||
// 解析成对象数组
|
||||
const billData = utils.toObjData(roadNoiseList);
|
||||
const billData2 = utils.toObjData(roadNoiseList2);
|
||||
// 上传到服务器
|
||||
saveRoadNoiseBill({
|
||||
reportTime: new Date(reportDate).getTime(),
|
||||
billName: sheetNames[0] + reportDate,
|
||||
roadNoiseList: billData
|
||||
}).then(saveRoadNoiseBill({
|
||||
reportTime: new Date(reportDate2).getTime(),
|
||||
billName: sheetNames[1] + reportDate2,
|
||||
roadNoiseList: billData2
|
||||
})).then(() => {
|
||||
this.reload()
|
||||
})
|
||||
// console.log(billData);
|
||||
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
} catch (error) {
|
||||
this.$message.error("表格格式有误，请检查后重新上传！");
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.editable-cell {
|
||||
position: relative;
|
||||
|
||||
.editable-cell-input-wrapper,
|
||||
.editable-cell-text-wrapper {
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.editable-cell-text-wrapper {
|
||||
padding: 5px 24px 5px 5px;
|
||||
}
|
||||
|
||||
.editable-cell-icon,
|
||||
.editable-cell-icon-check {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.editable-cell-icon {
|
||||
margin-top: 4px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.editable-cell-icon-check {
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.editable-cell-icon:hover,
|
||||
.editable-cell-icon-check:hover {
|
||||
color: #108ee9;
|
||||
}
|
||||
|
||||
.editable-add-btn {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.editable-cell:hover .editable-cell-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
459
src/views/sound/road/collect/other.vue
Normal file
459
src/views/sound/road/collect/other.vue
Normal file
@@ -0,0 +1,459 @@
|
||||
<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.place" placeholder="请输入测点名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="路段:">
|
||||
<a-input v-model:value.trim="where.road" placeholder="请输入路段名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="城区">
|
||||
<a-input v-model:value.trim="where.area" placeholder="请输入城区名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item class="ele-text-right" :wrapper-col="{span: 24}">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="reload">查询</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<a-modal v-model:visible="showEdit" :title="form.roadNoiseId!==undefined?'修改用户':'添加用户'" :confirm-loading="loading"
|
||||
:width="1000" :body-style="{paddingBottom: '8px'}" @ok="save">
|
||||
<a-form ref="form" :model="form" :rules="rules" :label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 18}, sm: {span: 24}}">
|
||||
<a-row>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="日期" name="monitorDate">
|
||||
<a-date-picker v-model:value="form.monitorDate" :locale="locale" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="时间" name="monitorTime">
|
||||
<a-time-picker v-model:value="form.monitorTime" format="HH:mm" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="时段" name="timeSlot">
|
||||
<a-select v-model:value="form.timeSlot">
|
||||
<a-select-option value="昼">昼</a-select-option>
|
||||
<a-select-option value="夜">夜</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="测点名称" name="place">
|
||||
<a-input v-model:value="form.place" placeholder="请输入测点名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="点号" name="placeCode">
|
||||
<a-input v-model:value="form.placeCode" placeholder="请输入点号" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="所属路段" name="road">
|
||||
<a-input v-model:value="form.road" placeholder="请输入测点名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="所属城区" name="area">
|
||||
<a-input v-model:value="form.area" placeholder="请输入点号" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="路长" name="roadLength">
|
||||
<a-input v-model:value="form.roadLength" placeholder="请输入路长（米）" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="总路宽" name="roadWidth">
|
||||
<a-input v-model:value="form.roadWidth" placeholder="请输入总路宽（米）" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="中小型车流量" name="smallTrafficFlow">
|
||||
<a-input type="number" v-model:value="form.smallTrafficFlow" placeholder="请输入中小型车流量（辆/20分钟）"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="大型车流量" name="largeTrafficFlow">
|
||||
<a-input type="number" v-model:value="form.largeTrafficFlow" placeholder="请输入大型车流量（辆/20分钟）"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="LeqdB(A)" name="indexLeq">
|
||||
<a-input type="number" v-model:value="form.indexLeq" placeholder="请输入LeqdB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="SDdB(A)" name="indexSd">
|
||||
<a-input type="number" v-model:value="form.indexSd" placeholder="请输入大SDdB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="L10dB(A)" name="indexL10">
|
||||
<a-input type="number" v-model:value="form.indexL10" placeholder="请输入L10dB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="L50dB(A)" name="indexL50">
|
||||
<a-input type="number" v-model:value="form.indexL50" placeholder="请输入L50dB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="L90dB(A)" name="indexL90">
|
||||
<a-input type="number" v-model:value="form.indexL90" placeholder="请输入L90dB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="LmindB(A)" name="indexLmin">
|
||||
<a-input type="number" v-model:value="form.indexLmin" placeholder="请输入LmindB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="LmaxdB(A)" name="indexLmax">
|
||||
<a-input type="number" v-model:value="form.indexLmax" placeholder="请输入LmaxdB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-form>
|
||||
|
||||
</a-modal>
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table v-model:selection="selectionList" ref="table" row-key="roadNoiseId" :datasource="url"
|
||||
:columns="columns" :where="where" :scroll="{x: 'max-content'}">
|
||||
<template v-if="bill.checked != 1" #toolbar>
|
||||
<a-space>
|
||||
<a-button @click="openEdit" type="primary">新增</a-button>
|
||||
<a-popconfirm :disabled="selectionList.length == 0" :title="`确认删除${selectionList.length}条数据吗?`"
|
||||
ok-text="Yes" cancel-text="No" @confirm="removeBatch">
|
||||
<a-button :disabled="selectionList.length == 0" type="primary" ghost danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-button @click="openEdit(record)" type="primary" shape="round" size="small">修改</a-button>
|
||||
<a-popconfirm :title="`确认删除这条数据吗?`" ok-text="Yes" cancel-text="No" @confirm="remove(record)">
|
||||
<a-button type="primary" danger shape="round" size="small">删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from "lodash"
|
||||
import {
|
||||
pageRoadNoiseUrl,
|
||||
saveRoadNoise,
|
||||
removeRoadNoise,
|
||||
removeBatchRoadNoise,
|
||||
updateRoadNoise,
|
||||
getRoadNoiseBill
|
||||
} from "@/api/ecology/road-sound";
|
||||
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
|
||||
import moment from 'moment';
|
||||
// import utils from "./utils";
|
||||
export default {
|
||||
name: 'RoadNoise',
|
||||
components: {},
|
||||
data() {
|
||||
const {
|
||||
billId
|
||||
} = this.$route.params
|
||||
|
||||
return {
|
||||
locale,
|
||||
bill:{},
|
||||
// 表格数据接口
|
||||
url: pageRoadNoiseUrl,
|
||||
selection: [],
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
title: '监测日期',
|
||||
dataIndex: 'monitorTime',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '测点名称',
|
||||
dataIndex: 'place',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '点号',
|
||||
dataIndex: 'placeCode',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '所属路段',
|
||||
dataIndex: 'road',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '所属城区',
|
||||
dataIndex: 'area',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '路长',
|
||||
dataIndex: 'roadLength',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '路宽',
|
||||
dataIndex: 'roadWidth',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '中小型车流量（辆/20分钟）',
|
||||
dataIndex: 'smallTrafficFlow',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '大型车流量（辆/20分钟）',
|
||||
dataIndex: 'largeTrafficFlow',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '时段',
|
||||
dataIndex: 'timeSlot',
|
||||
sorter: true
|
||||
},
|
||||
// {
|
||||
// title: '月',
|
||||
// dataIndex: 'monitorMonth',
|
||||
// sorter: true
|
||||
// },
|
||||
// {
|
||||
// title: '日',
|
||||
// dataIndex: 'monitorDay',
|
||||
// sorter: true
|
||||
// },
|
||||
// {
|
||||
// title: '时',
|
||||
// dataIndex: 'monitorHour',
|
||||
// sorter: true
|
||||
// },
|
||||
// {
|
||||
// title: '分',
|
||||
// dataIndex: 'monitorMinute',
|
||||
// sorter: true
|
||||
// },
|
||||
{
|
||||
title: 'LeqdB(A)',
|
||||
dataIndex: 'indexLeq',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'SDdB(A)',
|
||||
dataIndex: 'indexSd',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'L10dB(A)',
|
||||
dataIndex: 'indexL10',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'L50dB(A)',
|
||||
dataIndex: 'indexL50',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'L90dB(A)',
|
||||
dataIndex: 'indexL90',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'LmindB(A)',
|
||||
dataIndex: 'indexLmin',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'LmaxdB(A)',
|
||||
dataIndex: 'indexLmax',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
slots: {
|
||||
customRender: 'action'
|
||||
}
|
||||
}
|
||||
],
|
||||
// 表格搜索条件
|
||||
roadNoiseBillId: billId,
|
||||
where: {
|
||||
roadNoiseBillId: billId
|
||||
},
|
||||
// 表格选中数据
|
||||
selectionList: [],
|
||||
// 是否显示编辑弹窗
|
||||
showEdit: false,
|
||||
// 表单数据
|
||||
form: {},
|
||||
loading: false,
|
||||
rules: {}
|
||||
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
const {
|
||||
billId
|
||||
} = this.$route.params
|
||||
getRoadNoiseBill(billId).then(res=>{
|
||||
this.bill = res.data.data
|
||||
if(res.data.data.checked == 1){
|
||||
this.columns.splice(this.columns.length-1,1)
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
/* 刷新表格 */
|
||||
reload() {
|
||||
console.log(this.$route);
|
||||
console.log(this.$router);
|
||||
this.$refs.table.reload({
|
||||
where: this.where
|
||||
});
|
||||
},
|
||||
/* 重置搜索 */
|
||||
reset() {
|
||||
this.where = {
|
||||
roadNoiseBillId: this.roadNoiseBillId
|
||||
};
|
||||
this.reload();
|
||||
},
|
||||
/* 显示编辑 */
|
||||
openEdit(record) {
|
||||
const cloneRecord = _.cloneDeep(record)
|
||||
if (record && cloneRecord.monitorTime) {
|
||||
console.log(moment(cloneRecord.monitorTime).format('YYYY MM DD'));
|
||||
cloneRecord.monitorDate = moment(cloneRecord.monitorTime);
|
||||
cloneRecord.monitorTime = moment(cloneRecord.monitorTime);
|
||||
}
|
||||
// cloneRecord.mi
|
||||
this.form = Object.assign({}, cloneRecord);
|
||||
this.showEdit = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.form.clearValidate(); // 清除表单验证信息
|
||||
});
|
||||
},
|
||||
|
||||
save() {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
const form = _.cloneDeep(this.form);
|
||||
const date = new Date();
|
||||
date.setFullYear(form.monitorDate.year());
|
||||
date.setMonth(form.monitorDate.month());
|
||||
date.setDate(form.monitorDate.date());
|
||||
date.setHours(form.monitorTime.hour());
|
||||
date.setMinutes(form.monitorTime.minutes());
|
||||
form.monitorTime = date.getTime();
|
||||
form.monitorYear = date.getFullYear();
|
||||
form.monitorMonth = date.getMonth() + 1;
|
||||
form.monitorDay = date.getDate();
|
||||
form.monitorHour = date.getHours();
|
||||
form.monitorMinute = date.getMinutes();
|
||||
delete form['monitorDate']
|
||||
if (form.roadNoiseId) {
|
||||
updateRoadNoise(form).then(res => {
|
||||
if (res.data.code == 0) {
|
||||
this.showEdit = false;
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch((error)=>{
|
||||
this.$message.error(error.message);
|
||||
}).finally(()=>{
|
||||
console.log("finallyfinallyfinallyfinally");
|
||||
hide();
|
||||
})
|
||||
}else{
|
||||
form.roadNoiseBillId = this.roadNoiseBillId;
|
||||
saveRoadNoise(form).then(res => {
|
||||
if (res.data.code == 0) {
|
||||
this.showEdit = false;
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch((error)=>{
|
||||
this.$message.error(error.message);
|
||||
}).finally(()=>{
|
||||
hide();
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
/* 删除单个 */
|
||||
remove(row) {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
removeRoadNoise(row.roadNoiseId).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.$message.error(e.msg);
|
||||
}).finally(() => hide());
|
||||
},
|
||||
removeBatch() {
|
||||
const ids = this.selectionList.map(item => item.roadNoiseId);
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
removeBatchRoadNoise(ids).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
|
||||
this.$message.error(e.msg);
|
||||
}).finally(() => hide());
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
459
src/views/sound/road/collect/table.vue
Normal file
459
src/views/sound/road/collect/table.vue
Normal file
@@ -0,0 +1,459 @@
|
||||
<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.place" placeholder="请输入测点名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="路段:">
|
||||
<a-input v-model:value.trim="where.road" placeholder="请输入路段名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="城区">
|
||||
<a-input v-model:value.trim="where.area" placeholder="请输入城区名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item class="ele-text-right" :wrapper-col="{span: 24}">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="reload">查询</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<a-modal v-model:visible="showEdit" :title="form.roadNoiseId!==undefined?'修改用户':'添加用户'" :confirm-loading="loading"
|
||||
:width="1000" :body-style="{paddingBottom: '8px'}" @ok="save">
|
||||
<a-form ref="form" :model="form" :rules="rules" :label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 18}, sm: {span: 24}}">
|
||||
<a-row>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="日期" name="monitorDate">
|
||||
<a-date-picker v-model:value="form.monitorDate" :locale="locale" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="时间" name="monitorTime">
|
||||
<a-time-picker v-model:value="form.monitorTime" format="HH:mm" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="时段" name="timeSlot">
|
||||
<a-select v-model:value="form.timeSlot">
|
||||
<a-select-option value="昼">昼</a-select-option>
|
||||
<a-select-option value="夜">夜</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="测点名称" name="place">
|
||||
<a-input v-model:value="form.place" placeholder="请输入测点名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="点号" name="placeCode">
|
||||
<a-input v-model:value="form.placeCode" placeholder="请输入点号" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="所属路段" name="road">
|
||||
<a-input v-model:value="form.road" placeholder="请输入测点名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="所属城区" name="area">
|
||||
<a-input v-model:value="form.area" placeholder="请输入点号" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="路长" name="roadLength">
|
||||
<a-input v-model:value="form.roadLength" placeholder="请输入路长（米）" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="总路宽" name="roadWidth">
|
||||
<a-input v-model:value="form.roadWidth" placeholder="请输入总路宽（米）" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="中小型车流量" name="smallTrafficFlow">
|
||||
<a-input type="number" v-model:value="form.smallTrafficFlow" placeholder="请输入中小型车流量（辆/20分钟）"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="大型车流量" name="largeTrafficFlow">
|
||||
<a-input type="number" v-model:value="form.largeTrafficFlow" placeholder="请输入大型车流量（辆/20分钟）"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="LeqdB(A)" name="indexLeq">
|
||||
<a-input type="number" v-model:value="form.indexLeq" placeholder="请输入LeqdB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="SDdB(A)" name="indexSd">
|
||||
<a-input type="number" v-model:value="form.indexSd" placeholder="请输入大SDdB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="L10dB(A)" name="indexL10">
|
||||
<a-input type="number" v-model:value="form.indexL10" placeholder="请输入L10dB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="L50dB(A)" name="indexL50">
|
||||
<a-input type="number" v-model:value="form.indexL50" placeholder="请输入L50dB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="L90dB(A)" name="indexL90">
|
||||
<a-input type="number" v-model:value="form.indexL90" placeholder="请输入L90dB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="LmindB(A)" name="indexLmin">
|
||||
<a-input type="number" v-model:value="form.indexLmin" placeholder="请输入LmindB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="LmaxdB(A)" name="indexLmax">
|
||||
<a-input type="number" v-model:value="form.indexLmax" placeholder="请输入LmaxdB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-form>
|
||||
|
||||
</a-modal>
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table v-model:selection="selectionList" ref="table" row-key="roadNoiseId" :datasource="url"
|
||||
:columns="columns" :where="where" :scroll="{x: 'max-content'}">
|
||||
<template v-if="bill.checked != 1" #toolbar>
|
||||
<a-space>
|
||||
<a-button @click="openEdit" type="primary">新增</a-button>
|
||||
<a-popconfirm :disabled="selectionList.length == 0" :title="`确认删除${selectionList.length}条数据吗?`"
|
||||
ok-text="Yes" cancel-text="No" @confirm="removeBatch">
|
||||
<a-button :disabled="selectionList.length == 0" type="primary" ghost danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-button @click="openEdit(record)" type="primary" shape="round" size="small">修改</a-button>
|
||||
<a-popconfirm :title="`确认删除这条数据吗?`" ok-text="Yes" cancel-text="No" @confirm="remove(record)">
|
||||
<a-button type="primary" danger shape="round" size="small">删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from "lodash"
|
||||
import {
|
||||
pageRoadNoiseUrl,
|
||||
saveRoadNoise,
|
||||
removeRoadNoise,
|
||||
removeBatchRoadNoise,
|
||||
updateRoadNoise,
|
||||
getRoadNoiseBill
|
||||
} from "@/api/ecology/road-sound";
|
||||
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
|
||||
import moment from 'moment';
|
||||
// import utils from "./utils";
|
||||
export default {
|
||||
name: 'RoadNoise',
|
||||
components: {},
|
||||
data() {
|
||||
const {
|
||||
billId
|
||||
} = this.$route.params
|
||||
|
||||
return {
|
||||
locale,
|
||||
bill:{},
|
||||
// 表格数据接口
|
||||
url: pageRoadNoiseUrl,
|
||||
selection: [],
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
title: '监测日期',
|
||||
dataIndex: 'monitorTime',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '测点名称',
|
||||
dataIndex: 'place',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '点号',
|
||||
dataIndex: 'placeCode',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '所属路段',
|
||||
dataIndex: 'road',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '所属城区',
|
||||
dataIndex: 'area',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '路长',
|
||||
dataIndex: 'roadLength',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '路宽',
|
||||
dataIndex: 'roadWidth',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '中小型车流量（辆/20分钟）',
|
||||
dataIndex: 'smallTrafficFlow',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '大型车流量（辆/20分钟）',
|
||||
dataIndex: 'largeTrafficFlow',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '时段',
|
||||
dataIndex: 'timeSlot',
|
||||
sorter: true
|
||||
},
|
||||
// {
|
||||
// title: '月',
|
||||
// dataIndex: 'monitorMonth',
|
||||
// sorter: true
|
||||
// },
|
||||
// {
|
||||
// title: '日',
|
||||
// dataIndex: 'monitorDay',
|
||||
// sorter: true
|
||||
// },
|
||||
// {
|
||||
// title: '时',
|
||||
// dataIndex: 'monitorHour',
|
||||
// sorter: true
|
||||
// },
|
||||
// {
|
||||
// title: '分',
|
||||
// dataIndex: 'monitorMinute',
|
||||
// sorter: true
|
||||
// },
|
||||
{
|
||||
title: 'LeqdB(A)',
|
||||
dataIndex: 'indexLeq',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'SDdB(A)',
|
||||
dataIndex: 'indexSd',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'L10dB(A)',
|
||||
dataIndex: 'indexL10',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'L50dB(A)',
|
||||
dataIndex: 'indexL50',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'L90dB(A)',
|
||||
dataIndex: 'indexL90',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'LmindB(A)',
|
||||
dataIndex: 'indexLmin',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'LmaxdB(A)',
|
||||
dataIndex: 'indexLmax',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
slots: {
|
||||
customRender: 'action'
|
||||
}
|
||||
}
|
||||
],
|
||||
// 表格搜索条件
|
||||
roadNoiseBillId: billId,
|
||||
where: {
|
||||
roadNoiseBillId: billId
|
||||
},
|
||||
// 表格选中数据
|
||||
selectionList: [],
|
||||
// 是否显示编辑弹窗
|
||||
showEdit: false,
|
||||
// 表单数据
|
||||
form: {},
|
||||
loading: false,
|
||||
rules: {}
|
||||
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
const {
|
||||
billId
|
||||
} = this.$route.params
|
||||
getRoadNoiseBill(billId).then(res=>{
|
||||
this.bill = res.data.data
|
||||
if(res.data.data.checked == 1){
|
||||
this.columns.splice(this.columns.length-1,1)
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
/* 刷新表格 */
|
||||
reload() {
|
||||
console.log(this.$route);
|
||||
console.log(this.$router);
|
||||
this.$refs.table.reload({
|
||||
where: this.where
|
||||
});
|
||||
},
|
||||
/* 重置搜索 */
|
||||
reset() {
|
||||
this.where = {
|
||||
roadNoiseBillId: this.roadNoiseBillId
|
||||
};
|
||||
this.reload();
|
||||
},
|
||||
/* 显示编辑 */
|
||||
openEdit(record) {
|
||||
const cloneRecord = _.cloneDeep(record)
|
||||
if (record && cloneRecord.monitorTime) {
|
||||
console.log(moment(cloneRecord.monitorTime).format('YYYY MM DD'));
|
||||
cloneRecord.monitorDate = moment(cloneRecord.monitorTime);
|
||||
cloneRecord.monitorTime = moment(cloneRecord.monitorTime);
|
||||
}
|
||||
// cloneRecord.mi
|
||||
this.form = Object.assign({}, cloneRecord);
|
||||
this.showEdit = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.form.clearValidate(); // 清除表单验证信息
|
||||
});
|
||||
},
|
||||
|
||||
save() {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
const form = _.cloneDeep(this.form);
|
||||
const date = new Date();
|
||||
date.setFullYear(form.monitorDate.year());
|
||||
date.setMonth(form.monitorDate.month());
|
||||
date.setDate(form.monitorDate.date());
|
||||
date.setHours(form.monitorTime.hour());
|
||||
date.setMinutes(form.monitorTime.minutes());
|
||||
form.monitorTime = date.getTime();
|
||||
form.monitorYear = date.getFullYear();
|
||||
form.monitorMonth = date.getMonth() + 1;
|
||||
form.monitorDay = date.getDate();
|
||||
form.monitorHour = date.getHours();
|
||||
form.monitorMinute = date.getMinutes();
|
||||
delete form['monitorDate']
|
||||
if (form.roadNoiseId) {
|
||||
updateRoadNoise(form).then(res => {
|
||||
if (res.data.code == 0) {
|
||||
this.showEdit = false;
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch((error)=>{
|
||||
this.$message.error(error.message);
|
||||
}).finally(()=>{
|
||||
console.log("finallyfinallyfinallyfinally");
|
||||
hide();
|
||||
})
|
||||
}else{
|
||||
form.roadNoiseBillId = this.roadNoiseBillId;
|
||||
saveRoadNoise(form).then(res => {
|
||||
if (res.data.code == 0) {
|
||||
this.showEdit = false;
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch((error)=>{
|
||||
this.$message.error(error.message);
|
||||
}).finally(()=>{
|
||||
hide();
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
/* 删除单个 */
|
||||
remove(row) {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
removeRoadNoise(row.roadNoiseId).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.$message.error(e.msg);
|
||||
}).finally(() => hide());
|
||||
},
|
||||
removeBatch() {
|
||||
const ids = this.selectionList.map(item => item.roadNoiseId);
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
removeBatchRoadNoise(ids).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
|
||||
this.$message.error(e.msg);
|
||||
}).finally(() => hide());
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
37
src/views/sound/road/collect/utils.js
Normal file
37
src/views/sound/road/collect/utils.js
Normal file
@@ -0,0 +1,37 @@
|
||||
export default {
|
||||
toObjData(excelData) {
|
||||
return excelData.map(item => {
|
||||
const monitorTime = new Date();
|
||||
monitorTime.setFullYear(item[0]);
|
||||
monitorTime.setMonth(item[10]-1);
|
||||
monitorTime.setDate(item[11]);
|
||||
monitorTime.setHours(item[12]);
|
||||
monitorTime.setMinutes(item[13]);
|
||||
return {
|
||||
monitorYear: item[0],
|
||||
place: item[1],
|
||||
placeCode: item[2],
|
||||
road: item[3],
|
||||
area: item[4],
|
||||
roadLength: item[5],
|
||||
roadWidth: item[6],
|
||||
smallTrafficFlow: item[7],
|
||||
largeTrafficFlow: item[7],
|
||||
timeSlot: item[9],
|
||||
monitorMonth: item[10],
|
||||
monitorDay: item[11],
|
||||
monitorHour: item[12],
|
||||
monitorMinute: item[13],
|
||||
monitorTime: monitorTime.getTime(),
|
||||
indexLeq: item[14],
|
||||
indexSd: item[15],
|
||||
indexL10: item[16],
|
||||
indexL50: item[17],
|
||||
indexL90: item[18],
|
||||
indexLmin: item[19],
|
||||
indexLmax: item[20],
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
407
src/views/sound/road/other/index.vue
Normal file
407
src/views/sound/road/other/index.vue
Normal file
@@ -0,0 +1,407 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 搜索表单 -->
|
||||
<a-form :model="where" :labelCol="{ offset: 1}">
|
||||
<a-row>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="审核状态:">
|
||||
<a-select v-model:value="where.checked" allowClear placeholder="全部">
|
||||
<a-select-option value="1">已审核</a-select-option>
|
||||
<a-select-option value="0">未审核</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="表格名称:">
|
||||
<a-input v-model:value.trim="where.billName" placeholder="请输入" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="上报时间:">
|
||||
<a-range-picker separator="~" v-model:value="reportTimeScope" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item class="ele-text-right" :wrapper-col="{span: 24}">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="reload">查询</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table v-model:selection="selectionList" ref="table" row-key="roadNoiseBillId" :datasource="url"
|
||||
:columns="columns" :where="where" :scroll="{x: 'max-content'}">
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-upload :before-upload="importFile" :showUploadList="false" accept=".xls,.xlsx,.csv">
|
||||
<a-button>导入excel</a-button>
|
||||
</a-upload>
|
||||
<a-popconfirm :disabled="selectionList.length == 0" :title="`确认删除${selectionList.length}条数据吗?`"
|
||||
ok-text="Yes" cancel-text="No" @confirm="removeBatch">
|
||||
<a-button :disabled="selectionList.length == 0" type="primary" ghost danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #billName="{ text, record }">
|
||||
<div class="editable-cell">
|
||||
<div v-if="editableData[record.roadNoiseBillId]" class="editable-cell-input-wrapper">
|
||||
<a-input v-model:value="editableData[record.roadNoiseBillId].billName" @pressEnter="save(record)" />
|
||||
<check-outlined class="editable-cell-icon-check" @click="save(record)" />
|
||||
</div>
|
||||
<div v-else class="editable-cell-text-wrapper">
|
||||
{{ text || ' ' }}
|
||||
<edit-outlined class="editable-cell-icon" @click="edit(record)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #reportTime="{ text, record }">
|
||||
<div class="editable-cell">
|
||||
<div v-if="editableData[record.roadNoiseBillId]" class="editable-cell-input-wrapper">
|
||||
<a-date-picker v-model:value="editableData[record.roadNoiseBillId].reportTime"></a-date-picker>
|
||||
<!-- <a-input v-model:value="editableData[record.roadNoiseBillId].reportTime" @pressEnter="save(record)" /> -->
|
||||
<check-outlined class="editable-cell-icon-check" @click="save(record)" />
|
||||
</div>
|
||||
<div v-else class="editable-cell-text-wrapper">
|
||||
{{ $util.toDateString(text,'yyyy-MM-dd') || ' ' }}
|
||||
<edit-outlined class="editable-cell-icon" @click="edit(record)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #checked="{text}">
|
||||
<span>
|
||||
<a-tag v-if="text" color="green">已审核</a-tag>
|
||||
<a-tag v-else color="orange">未审核</a-tag>
|
||||
</span>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-button @click="detail(record)" shape="round" size="small">查看</a-button>
|
||||
<a-popconfirm v-if="record.checked != 1" :title="`审核通过后将无法修改，确认？`" ok-text="Yes" cancel-text="No" @confirm="verify(record)">
|
||||
<a-button type="primary" shape="round" size="small">审核</a-button>
|
||||
</a-popconfirm>
|
||||
<a-popconfirm :title="`确认删除${record.billName}吗?`" ok-text="Yes" cancel-text="No" @confirm="remove(record)">
|
||||
<a-button type="primary" danger shape="round" size="small">删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import XLSX from 'xlsx';
|
||||
import _ from "lodash"
|
||||
import {
|
||||
CheckOutlined,
|
||||
EditOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import {
|
||||
pageBillUrl,
|
||||
saveRoadNoiseBill,
|
||||
removeRoadNoiseBill,
|
||||
removeBatchRoadNoiseBill,
|
||||
updateRoadNoiseBill,
|
||||
verifyRoadNoiseBill
|
||||
} from "@/api/ecology/road-sound";
|
||||
import utils from "./utils";
|
||||
import moment from "moment";
|
||||
export default {
|
||||
name: 'RoadOther',
|
||||
components: {
|
||||
CheckOutlined,
|
||||
EditOutlined
|
||||
},
|
||||
data() {
|
||||
|
||||
return {
|
||||
// 表格数据接口
|
||||
url: pageBillUrl,
|
||||
selection: [],
|
||||
// 表格列配置
|
||||
columns: [{
|
||||
key: 'index',
|
||||
dataIndex: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
customRender: ({
|
||||
index
|
||||
}) => index + 1
|
||||
},
|
||||
{
|
||||
title: '表格名称',
|
||||
dataIndex: 'billName',
|
||||
sorter: true,
|
||||
slots: {
|
||||
customRender: 'billName',
|
||||
},
|
||||
|
||||
},
|
||||
{
|
||||
title: '条目',
|
||||
dataIndex: 'recordSize',
|
||||
sorter: true,
|
||||
|
||||
},
|
||||
// {
|
||||
// title: '菜单名称',
|
||||
// dataIndex: 'title',
|
||||
// sorter: true
|
||||
// },
|
||||
{
|
||||
title: '上报时间',
|
||||
dataIndex: 'reportTime',
|
||||
sorter: true,
|
||||
slots: {
|
||||
customRender: 'reportTime',
|
||||
},
|
||||
// customRender: ({
|
||||
// text
|
||||
// }) => this.$util.toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '导入时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
customRender: ({
|
||||
text
|
||||
}) => this.$util.toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '审核状态',
|
||||
dataIndex: 'checked',
|
||||
sorter: true,
|
||||
slots: {
|
||||
customRender: 'checked',
|
||||
},
|
||||
|
||||
},
|
||||
// {
|
||||
// title: '更新时间',
|
||||
// dataIndex: 'updateTime',
|
||||
// sorter: true,
|
||||
// customRender: ({
|
||||
// text
|
||||
// }) => this.$util.toDateString(text)
|
||||
// },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
slots: {
|
||||
customRender: 'action'
|
||||
}
|
||||
}
|
||||
],
|
||||
// 表格搜索条件
|
||||
where: {},
|
||||
reportTimeScope: [],
|
||||
// 表格选中数据
|
||||
selectionList: [],
|
||||
editableData: {},
|
||||
// 当前编辑数据
|
||||
current: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
/* 刷新表格 */
|
||||
reload() {
|
||||
this.where.reportTimeStart = null;
|
||||
this.where.reportTimeEnd = null;
|
||||
if (this.reportTimeScope && this.reportTimeScope.length == 2) {
|
||||
this.where.reportTimeStart = this.reportTimeScope[0].format("Y-M-D H:m:s")
|
||||
this.where.reportTimeEnd = this.reportTimeScope[1].format("Y-M-D H:m:s")
|
||||
}
|
||||
this.$refs.table.reload({
|
||||
where: this.where
|
||||
});
|
||||
},
|
||||
/* 重置搜索 */
|
||||
reset() {
|
||||
this.where = {};
|
||||
this.reportTimeScope = [];
|
||||
this.reload();
|
||||
},
|
||||
detail(record) {
|
||||
this.$router.replace({
|
||||
path: "/sound/road/collect/table/" + record.roadNoiseBillId
|
||||
})
|
||||
},
|
||||
edit(record) {
|
||||
this.editableData[record.roadNoiseBillId] = _.cloneDeep(record);
|
||||
this.editableData[record.roadNoiseBillId].reportTime = moment(this.editableData[record.roadNoiseBillId]
|
||||
.reportTime)
|
||||
},
|
||||
verify(record) {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
verifyRoadNoiseBill({roadNoiseBillId:record.roadNoiseBillId}).then(res => {
|
||||
if (res.data.code == 0) {
|
||||
record.checked = 1
|
||||
this.$message.success(res.data.msg);
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch((e) => {
|
||||
this.$message.error(e.message);
|
||||
}).finally(() => {
|
||||
hide();
|
||||
})
|
||||
},
|
||||
save(record) {
|
||||
|
||||
let {
|
||||
roadNoiseBillId,
|
||||
billName,
|
||||
reportTime
|
||||
} = this.editableData[record.roadNoiseBillId];
|
||||
if (!roadNoiseBillId || !reportTime) {
|
||||
this.$message.error('请填写完整信息再提交')
|
||||
return
|
||||
}
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
reportTime = reportTime.format("x")
|
||||
reportTime = Number(reportTime)
|
||||
updateRoadNoiseBill({
|
||||
roadNoiseBillId,
|
||||
billName,
|
||||
reportTime
|
||||
}).then(res => {
|
||||
if (res.data.code == 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
record.billName = billName;
|
||||
record.reportTime = reportTime
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
console.log(e);
|
||||
this.$message.error(e.message);
|
||||
}).finally(() => {
|
||||
delete this.editableData[record.roadNoiseBillId]
|
||||
hide()
|
||||
})
|
||||
|
||||
},
|
||||
/* 删除单个 */
|
||||
remove(row) {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
removeRoadNoiseBill(row.roadNoiseBillId).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.$message.error(e.msg);
|
||||
}).finally(() => hide());
|
||||
},
|
||||
removeBatch() {
|
||||
const ids = this.selectionList.map(item => item.roadNoiseBillId);
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
removeBatchRoadNoiseBill(ids).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
|
||||
this.$message.error(e.msg);
|
||||
}).finally(() => hide());
|
||||
},
|
||||
/* 导入本地excel文件 */
|
||||
importFile(file) {
|
||||
try {
|
||||
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,
|
||||
|
||||
});
|
||||
const reportDate = aoa[1][0].replace(/[^\d]+/g, "-")
|
||||
const roadNoiseList = aoa.filter(item => item.length == 21 && typeof item[0] == "number");
|
||||
// 解析成对象数组
|
||||
const billData = utils.toObjData(roadNoiseList);
|
||||
// 上传到服务器
|
||||
saveRoadNoiseBill({
|
||||
reportTime: new Date(reportDate).getTime(),
|
||||
billName: file.name.substr(0, file.name.lastIndexOf(".")),
|
||||
roadNoiseList: billData
|
||||
}).then(() => {
|
||||
this.reload()
|
||||
})
|
||||
// console.log(billData);
|
||||
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
} catch (error) {
|
||||
this.$message.error("表格格式有误，请检查后重新上传！");
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.editable-cell {
|
||||
position: relative;
|
||||
|
||||
.editable-cell-input-wrapper,
|
||||
.editable-cell-text-wrapper {
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.editable-cell-text-wrapper {
|
||||
padding: 5px 24px 5px 5px;
|
||||
}
|
||||
|
||||
.editable-cell-icon,
|
||||
.editable-cell-icon-check {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.editable-cell-icon {
|
||||
margin-top: 4px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.editable-cell-icon-check {
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.editable-cell-icon:hover,
|
||||
.editable-cell-icon-check:hover {
|
||||
color: #108ee9;
|
||||
}
|
||||
|
||||
.editable-add-btn {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.editable-cell:hover .editable-cell-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
459
src/views/sound/road/other/other.vue
Normal file
459
src/views/sound/road/other/other.vue
Normal file
@@ -0,0 +1,459 @@
|
||||
<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.place" placeholder="请输入测点名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="路段:">
|
||||
<a-input v-model:value.trim="where.road" placeholder="请输入路段名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="城区">
|
||||
<a-input v-model:value.trim="where.area" placeholder="请输入城区名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item class="ele-text-right" :wrapper-col="{span: 24}">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="reload">查询</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<a-modal v-model:visible="showEdit" :title="form.roadNoiseId!==undefined?'修改用户':'添加用户'" :confirm-loading="loading"
|
||||
:width="1000" :body-style="{paddingBottom: '8px'}" @ok="save">
|
||||
<a-form ref="form" :model="form" :rules="rules" :label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 18}, sm: {span: 24}}">
|
||||
<a-row>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="日期" name="monitorDate">
|
||||
<a-date-picker v-model:value="form.monitorDate" :locale="locale" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="时间" name="monitorTime">
|
||||
<a-time-picker v-model:value="form.monitorTime" format="HH:mm" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="时段" name="timeSlot">
|
||||
<a-select v-model:value="form.timeSlot">
|
||||
<a-select-option value="昼">昼</a-select-option>
|
||||
<a-select-option value="夜">夜</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="测点名称" name="place">
|
||||
<a-input v-model:value="form.place" placeholder="请输入测点名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="点号" name="placeCode">
|
||||
<a-input v-model:value="form.placeCode" placeholder="请输入点号" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="所属路段" name="road">
|
||||
<a-input v-model:value="form.road" placeholder="请输入测点名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="所属城区" name="area">
|
||||
<a-input v-model:value="form.area" placeholder="请输入点号" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="路长" name="roadLength">
|
||||
<a-input v-model:value="form.roadLength" placeholder="请输入路长（米）" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="总路宽" name="roadWidth">
|
||||
<a-input v-model:value="form.roadWidth" placeholder="请输入总路宽（米）" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="中小型车流量" name="smallTrafficFlow">
|
||||
<a-input type="number" v-model:value="form.smallTrafficFlow" placeholder="请输入中小型车流量（辆/20分钟）"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="大型车流量" name="largeTrafficFlow">
|
||||
<a-input type="number" v-model:value="form.largeTrafficFlow" placeholder="请输入大型车流量（辆/20分钟）"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="LeqdB(A)" name="indexLeq">
|
||||
<a-input type="number" v-model:value="form.indexLeq" placeholder="请输入LeqdB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="SDdB(A)" name="indexSd">
|
||||
<a-input type="number" v-model:value="form.indexSd" placeholder="请输入大SDdB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="L10dB(A)" name="indexL10">
|
||||
<a-input type="number" v-model:value="form.indexL10" placeholder="请输入L10dB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="L50dB(A)" name="indexL50">
|
||||
<a-input type="number" v-model:value="form.indexL50" placeholder="请输入L50dB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="L90dB(A)" name="indexL90">
|
||||
<a-input type="number" v-model:value="form.indexL90" placeholder="请输入L90dB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="LmindB(A)" name="indexLmin">
|
||||
<a-input type="number" v-model:value="form.indexLmin" placeholder="请输入LmindB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="LmaxdB(A)" name="indexLmax">
|
||||
<a-input type="number" v-model:value="form.indexLmax" placeholder="请输入LmaxdB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-form>
|
||||
|
||||
</a-modal>
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table v-model:selection="selectionList" ref="table" row-key="roadNoiseId" :datasource="url"
|
||||
:columns="columns" :where="where" :scroll="{x: 'max-content'}">
|
||||
<template v-if="bill.checked != 1" #toolbar>
|
||||
<a-space>
|
||||
<a-button @click="openEdit" type="primary">新增</a-button>
|
||||
<a-popconfirm :disabled="selectionList.length == 0" :title="`确认删除${selectionList.length}条数据吗?`"
|
||||
ok-text="Yes" cancel-text="No" @confirm="removeBatch">
|
||||
<a-button :disabled="selectionList.length == 0" type="primary" ghost danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-button @click="openEdit(record)" type="primary" shape="round" size="small">修改</a-button>
|
||||
<a-popconfirm :title="`确认删除这条数据吗?`" ok-text="Yes" cancel-text="No" @confirm="remove(record)">
|
||||
<a-button type="primary" danger shape="round" size="small">删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from "lodash"
|
||||
import {
|
||||
pageRoadNoiseUrl,
|
||||
saveRoadNoise,
|
||||
removeRoadNoise,
|
||||
removeBatchRoadNoise,
|
||||
updateRoadNoise,
|
||||
getRoadNoiseBill
|
||||
} from "@/api/ecology/road-sound";
|
||||
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
|
||||
import moment from 'moment';
|
||||
// import utils from "./utils";
|
||||
export default {
|
||||
name: 'RoadNoise',
|
||||
components: {},
|
||||
data() {
|
||||
const {
|
||||
billId
|
||||
} = this.$route.params
|
||||
|
||||
return {
|
||||
locale,
|
||||
bill:{},
|
||||
// 表格数据接口
|
||||
url: pageRoadNoiseUrl,
|
||||
selection: [],
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
title: '监测日期',
|
||||
dataIndex: 'monitorTime',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '测点名称',
|
||||
dataIndex: 'place',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '点号',
|
||||
dataIndex: 'placeCode',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '所属路段',
|
||||
dataIndex: 'road',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '所属城区',
|
||||
dataIndex: 'area',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '路长',
|
||||
dataIndex: 'roadLength',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '路宽',
|
||||
dataIndex: 'roadWidth',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '中小型车流量（辆/20分钟）',
|
||||
dataIndex: 'smallTrafficFlow',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '大型车流量（辆/20分钟）',
|
||||
dataIndex: 'largeTrafficFlow',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '时段',
|
||||
dataIndex: 'timeSlot',
|
||||
sorter: true
|
||||
},
|
||||
// {
|
||||
// title: '月',
|
||||
// dataIndex: 'monitorMonth',
|
||||
// sorter: true
|
||||
// },
|
||||
// {
|
||||
// title: '日',
|
||||
// dataIndex: 'monitorDay',
|
||||
// sorter: true
|
||||
// },
|
||||
// {
|
||||
// title: '时',
|
||||
// dataIndex: 'monitorHour',
|
||||
// sorter: true
|
||||
// },
|
||||
// {
|
||||
// title: '分',
|
||||
// dataIndex: 'monitorMinute',
|
||||
// sorter: true
|
||||
// },
|
||||
{
|
||||
title: 'LeqdB(A)',
|
||||
dataIndex: 'indexLeq',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'SDdB(A)',
|
||||
dataIndex: 'indexSd',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'L10dB(A)',
|
||||
dataIndex: 'indexL10',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'L50dB(A)',
|
||||
dataIndex: 'indexL50',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'L90dB(A)',
|
||||
dataIndex: 'indexL90',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'LmindB(A)',
|
||||
dataIndex: 'indexLmin',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'LmaxdB(A)',
|
||||
dataIndex: 'indexLmax',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
slots: {
|
||||
customRender: 'action'
|
||||
}
|
||||
}
|
||||
],
|
||||
// 表格搜索条件
|
||||
roadNoiseBillId: billId,
|
||||
where: {
|
||||
roadNoiseBillId: billId
|
||||
},
|
||||
// 表格选中数据
|
||||
selectionList: [],
|
||||
// 是否显示编辑弹窗
|
||||
showEdit: false,
|
||||
// 表单数据
|
||||
form: {},
|
||||
loading: false,
|
||||
rules: {}
|
||||
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
const {
|
||||
billId
|
||||
} = this.$route.params
|
||||
getRoadNoiseBill(billId).then(res=>{
|
||||
this.bill = res.data.data
|
||||
if(res.data.data.checked == 1){
|
||||
this.columns.splice(this.columns.length-1,1)
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
/* 刷新表格 */
|
||||
reload() {
|
||||
console.log(this.$route);
|
||||
console.log(this.$router);
|
||||
this.$refs.table.reload({
|
||||
where: this.where
|
||||
});
|
||||
},
|
||||
/* 重置搜索 */
|
||||
reset() {
|
||||
this.where = {
|
||||
roadNoiseBillId: this.roadNoiseBillId
|
||||
};
|
||||
this.reload();
|
||||
},
|
||||
/* 显示编辑 */
|
||||
openEdit(record) {
|
||||
const cloneRecord = _.cloneDeep(record)
|
||||
if (record && cloneRecord.monitorTime) {
|
||||
console.log(moment(cloneRecord.monitorTime).format('YYYY MM DD'));
|
||||
cloneRecord.monitorDate = moment(cloneRecord.monitorTime);
|
||||
cloneRecord.monitorTime = moment(cloneRecord.monitorTime);
|
||||
}
|
||||
// cloneRecord.mi
|
||||
this.form = Object.assign({}, cloneRecord);
|
||||
this.showEdit = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.form.clearValidate(); // 清除表单验证信息
|
||||
});
|
||||
},
|
||||
|
||||
save() {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
const form = _.cloneDeep(this.form);
|
||||
const date = new Date();
|
||||
date.setFullYear(form.monitorDate.year());
|
||||
date.setMonth(form.monitorDate.month());
|
||||
date.setDate(form.monitorDate.date());
|
||||
date.setHours(form.monitorTime.hour());
|
||||
date.setMinutes(form.monitorTime.minutes());
|
||||
form.monitorTime = date.getTime();
|
||||
form.monitorYear = date.getFullYear();
|
||||
form.monitorMonth = date.getMonth() + 1;
|
||||
form.monitorDay = date.getDate();
|
||||
form.monitorHour = date.getHours();
|
||||
form.monitorMinute = date.getMinutes();
|
||||
delete form['monitorDate']
|
||||
if (form.roadNoiseId) {
|
||||
updateRoadNoise(form).then(res => {
|
||||
if (res.data.code == 0) {
|
||||
this.showEdit = false;
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch((error)=>{
|
||||
this.$message.error(error.message);
|
||||
}).finally(()=>{
|
||||
console.log("finallyfinallyfinallyfinally");
|
||||
hide();
|
||||
})
|
||||
}else{
|
||||
form.roadNoiseBillId = this.roadNoiseBillId;
|
||||
saveRoadNoise(form).then(res => {
|
||||
if (res.data.code == 0) {
|
||||
this.showEdit = false;
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch((error)=>{
|
||||
this.$message.error(error.message);
|
||||
}).finally(()=>{
|
||||
hide();
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
/* 删除单个 */
|
||||
remove(row) {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
removeRoadNoise(row.roadNoiseId).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.$message.error(e.msg);
|
||||
}).finally(() => hide());
|
||||
},
|
||||
removeBatch() {
|
||||
const ids = this.selectionList.map(item => item.roadNoiseId);
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
removeBatchRoadNoise(ids).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
|
||||
this.$message.error(e.msg);
|
||||
}).finally(() => hide());
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
459
src/views/sound/road/other/table.vue
Normal file
459
src/views/sound/road/other/table.vue
Normal file
@@ -0,0 +1,459 @@
|
||||
<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.place" placeholder="请输入测点名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="路段:">
|
||||
<a-input v-model:value.trim="where.road" placeholder="请输入路段名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="城区">
|
||||
<a-input v-model:value.trim="where.area" placeholder="请输入城区名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item class="ele-text-right" :wrapper-col="{span: 24}">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="reload">查询</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<a-modal v-model:visible="showEdit" :title="form.roadNoiseId!==undefined?'修改用户':'添加用户'" :confirm-loading="loading"
|
||||
:width="1000" :body-style="{paddingBottom: '8px'}" @ok="save">
|
||||
<a-form ref="form" :model="form" :rules="rules" :label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 18}, sm: {span: 24}}">
|
||||
<a-row>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="日期" name="monitorDate">
|
||||
<a-date-picker v-model:value="form.monitorDate" :locale="locale" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="时间" name="monitorTime">
|
||||
<a-time-picker v-model:value="form.monitorTime" format="HH:mm" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="时段" name="timeSlot">
|
||||
<a-select v-model:value="form.timeSlot">
|
||||
<a-select-option value="昼">昼</a-select-option>
|
||||
<a-select-option value="夜">夜</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="测点名称" name="place">
|
||||
<a-input v-model:value="form.place" placeholder="请输入测点名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="点号" name="placeCode">
|
||||
<a-input v-model:value="form.placeCode" placeholder="请输入点号" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="所属路段" name="road">
|
||||
<a-input v-model:value="form.road" placeholder="请输入测点名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="所属城区" name="area">
|
||||
<a-input v-model:value="form.area" placeholder="请输入点号" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="路长" name="roadLength">
|
||||
<a-input v-model:value="form.roadLength" placeholder="请输入路长（米）" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="总路宽" name="roadWidth">
|
||||
<a-input v-model:value="form.roadWidth" placeholder="请输入总路宽（米）" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="中小型车流量" name="smallTrafficFlow">
|
||||
<a-input type="number" v-model:value="form.smallTrafficFlow" placeholder="请输入中小型车流量（辆/20分钟）"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="大型车流量" name="largeTrafficFlow">
|
||||
<a-input type="number" v-model:value="form.largeTrafficFlow" placeholder="请输入大型车流量（辆/20分钟）"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="LeqdB(A)" name="indexLeq">
|
||||
<a-input type="number" v-model:value="form.indexLeq" placeholder="请输入LeqdB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="SDdB(A)" name="indexSd">
|
||||
<a-input type="number" v-model:value="form.indexSd" placeholder="请输入大SDdB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="L10dB(A)" name="indexL10">
|
||||
<a-input type="number" v-model:value="form.indexL10" placeholder="请输入L10dB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="L50dB(A)" name="indexL50">
|
||||
<a-input type="number" v-model:value="form.indexL50" placeholder="请输入L50dB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="L90dB(A)" name="indexL90">
|
||||
<a-input type="number" v-model:value="form.indexL90" placeholder="请输入L90dB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="LmindB(A)" name="indexLmin">
|
||||
<a-input type="number" v-model:value="form.indexLmin" placeholder="请输入LmindB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="LmaxdB(A)" name="indexLmax">
|
||||
<a-input type="number" v-model:value="form.indexLmax" placeholder="请输入LmaxdB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-form>
|
||||
|
||||
</a-modal>
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table v-model:selection="selectionList" ref="table" row-key="roadNoiseId" :datasource="url"
|
||||
:columns="columns" :where="where" :scroll="{x: 'max-content'}">
|
||||
<template v-if="bill.checked != 1" #toolbar>
|
||||
<a-space>
|
||||
<a-button @click="openEdit" type="primary">新增</a-button>
|
||||
<a-popconfirm :disabled="selectionList.length == 0" :title="`确认删除${selectionList.length}条数据吗?`"
|
||||
ok-text="Yes" cancel-text="No" @confirm="removeBatch">
|
||||
<a-button :disabled="selectionList.length == 0" type="primary" ghost danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-button @click="openEdit(record)" type="primary" shape="round" size="small">修改</a-button>
|
||||
<a-popconfirm :title="`确认删除这条数据吗?`" ok-text="Yes" cancel-text="No" @confirm="remove(record)">
|
||||
<a-button type="primary" danger shape="round" size="small">删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from "lodash"
|
||||
import {
|
||||
pageRoadNoiseUrl,
|
||||
saveRoadNoise,
|
||||
removeRoadNoise,
|
||||
removeBatchRoadNoise,
|
||||
updateRoadNoise,
|
||||
getRoadNoiseBill
|
||||
} from "@/api/ecology/road-sound";
|
||||
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
|
||||
import moment from 'moment';
|
||||
// import utils from "./utils";
|
||||
export default {
|
||||
name: 'RoadNoise',
|
||||
components: {},
|
||||
data() {
|
||||
const {
|
||||
billId
|
||||
} = this.$route.params
|
||||
|
||||
return {
|
||||
locale,
|
||||
bill:{},
|
||||
// 表格数据接口
|
||||
url: pageRoadNoiseUrl,
|
||||
selection: [],
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
title: '监测日期',
|
||||
dataIndex: 'monitorTime',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '测点名称',
|
||||
dataIndex: 'place',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '点号',
|
||||
dataIndex: 'placeCode',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '所属路段',
|
||||
dataIndex: 'road',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '所属城区',
|
||||
dataIndex: 'area',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '路长',
|
||||
dataIndex: 'roadLength',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '路宽',
|
||||
dataIndex: 'roadWidth',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '中小型车流量（辆/20分钟）',
|
||||
dataIndex: 'smallTrafficFlow',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '大型车流量（辆/20分钟）',
|
||||
dataIndex: 'largeTrafficFlow',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '时段',
|
||||
dataIndex: 'timeSlot',
|
||||
sorter: true
|
||||
},
|
||||
// {
|
||||
// title: '月',
|
||||
// dataIndex: 'monitorMonth',
|
||||
// sorter: true
|
||||
// },
|
||||
// {
|
||||
// title: '日',
|
||||
// dataIndex: 'monitorDay',
|
||||
// sorter: true
|
||||
// },
|
||||
// {
|
||||
// title: '时',
|
||||
// dataIndex: 'monitorHour',
|
||||
// sorter: true
|
||||
// },
|
||||
// {
|
||||
// title: '分',
|
||||
// dataIndex: 'monitorMinute',
|
||||
// sorter: true
|
||||
// },
|
||||
{
|
||||
title: 'LeqdB(A)',
|
||||
dataIndex: 'indexLeq',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'SDdB(A)',
|
||||
dataIndex: 'indexSd',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'L10dB(A)',
|
||||
dataIndex: 'indexL10',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'L50dB(A)',
|
||||
dataIndex: 'indexL50',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'L90dB(A)',
|
||||
dataIndex: 'indexL90',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'LmindB(A)',
|
||||
dataIndex: 'indexLmin',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'LmaxdB(A)',
|
||||
dataIndex: 'indexLmax',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
slots: {
|
||||
customRender: 'action'
|
||||
}
|
||||
}
|
||||
],
|
||||
// 表格搜索条件
|
||||
roadNoiseBillId: billId,
|
||||
where: {
|
||||
roadNoiseBillId: billId
|
||||
},
|
||||
// 表格选中数据
|
||||
selectionList: [],
|
||||
// 是否显示编辑弹窗
|
||||
showEdit: false,
|
||||
// 表单数据
|
||||
form: {},
|
||||
loading: false,
|
||||
rules: {}
|
||||
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
const {
|
||||
billId
|
||||
} = this.$route.params
|
||||
getRoadNoiseBill(billId).then(res=>{
|
||||
this.bill = res.data.data
|
||||
if(res.data.data.checked == 1){
|
||||
this.columns.splice(this.columns.length-1,1)
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
/* 刷新表格 */
|
||||
reload() {
|
||||
console.log(this.$route);
|
||||
console.log(this.$router);
|
||||
this.$refs.table.reload({
|
||||
where: this.where
|
||||
});
|
||||
},
|
||||
/* 重置搜索 */
|
||||
reset() {
|
||||
this.where = {
|
||||
roadNoiseBillId: this.roadNoiseBillId
|
||||
};
|
||||
this.reload();
|
||||
},
|
||||
/* 显示编辑 */
|
||||
openEdit(record) {
|
||||
const cloneRecord = _.cloneDeep(record)
|
||||
if (record && cloneRecord.monitorTime) {
|
||||
console.log(moment(cloneRecord.monitorTime).format('YYYY MM DD'));
|
||||
cloneRecord.monitorDate = moment(cloneRecord.monitorTime);
|
||||
cloneRecord.monitorTime = moment(cloneRecord.monitorTime);
|
||||
}
|
||||
// cloneRecord.mi
|
||||
this.form = Object.assign({}, cloneRecord);
|
||||
this.showEdit = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.form.clearValidate(); // 清除表单验证信息
|
||||
});
|
||||
},
|
||||
|
||||
save() {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
const form = _.cloneDeep(this.form);
|
||||
const date = new Date();
|
||||
date.setFullYear(form.monitorDate.year());
|
||||
date.setMonth(form.monitorDate.month());
|
||||
date.setDate(form.monitorDate.date());
|
||||
date.setHours(form.monitorTime.hour());
|
||||
date.setMinutes(form.monitorTime.minutes());
|
||||
form.monitorTime = date.getTime();
|
||||
form.monitorYear = date.getFullYear();
|
||||
form.monitorMonth = date.getMonth() + 1;
|
||||
form.monitorDay = date.getDate();
|
||||
form.monitorHour = date.getHours();
|
||||
form.monitorMinute = date.getMinutes();
|
||||
delete form['monitorDate']
|
||||
if (form.roadNoiseId) {
|
||||
updateRoadNoise(form).then(res => {
|
||||
if (res.data.code == 0) {
|
||||
this.showEdit = false;
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch((error)=>{
|
||||
this.$message.error(error.message);
|
||||
}).finally(()=>{
|
||||
console.log("finallyfinallyfinallyfinally");
|
||||
hide();
|
||||
})
|
||||
}else{
|
||||
form.roadNoiseBillId = this.roadNoiseBillId;
|
||||
saveRoadNoise(form).then(res => {
|
||||
if (res.data.code == 0) {
|
||||
this.showEdit = false;
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch((error)=>{
|
||||
this.$message.error(error.message);
|
||||
}).finally(()=>{
|
||||
hide();
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
/* 删除单个 */
|
||||
remove(row) {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
removeRoadNoise(row.roadNoiseId).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.$message.error(e.msg);
|
||||
}).finally(() => hide());
|
||||
},
|
||||
removeBatch() {
|
||||
const ids = this.selectionList.map(item => item.roadNoiseId);
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
removeBatchRoadNoise(ids).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
|
||||
this.$message.error(e.msg);
|
||||
}).finally(() => hide());
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
37
src/views/sound/road/other/utils.js
Normal file
37
src/views/sound/road/other/utils.js
Normal file
@@ -0,0 +1,37 @@
|
||||
export default {
|
||||
toObjData(excelData) {
|
||||
return excelData.map(item => {
|
||||
const monitorTime = new Date();
|
||||
monitorTime.setFullYear(item[0]);
|
||||
monitorTime.setMonth(item[10]-1);
|
||||
monitorTime.setDate(item[11]);
|
||||
monitorTime.setHours(item[12]);
|
||||
monitorTime.setMinutes(item[13]);
|
||||
return {
|
||||
monitorYear: item[0],
|
||||
place: item[1],
|
||||
placeCode: item[2],
|
||||
road: item[3],
|
||||
area: item[4],
|
||||
roadLength: item[5],
|
||||
roadWidth: item[6],
|
||||
smallTrafficFlow: item[7],
|
||||
largeTrafficFlow: item[7],
|
||||
timeSlot: item[9],
|
||||
monitorMonth: item[10],
|
||||
monitorDay: item[11],
|
||||
monitorHour: item[12],
|
||||
monitorMinute: item[13],
|
||||
monitorTime: monitorTime.getTime(),
|
||||
indexLeq: item[14],
|
||||
indexSd: item[15],
|
||||
indexL10: item[16],
|
||||
indexL50: item[17],
|
||||
indexL90: item[18],
|
||||
indexLmin: item[19],
|
||||
indexLmax: item[20],
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
218
src/views/sound/road/statistic/index.vue
Normal file
218
src/views/sound/road/statistic/index.vue
Normal file
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 搜索表单 -->
|
||||
<a-form :model="where" :labelCol="{ offset: 1}">
|
||||
<a-row>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="统计模块:">
|
||||
<a-select :options="modelOptions" v-model:value="where.model" placeholder="统计模块">
|
||||
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="昼夜:">
|
||||
<a-select :options="timeSlotOptions" v-model:value="where.timeSlot" placeholder="昼夜">
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="时间范围:">
|
||||
<!-- <a-month-picker v-model:value="timeScope" placeholder="起始" /> -->
|
||||
<a-range-picker v-model:value="timeScope" format="YYYY-MM-DD"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :lg="4" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item class="ele-text-right" :wrapper-col="{span: 24}">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="reload">查询</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
<ele-pro-table ref="table" row-key="id" :datasource="url" :columns="columns" :where="where"
|
||||
:scroll="{x: 'max-content'}">
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from "lodash";
|
||||
import {pageRoadNoiseStatisticUrl} from "@/api/ecology/road-sound"
|
||||
const columns = [{
|
||||
title: '测点',
|
||||
dataIndex: 'place',
|
||||
|
||||
},
|
||||
{
|
||||
title: '路段',
|
||||
dataIndex: 'road',
|
||||
|
||||
},
|
||||
{
|
||||
title: '城区',
|
||||
dataIndex: 'area',
|
||||
},
|
||||
{
|
||||
title: '路长',
|
||||
dataIndex: 'roadLength',
|
||||
customRender: ({
|
||||
text
|
||||
}) => Math.round(text)
|
||||
|
||||
},
|
||||
{
|
||||
title: '路宽',
|
||||
dataIndex: 'roadWidth',
|
||||
customRender: ({
|
||||
text
|
||||
}) => Math.round(text)
|
||||
},
|
||||
{
|
||||
title: '中小型车流量(辆/20分钟)',
|
||||
dataIndex: 'smallTrafficFlow',
|
||||
customRender: ({
|
||||
text
|
||||
}) => Math.round(text)
|
||||
},
|
||||
{
|
||||
title: '大型车流量(辆/20分钟)',
|
||||
dataIndex: 'largeTrafficFlow',
|
||||
customRender: ({
|
||||
text
|
||||
}) => Math.round(text)
|
||||
},
|
||||
{
|
||||
title: 'Leq',
|
||||
dataIndex: 'leq',
|
||||
customRender: ({
|
||||
text
|
||||
}) => Number(text).toFixed(2)
|
||||
},
|
||||
{
|
||||
title: 'L10',
|
||||
dataIndex: 'l10',
|
||||
customRender: ({
|
||||
text
|
||||
}) => Number(text).toFixed(2)
|
||||
},
|
||||
{
|
||||
title: 'L50',
|
||||
dataIndex: 'l50',
|
||||
customRender: ({
|
||||
text
|
||||
}) => Number(text).toFixed(2)
|
||||
},
|
||||
{
|
||||
title: 'L90',
|
||||
dataIndex: 'l90',
|
||||
customRender: ({
|
||||
text
|
||||
}) => Number(text).toFixed(2)
|
||||
},
|
||||
{
|
||||
title: 'SD',
|
||||
dataIndex: 'sd',
|
||||
customRender: ({
|
||||
text
|
||||
}) => Number(text).toFixed(2)
|
||||
},
|
||||
{
|
||||
title: 'Lmin',
|
||||
dataIndex: 'lmin',
|
||||
customRender: ({
|
||||
text
|
||||
}) => Number(text).toFixed(2)
|
||||
},
|
||||
{
|
||||
title: 'Lmax',
|
||||
dataIndex: 'lmax',
|
||||
customRender: ({
|
||||
text
|
||||
}) => Number(text).toFixed(2)
|
||||
},
|
||||
]
|
||||
export default {
|
||||
name: 'StatisticSoundRoad',
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url: pageRoadNoiseStatisticUrl,
|
||||
where: {
|
||||
model: "place"
|
||||
},
|
||||
timeScope: [],
|
||||
columns,
|
||||
modelOptions: [{
|
||||
value: "place",
|
||||
label: "测点",
|
||||
}, {
|
||||
value: "road",
|
||||
label: "路段",
|
||||
}, {
|
||||
value: "area",
|
||||
label: "城区",
|
||||
}],
|
||||
timeSlotOptions: [{
|
||||
value: "昼",
|
||||
label: "昼"
|
||||
}, {
|
||||
value: "夜",
|
||||
label: "夜"
|
||||
}]
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 刷新表格 */
|
||||
reload() {
|
||||
console.log(this.timeScope[0].format("Y-M-D H:m:s"));
|
||||
this.$refs.table.reload({
|
||||
where: {
|
||||
model: this.where.model,
|
||||
timeStart: this.timeScope ? this.timeScope[0].format("Y-M-D") : null,
|
||||
timeEnd: this.timeScope ? this.timeScope[1].format("Y-M-D") : null,
|
||||
timeSlot: this.where.timeSlot
|
||||
}
|
||||
});
|
||||
let cloneColumns = _.cloneDeep(columns);
|
||||
if (this.where.model == "area") {
|
||||
this.columns = cloneColumns.filter(item => {
|
||||
return item.dataIndex != "place" && item.dataIndex != "road";
|
||||
})
|
||||
} else if (this.where.model == "road") {
|
||||
this.columns = cloneColumns.filter(item => {
|
||||
return item.dataIndex != "place"
|
||||
})
|
||||
}
|
||||
},
|
||||
/* 重置搜索 */
|
||||
reset() {
|
||||
this.where = {
|
||||
model: "place",
|
||||
timeSlot: "昼"
|
||||
};
|
||||
this.this.timeScope = []
|
||||
|
||||
this.reload();
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
407
src/views/sound/zone/index.vue
Normal file
407
src/views/sound/zone/index.vue
Normal file
@@ -0,0 +1,407 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 搜索表单 -->
|
||||
<a-form :model="where" :labelCol="{ offset: 1}">
|
||||
<a-row>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="审核状态:">
|
||||
<a-select v-model:value="where.checked" allowClear placeholder="全部">
|
||||
<a-select-option value="1">已审核</a-select-option>
|
||||
<a-select-option value="0">未审核</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="表格名称:">
|
||||
<a-input v-model:value.trim="where.billName" placeholder="请输入" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="上报时间:">
|
||||
<a-range-picker separator="~" v-model:value="reportTimeScope" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item class="ele-text-right" :wrapper-col="{span: 24}">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="reload">查询</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table v-model:selection="selectionList" ref="table" row-key="roadNoiseBillId" :datasource="url"
|
||||
:columns="columns" :where="where" :scroll="{x: 'max-content'}">
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-upload :before-upload="importFile" :showUploadList="false" accept=".xls,.xlsx,.csv">
|
||||
<a-button>导入excel</a-button>
|
||||
</a-upload>
|
||||
<a-popconfirm :disabled="selectionList.length == 0" :title="`确认删除${selectionList.length}条数据吗?`"
|
||||
ok-text="Yes" cancel-text="No" @confirm="removeBatch">
|
||||
<a-button :disabled="selectionList.length == 0" type="primary" ghost danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #billName="{ text, record }">
|
||||
<div class="editable-cell">
|
||||
<div v-if="editableData[record.roadNoiseBillId]" class="editable-cell-input-wrapper">
|
||||
<a-input v-model:value="editableData[record.roadNoiseBillId].billName" @pressEnter="save(record)" />
|
||||
<check-outlined class="editable-cell-icon-check" @click="save(record)" />
|
||||
</div>
|
||||
<div v-else class="editable-cell-text-wrapper">
|
||||
{{ text || ' ' }}
|
||||
<edit-outlined class="editable-cell-icon" @click="edit(record)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #reportTime="{ text, record }">
|
||||
<div class="editable-cell">
|
||||
<div v-if="editableData[record.roadNoiseBillId]" class="editable-cell-input-wrapper">
|
||||
<a-date-picker v-model:value="editableData[record.roadNoiseBillId].reportTime"></a-date-picker>
|
||||
<!-- <a-input v-model:value="editableData[record.roadNoiseBillId].reportTime" @pressEnter="save(record)" /> -->
|
||||
<check-outlined class="editable-cell-icon-check" @click="save(record)" />
|
||||
</div>
|
||||
<div v-else class="editable-cell-text-wrapper">
|
||||
{{ $util.toDateString(text,'yyyy-MM-dd') || ' ' }}
|
||||
<edit-outlined class="editable-cell-icon" @click="edit(record)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #checked="{text}">
|
||||
<span>
|
||||
<a-tag v-if="text" color="green">已审核</a-tag>
|
||||
<a-tag v-else color="orange">未审核</a-tag>
|
||||
</span>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-button @click="detail(record)" shape="round" size="small">查看</a-button>
|
||||
<a-popconfirm :title="`审核通过后将无法修改，确认？`" ok-text="Yes" cancel-text="No" @confirm="verify(record)">
|
||||
<a-button type="primary" shape="round" size="small">审核</a-button>
|
||||
</a-popconfirm>
|
||||
<a-popconfirm :title="`确认删除${record.billName}吗?`" ok-text="Yes" cancel-text="No" @confirm="remove(record)">
|
||||
<a-button type="primary" danger shape="round" size="small">删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import XLSX from 'xlsx';
|
||||
import _ from "lodash"
|
||||
import {
|
||||
CheckOutlined,
|
||||
EditOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import {
|
||||
pageBillUrl,
|
||||
saveRoadNoiseBill,
|
||||
removeRoadNoiseBill,
|
||||
removeBatchRoadNoiseBill,
|
||||
updateRoadNoiseBill,
|
||||
verifyRoadNoiseBill
|
||||
} from "@/api/ecology/road-sound";
|
||||
import utils from "./utils";
|
||||
import moment from "moment";
|
||||
export default {
|
||||
name: 'RoadNoise',
|
||||
components: {
|
||||
CheckOutlined,
|
||||
EditOutlined
|
||||
},
|
||||
data() {
|
||||
|
||||
return {
|
||||
// 表格数据接口
|
||||
url: pageBillUrl,
|
||||
selection: [],
|
||||
// 表格列配置
|
||||
columns: [{
|
||||
key: 'index',
|
||||
dataIndex: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
customRender: ({
|
||||
index
|
||||
}) => index + 1
|
||||
},
|
||||
{
|
||||
title: '表格名称',
|
||||
dataIndex: 'billName',
|
||||
sorter: true,
|
||||
slots: {
|
||||
customRender: 'billName',
|
||||
},
|
||||
|
||||
},
|
||||
{
|
||||
title: '条目',
|
||||
dataIndex: 'recordSize',
|
||||
sorter: true,
|
||||
|
||||
},
|
||||
// {
|
||||
// title: '菜单名称',
|
||||
// dataIndex: 'title',
|
||||
// sorter: true
|
||||
// },
|
||||
{
|
||||
title: '上报时间',
|
||||
dataIndex: 'reportTime',
|
||||
sorter: true,
|
||||
slots: {
|
||||
customRender: 'reportTime',
|
||||
},
|
||||
// customRender: ({
|
||||
// text
|
||||
// }) => this.$util.toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '导入时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
customRender: ({
|
||||
text
|
||||
}) => this.$util.toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '审核状态',
|
||||
dataIndex: 'checked',
|
||||
sorter: true,
|
||||
slots: {
|
||||
customRender: 'checked',
|
||||
},
|
||||
|
||||
},
|
||||
// {
|
||||
// title: '更新时间',
|
||||
// dataIndex: 'updateTime',
|
||||
// sorter: true,
|
||||
// customRender: ({
|
||||
// text
|
||||
// }) => this.$util.toDateString(text)
|
||||
// },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
slots: {
|
||||
customRender: 'action'
|
||||
}
|
||||
}
|
||||
],
|
||||
// 表格搜索条件
|
||||
where: {},
|
||||
reportTimeScope: [],
|
||||
// 表格选中数据
|
||||
selectionList: [],
|
||||
editableData: {},
|
||||
// 当前编辑数据
|
||||
current: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
/* 刷新表格 */
|
||||
reload() {
|
||||
this.where.reportTimeStart = null;
|
||||
this.where.reportTimeEnd = null;
|
||||
if (this.reportTimeScope && this.reportTimeScope.length == 2) {
|
||||
this.where.reportTimeStart = this.reportTimeScope[0].format("Y-M-D H:m:s")
|
||||
this.where.reportTimeEnd = this.reportTimeScope[1].format("Y-M-D H:m:s")
|
||||
}
|
||||
this.$refs.table.reload({
|
||||
where: this.where
|
||||
});
|
||||
},
|
||||
/* 重置搜索 */
|
||||
reset() {
|
||||
this.where = {};
|
||||
this.reportTimeScope = [];
|
||||
this.reload();
|
||||
},
|
||||
detail(record) {
|
||||
this.$router.replace({
|
||||
path: "/collect/sound/road/table/" + record.roadNoiseBillId
|
||||
})
|
||||
},
|
||||
edit(record) {
|
||||
this.editableData[record.roadNoiseBillId] = _.cloneDeep(record);
|
||||
this.editableData[record.roadNoiseBillId].reportTime = moment(this.editableData[record.roadNoiseBillId]
|
||||
.reportTime)
|
||||
},
|
||||
verify(record) {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
verifyRoadNoiseBill({roadNoiseBillId:record.roadNoiseBillId}).then(res => {
|
||||
if (res.data.code == 0) {
|
||||
record.checked = 1
|
||||
this.$message.success(res.data.msg);
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch((e) => {
|
||||
this.$message.error(e.message);
|
||||
}).finally(() => {
|
||||
hide();
|
||||
})
|
||||
},
|
||||
save(record) {
|
||||
|
||||
let {
|
||||
roadNoiseBillId,
|
||||
billName,
|
||||
reportTime
|
||||
} = this.editableData[record.roadNoiseBillId];
|
||||
if (!roadNoiseBillId || !reportTime) {
|
||||
this.$message.error('请填写完整信息再提交')
|
||||
return
|
||||
}
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
reportTime = reportTime.format("x")
|
||||
reportTime = Number(reportTime)
|
||||
updateRoadNoiseBill({
|
||||
roadNoiseBillId,
|
||||
billName,
|
||||
reportTime
|
||||
}).then(res => {
|
||||
if (res.data.code == 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
record.billName = billName;
|
||||
record.reportTime = reportTime
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
console.log(e);
|
||||
this.$message.error(e.message);
|
||||
}).finally(() => {
|
||||
delete this.editableData[record.roadNoiseBillId]
|
||||
hide()
|
||||
})
|
||||
|
||||
},
|
||||
/* 删除单个 */
|
||||
remove(row) {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
removeRoadNoiseBill(row.roadNoiseBillId).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.$message.error(e.msg);
|
||||
}).finally(() => hide());
|
||||
},
|
||||
removeBatch() {
|
||||
const ids = this.selectionList.map(item => item.roadNoiseBillId);
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
removeBatchRoadNoiseBill(ids).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
|
||||
this.$message.error(e.msg);
|
||||
}).finally(() => hide());
|
||||
},
|
||||
/* 导入本地excel文件 */
|
||||
importFile(file) {
|
||||
try {
|
||||
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,
|
||||
|
||||
});
|
||||
const reportDate = aoa[1][0].replace(/[^\d]+/g, "-")
|
||||
const roadNoiseList = aoa.filter(item => item.length == 21 && typeof item[0] == "number");
|
||||
// 解析成对象数组
|
||||
const billData = utils.toObjData(roadNoiseList);
|
||||
// 上传到服务器
|
||||
saveRoadNoiseBill({
|
||||
reportTime: new Date(reportDate).getTime(),
|
||||
billName: file.name.substr(0, file.name.lastIndexOf(".")),
|
||||
roadNoiseList: billData
|
||||
}).then(() => {
|
||||
this.reload()
|
||||
})
|
||||
// console.log(billData);
|
||||
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
} catch (error) {
|
||||
this.$message.error("表格格式有误，请检查后重新上传！");
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.editable-cell {
|
||||
position: relative;
|
||||
|
||||
.editable-cell-input-wrapper,
|
||||
.editable-cell-text-wrapper {
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.editable-cell-text-wrapper {
|
||||
padding: 5px 24px 5px 5px;
|
||||
}
|
||||
|
||||
.editable-cell-icon,
|
||||
.editable-cell-icon-check {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.editable-cell-icon {
|
||||
margin-top: 4px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.editable-cell-icon-check {
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.editable-cell-icon:hover,
|
||||
.editable-cell-icon-check:hover {
|
||||
color: #108ee9;
|
||||
}
|
||||
|
||||
.editable-add-btn {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.editable-cell:hover .editable-cell-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
459
src/views/sound/zone/table.vue
Normal file
459
src/views/sound/zone/table.vue
Normal file
@@ -0,0 +1,459 @@
|
||||
<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.place" placeholder="请输入测点名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="路段:">
|
||||
<a-input v-model:value.trim="where.road" placeholder="请输入路段名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="城区">
|
||||
<a-input v-model:value.trim="where.area" placeholder="请输入城区名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item class="ele-text-right" :wrapper-col="{span: 24}">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="reload">查询</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<a-modal v-model:visible="showEdit" :title="form.roadNoiseId!==undefined?'修改用户':'添加用户'" :confirm-loading="loading"
|
||||
:width="1000" :body-style="{paddingBottom: '8px'}" @ok="save">
|
||||
<a-form ref="form" :model="form" :rules="rules" :label-col="{md: {span: 6}, sm: {span: 24}}"
|
||||
:wrapper-col="{md: {span: 18}, sm: {span: 24}}">
|
||||
<a-row>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="日期" name="monitorDate">
|
||||
<a-date-picker v-model:value="form.monitorDate" :locale="locale" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="时间" name="monitorTime">
|
||||
<a-time-picker v-model:value="form.monitorTime" format="HH:mm" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="时段" name="timeSlot">
|
||||
<a-select v-model:value="form.timeSlot">
|
||||
<a-select-option value="昼">昼</a-select-option>
|
||||
<a-select-option value="夜">夜</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="测点名称" name="place">
|
||||
<a-input v-model:value="form.place" placeholder="请输入测点名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="点号" name="placeCode">
|
||||
<a-input v-model:value="form.placeCode" placeholder="请输入点号" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="所属路段" name="road">
|
||||
<a-input v-model:value="form.road" placeholder="请输入测点名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="所属城区" name="area">
|
||||
<a-input v-model:value="form.area" placeholder="请输入点号" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="路长" name="roadLength">
|
||||
<a-input v-model:value="form.roadLength" placeholder="请输入路长（米）" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="总路宽" name="roadWidth">
|
||||
<a-input v-model:value="form.roadWidth" placeholder="请输入总路宽（米）" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="中小型车流量" name="smallTrafficFlow">
|
||||
<a-input type="number" v-model:value="form.smallTrafficFlow" placeholder="请输入中小型车流量（辆/20分钟）"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="大型车流量" name="largeTrafficFlow">
|
||||
<a-input type="number" v-model:value="form.largeTrafficFlow" placeholder="请输入大型车流量（辆/20分钟）"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="LeqdB(A)" name="indexLeq">
|
||||
<a-input type="number" v-model:value="form.indexLeq" placeholder="请输入LeqdB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="SDdB(A)" name="indexSd">
|
||||
<a-input type="number" v-model:value="form.indexSd" placeholder="请输入大SDdB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="L10dB(A)" name="indexL10">
|
||||
<a-input type="number" v-model:value="form.indexL10" placeholder="请输入L10dB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="L50dB(A)" name="indexL50">
|
||||
<a-input type="number" v-model:value="form.indexL50" placeholder="请输入L50dB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="L90dB(A)" name="indexL90">
|
||||
<a-input type="number" v-model:value="form.indexL90" placeholder="请输入L90dB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="LmindB(A)" name="indexLmin">
|
||||
<a-input type="number" v-model:value="form.indexLmin" placeholder="请输入LmindB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="24">
|
||||
<a-form-item label="LmaxdB(A)" name="indexLmax">
|
||||
<a-input type="number" v-model:value="form.indexLmax" placeholder="请输入LmaxdB(A)" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-form>
|
||||
|
||||
</a-modal>
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table v-model:selection="selectionList" ref="table" row-key="roadNoiseId" :datasource="url"
|
||||
:columns="columns" :where="where" :scroll="{x: 'max-content'}">
|
||||
<template v-if="bill.checked != 1" #toolbar>
|
||||
<a-space>
|
||||
<a-button @click="openEdit" type="primary">新增</a-button>
|
||||
<a-popconfirm :disabled="selectionList.length == 0" :title="`确认删除${selectionList.length}条数据吗?`"
|
||||
ok-text="Yes" cancel-text="No" @confirm="removeBatch">
|
||||
<a-button :disabled="selectionList.length == 0" type="primary" ghost danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-button @click="openEdit(record)" type="primary" shape="round" size="small">修改</a-button>
|
||||
<a-popconfirm :title="`确认删除这条数据吗?`" ok-text="Yes" cancel-text="No" @confirm="remove(record)">
|
||||
<a-button type="primary" danger shape="round" size="small">删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from "lodash"
|
||||
import {
|
||||
pageRoadNoiseUrl,
|
||||
saveRoadNoise,
|
||||
removeRoadNoise,
|
||||
removeBatchRoadNoise,
|
||||
updateRoadNoise,
|
||||
getRoadNoiseBill
|
||||
} from "@/api/ecology/road-sound";
|
||||
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
|
||||
import moment from 'moment';
|
||||
// import utils from "./utils";
|
||||
export default {
|
||||
name: 'RoadNoise',
|
||||
components: {},
|
||||
data() {
|
||||
const {
|
||||
billId
|
||||
} = this.$route.params
|
||||
|
||||
return {
|
||||
locale,
|
||||
bill:{},
|
||||
// 表格数据接口
|
||||
url: pageRoadNoiseUrl,
|
||||
selection: [],
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
title: '监测日期',
|
||||
dataIndex: 'monitorTime',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '测点名称',
|
||||
dataIndex: 'place',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '点号',
|
||||
dataIndex: 'placeCode',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '所属路段',
|
||||
dataIndex: 'road',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '所属城区',
|
||||
dataIndex: 'area',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '路长',
|
||||
dataIndex: 'roadLength',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '路宽',
|
||||
dataIndex: 'roadWidth',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '中小型车流量（辆/20分钟）',
|
||||
dataIndex: 'smallTrafficFlow',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '大型车流量（辆/20分钟）',
|
||||
dataIndex: 'largeTrafficFlow',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '时段',
|
||||
dataIndex: 'timeSlot',
|
||||
sorter: true
|
||||
},
|
||||
// {
|
||||
// title: '月',
|
||||
// dataIndex: 'monitorMonth',
|
||||
// sorter: true
|
||||
// },
|
||||
// {
|
||||
// title: '日',
|
||||
// dataIndex: 'monitorDay',
|
||||
// sorter: true
|
||||
// },
|
||||
// {
|
||||
// title: '时',
|
||||
// dataIndex: 'monitorHour',
|
||||
// sorter: true
|
||||
// },
|
||||
// {
|
||||
// title: '分',
|
||||
// dataIndex: 'monitorMinute',
|
||||
// sorter: true
|
||||
// },
|
||||
{
|
||||
title: 'LeqdB(A)',
|
||||
dataIndex: 'indexLeq',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'SDdB(A)',
|
||||
dataIndex: 'indexSd',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'L10dB(A)',
|
||||
dataIndex: 'indexL10',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'L50dB(A)',
|
||||
dataIndex: 'indexL50',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'L90dB(A)',
|
||||
dataIndex: 'indexL90',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'LmindB(A)',
|
||||
dataIndex: 'indexLmin',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: 'LmaxdB(A)',
|
||||
dataIndex: 'indexLmax',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
slots: {
|
||||
customRender: 'action'
|
||||
}
|
||||
}
|
||||
],
|
||||
// 表格搜索条件
|
||||
roadNoiseBillId: billId,
|
||||
where: {
|
||||
roadNoiseBillId: billId
|
||||
},
|
||||
// 表格选中数据
|
||||
selectionList: [],
|
||||
// 是否显示编辑弹窗
|
||||
showEdit: false,
|
||||
// 表单数据
|
||||
form: {},
|
||||
loading: false,
|
||||
rules: {}
|
||||
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
const {
|
||||
billId
|
||||
} = this.$route.params
|
||||
getRoadNoiseBill(billId).then(res=>{
|
||||
this.bill = res.data.data
|
||||
if(res.data.data.checked == 1){
|
||||
this.columns.splice(this.columns.length-1,1)
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
/* 刷新表格 */
|
||||
reload() {
|
||||
console.log(this.$route);
|
||||
console.log(this.$router);
|
||||
this.$refs.table.reload({
|
||||
where: this.where
|
||||
});
|
||||
},
|
||||
/* 重置搜索 */
|
||||
reset() {
|
||||
this.where = {
|
||||
roadNoiseBillId: this.roadNoiseBillId
|
||||
};
|
||||
this.reload();
|
||||
},
|
||||
/* 显示编辑 */
|
||||
openEdit(record) {
|
||||
const cloneRecord = _.cloneDeep(record)
|
||||
if (record && cloneRecord.monitorTime) {
|
||||
console.log(moment(cloneRecord.monitorTime).format('YYYY MM DD'));
|
||||
cloneRecord.monitorDate = moment(cloneRecord.monitorTime);
|
||||
cloneRecord.monitorTime = moment(cloneRecord.monitorTime);
|
||||
}
|
||||
// cloneRecord.mi
|
||||
this.form = Object.assign({}, cloneRecord);
|
||||
this.showEdit = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.form.clearValidate(); // 清除表单验证信息
|
||||
});
|
||||
},
|
||||
|
||||
save() {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
const form = _.cloneDeep(this.form);
|
||||
const date = new Date();
|
||||
date.setFullYear(form.monitorDate.year());
|
||||
date.setMonth(form.monitorDate.month());
|
||||
date.setDate(form.monitorDate.date());
|
||||
date.setHours(form.monitorTime.hour());
|
||||
date.setMinutes(form.monitorTime.minutes());
|
||||
form.monitorTime = date.getTime();
|
||||
form.monitorYear = date.getFullYear();
|
||||
form.monitorMonth = date.getMonth() + 1;
|
||||
form.monitorDay = date.getDate();
|
||||
form.monitorHour = date.getHours();
|
||||
form.monitorMinute = date.getMinutes();
|
||||
delete form['monitorDate']
|
||||
if (form.roadNoiseId) {
|
||||
updateRoadNoise(form).then(res => {
|
||||
if (res.data.code == 0) {
|
||||
this.showEdit = false;
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch((error)=>{
|
||||
this.$message.error(error.message);
|
||||
}).finally(()=>{
|
||||
console.log("finallyfinallyfinallyfinally");
|
||||
hide();
|
||||
})
|
||||
}else{
|
||||
form.roadNoiseBillId = this.roadNoiseBillId;
|
||||
saveRoadNoise(form).then(res => {
|
||||
if (res.data.code == 0) {
|
||||
this.showEdit = false;
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch((error)=>{
|
||||
this.$message.error(error.message);
|
||||
}).finally(()=>{
|
||||
hide();
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
/* 删除单个 */
|
||||
remove(row) {
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
removeRoadNoise(row.roadNoiseId).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
this.$message.error(e.msg);
|
||||
}).finally(() => hide());
|
||||
},
|
||||
removeBatch() {
|
||||
const ids = this.selectionList.map(item => item.roadNoiseId);
|
||||
const hide = this.$message.loading('请求中..', 0);
|
||||
removeBatchRoadNoise(ids).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success(res.data.msg);
|
||||
this.reload();
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(e => {
|
||||
|
||||
this.$message.error(e.msg);
|
||||
}).finally(() => hide());
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
37
src/views/sound/zone/utils.js
Normal file
37
src/views/sound/zone/utils.js
Normal file
@@ -0,0 +1,37 @@
|
||||
export default {
|
||||
toObjData(excelData) {
|
||||
return excelData.map(item => {
|
||||
const monitorTime = new Date();
|
||||
monitorTime.setFullYear(item[0]);
|
||||
monitorTime.setMonth(item[10]-1);
|
||||
monitorTime.setDate(item[11]);
|
||||
monitorTime.setHours(item[12]);
|
||||
monitorTime.setMinutes(item[13]);
|
||||
return {
|
||||
monitorYear: item[0],
|
||||
place: item[1],
|
||||
placeCode: item[2],
|
||||
road: item[3],
|
||||
area: item[4],
|
||||
roadLength: item[5],
|
||||
roadWidth: item[6],
|
||||
smallTrafficFlow: item[7],
|
||||
largeTrafficFlow: item[7],
|
||||
timeSlot: item[9],
|
||||
monitorMonth: item[10],
|
||||
monitorDay: item[11],
|
||||
monitorHour: item[12],
|
||||
monitorMinute: item[13],
|
||||
monitorTime: monitorTime.getTime(),
|
||||
indexLeq: item[14],
|
||||
indexSd: item[15],
|
||||
indexL10: item[16],
|
||||
indexL50: item[17],
|
||||
indexL90: item[18],
|
||||
indexLmin: item[19],
|
||||
indexLmax: item[20],
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user