Commit 0eb9e859 authored by “yiyousong”'s avatar “yiyousong”

perf: 优化模块管理

parent b840f6b9
...@@ -26,54 +26,48 @@ ...@@ -26,54 +26,48 @@
</div> </div>
<!-- 表格 --> <!-- 表格 -->
<div class="table-content"> <div class="table-content">
<a-table <y-table
:columns="columns"
:data="tableData"
:pageSize.sync="size"
:page.sync="page"
:total="total"
:loading="loading"
:scroll="{ y: 600 }"
:row-selection="{ :row-selection="{
selectedRowKeys: selectedRowKeys, selectedRowKeys: selectedRowKeys,
onChange: onSelectChange, onChange: onSelectChange,
}" }"
:loading="loading" @changePagination="getStatementList"
bordered
:scroll="{ y: 460 }"
:columns="columns"
:pagination="{
showTotal: (total) => `共 ${total} 条`,
current: current,
total: total,
pageSize: size,
showSizeChanger: true,
showQuickJumper: true,
pageSizeOptions: pageSizeOptions,
onChange: handleChange,
onShowSizeChange: showSizeChange,
}"
:data-source="tableData"
:rowKey="(record) => record.id"
> >
<!-- 序号 --> <!-- 序号 -->
<span slot="num" slot-scope="text, record, index">{{ <span slot="index" slot-scope="{ index }">{{
(current - 1) * size + index + 1 (page - 1) * size + index + 1
}}</span> }}</span>
<!-- 统计类型 --> <!-- 统计类型 -->
<template slot="censusType" slot-scope="text"> <template slot="censusType" slot-scope="{ record }">
{{ filterDict(text.censusType) }} {{ filterDict(record.censusType) }}
</template> </template>
<!-- 是否开放 --> <!-- 是否开放 -->
<template slot="status" slot-scope="text"> <template slot="status" slot-scope="{ record }">
<a-tag color="blue" v-if="text.status === 1"></a-tag> <a-tag color="blue" v-if="record.status === 1"></a-tag>
<a-tag color="red" v-else></a-tag> <a-tag color="red" v-else></a-tag>
</template> </template>
<!-- 操作 --> <!-- 操作 -->
<template slot="action" slot-scope="text"> <template slot="action" slot-scope="{ record }">
<a-space> <a-space>
<a href="javascript:;" class="edit" @click="handleEdit(text)" <a href="javascript:;" class="edit" @click="handleEdit(record)"
>编辑</a >编辑</a
> >
<a href="javascript:;" class="delete" @click="handleDel(text.id)" <a
href="javascript:;"
class="delete"
@click="handleDel(record.id)"
>删除</a >删除</a
> >
</a-space> </a-space>
</template> </template>
</a-table> </y-table>
</div> </div>
<!-- 新增报表 --> <!-- 新增报表 -->
<AddStatement <AddStatement
...@@ -90,14 +84,14 @@ ...@@ -90,14 +84,14 @@
<script> <script>
import { getStatementList, delStatement } from "@/services/basicsetFun"; import { getStatementList, delStatement } from "@/services/basicsetFun";
import AddStatement from "../modal/AddStatement.vue"; import AddStatement from "../modal/AddStatement.vue";
import { pageSizeOptions } from "@/config/pageConfig.js"; import YTable from "@/components/YTable.vue";
const columns = [ const columns = [
{ {
title: "序号", title: "序号",
dataIndex: "num", dataIndex: "index",
width: "65px", width: "65px",
scopedSlots: { scopedSlots: {
customRender: "num", customRender: "index",
}, },
}, },
{ {
...@@ -132,6 +126,7 @@ export default { ...@@ -132,6 +126,7 @@ export default {
}, },
components: { components: {
AddStatement, AddStatement,
YTable,
}, },
data() { data() {
return { return {
...@@ -140,8 +135,7 @@ export default { ...@@ -140,8 +135,7 @@ export default {
loading: false, loading: false,
total: 0, total: 0,
size: 10, size: 10,
current: 1, page: 1,
pageSizeOptions,
selectedRowKeys: [], selectedRowKeys: [],
tableData: [], tableData: [],
addStatementVisile: false, addStatementVisile: false,
...@@ -170,7 +164,7 @@ export default { ...@@ -170,7 +164,7 @@ export default {
async getStatementList() { async getStatementList() {
this.loading = true; this.loading = true;
let res = await getStatementList({ let res = await getStatementList({
page: this.current, page: this.page,
size: this.size, size: this.size,
modelId: this.modelInfo.id, modelId: this.modelInfo.id,
censusName: `%${this.censusName}%`, censusName: `%${this.censusName}%`,
...@@ -179,8 +173,8 @@ export default { ...@@ -179,8 +173,8 @@ export default {
this.dict = dict; this.dict = dict;
this.loading = false; this.loading = false;
if (code == 1) { if (code == 1) {
if (!data.length && this.current > 1) { if (!data.length && this.page > 1) {
this.current -= 1; this.page -= 1;
this.getStatementList(); this.getStatementList();
} }
this.tableData = data.data; this.tableData = data.data;
...@@ -207,7 +201,8 @@ export default { ...@@ -207,7 +201,8 @@ export default {
}, },
// 搜索 // 搜索
onSearch() { onSearch() {
this.current = 1; this.page = 1;
this.selectedRowKeys = [];
this.getStatementList(); this.getStatementList();
}, },
// 编辑 // 编辑
...@@ -216,17 +211,6 @@ export default { ...@@ -216,17 +211,6 @@ export default {
this.addStatementVisile = true; this.addStatementVisile = true;
this.$refs.AddStatement.onEdit(row, this.modelInfo); this.$refs.AddStatement.onEdit(row, this.modelInfo);
}, },
// 翻页
handleChange(cur) {
this.current = cur;
this.getStatementList();
},
// 改变每页显示数量
showSizeChange(current, size) {
this.current = current;
this.size = size;
this.getStatementList();
},
// 删除 // 删除
handleDel(id) { handleDel(id) {
let _this = this; let _this = this;
...@@ -244,6 +228,7 @@ export default { ...@@ -244,6 +228,7 @@ export default {
let { code, msg } = res.data; let { code, msg } = res.data;
if (code === 1) { if (code === 1) {
_this.$message.success(msg); _this.$message.success(msg);
_this.selectedRowKeys = [];
_this.getStatementList(); _this.getStatementList();
} }
}, },
...@@ -267,5 +252,4 @@ export default { ...@@ -267,5 +252,4 @@ export default {
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped></style>
</style>
\ No newline at end of file
...@@ -22,92 +22,66 @@ ...@@ -22,92 +22,66 @@
</div> </div>
<!-- 表格 --> <!-- 表格 -->
<div class="table-content"> <div class="table-content">
<a-table <y-table
:columns="columns"
:data="tableData"
:pageSize.sync="size"
:page.sync="page"
:total="total"
:loading="loading"
:scroll="{ y: 560 }"
:row-selection="{ :row-selection="{
selectedRowKeys: selectedRowKeys, selectedRowKeys: selectedRowKeys,
onChange: onSelectChange, onChange: onSelectChange,
}" }"
:loading="loading" @changePagination="getmodelList"
bordered
:columns="columns"
:scroll="{ y: 560 }"
:pagination="{
showTotal: (total) => `共 ${total} 条`,
current: current,
total: total,
pageSize: size,
showSizeChanger: true,
showQuickJumper: true,
pageSizeOptions: pageSizeOptions,
onChange: handleChange,
onShowSizeChange: showSizeChange,
}"
:data-source="modelList"
:rowKey="(record) => record.id"
> >
<!-- 序号 --> <span slot="index" slot-scope="{ index }">{{
<span slot="num" slot-scope="text, record, index">{{ (page - 1) * size + index + 1
(current - 1) * size + index + 1
}}</span> }}</span>
<!-- 模块地址 -->
<template slot="modelUrl" slot-scope="text">
{{ text.modelUrl ? text.modelUrl : "--" }}
</template>
<!-- 模块图标 --> <!-- 模块图标 -->
<template slot="modelIcon" slot-scope="text"> <template slot="modelIcon" slot-scope="{ record }">
<div v-if="text.modelIcon"> <div v-if="record.modelIcon">
<div class="svg-box"> <div class="svg-box">
<img <img
class="pointer" class="pointer"
width="30" width="30"
height="30" height="30"
:src="text.modelIcon" :src="record.modelIcon"
@click="handlePreview({ url: text.modelIcon })" @click="handlePreview({ url: record.modelIcon })"
/> />
</div> </div>
</div> </div>
<span v-else>--</span> <span v-else>--</span>
</template> </template>
<!-- 排序 -->
<template slot="sort" slot-scope="text">
{{ text.sort ? text.sort : "--" }}
</template>
<!-- 类型 -->
<template slot="type" slot-scope="text">
{{ text.type ? dict.type[text.type] : "--" }}
</template>
<!-- 创建时间 --> <!-- 创建时间 -->
<template slot="createTime" slot-scope="text"> <template slot="createTime" slot-scope="{ record }">
{{ text.createTime | dateFormat }} {{ record.createTime | dateFormat }}
</template>
<!-- 备注 -->
<template slot="remark" slot-scope="text">
{{ text.remark ? text.remark : "--" }}
</template> </template>
<!-- 操作 --> <!-- 操作 -->
<template slot="action" slot-scope="text"> <template slot="action" slot-scope="{ record }">
<a-space> <a-space>
<span <span
href="javascript:;" href="javascript:;"
class="primary pointer" class="primary pointer"
@click="statementManage(text)" @click="statementManage(record)"
>配置报表</span >配置报表</span
> >
<span <span
href="javascript:;" href="javascript:;"
class="primary pointer" class="primary pointer"
@click="handleEdit(text)" @click="handleEdit(record)"
>编辑</span >编辑</span
> >
<span <span
href="javascript:;" href="javascript:;"
class="delete pointer" class="delete pointer"
@click="handleDel(text.id)" @click="handleDel(record.id)"
>删除</span >删除</span
> >
</a-space> </a-space>
</template> </template>
</a-table> </y-table>
</div> </div>
</div> </div>
<!-- 新增模块 --> <!-- 新增模块 -->
...@@ -182,26 +156,13 @@ ...@@ -182,26 +156,13 @@
</a-row> </a-row>
<a-row> <a-row>
<a-col :span="12"> <a-col :span="12">
<a-form-model-item <a-form-model-item label="模块图标" prop="modelIcon">
class="handle-upload" <YUpload
label="模块图标" accept=".png,.jpg,.jpeg,.svg"
prop="modelIcon" :limit="1"
> v-model="formData.modelIcon"
<a-upload listType="picture-card"
name="file" ></YUpload>
list-type="picture-card"
:action="api + 'base/file/commonupload'"
:file-list="fileList"
@change="handleUpload"
:accept="accept"
:before-upload="beforeUpload"
@preview="handlePreview"
>
<div v-if="fileList.length < 1">
<a-icon type="plus" />
<div class="ant-upload-text">点击上传</div>
</div>
</a-upload>
</a-form-model-item> </a-form-model-item>
</a-col> </a-col>
</a-row> </a-row>
...@@ -236,14 +197,15 @@ ...@@ -236,14 +197,15 @@
import { modelList, addMode, delMode } from "@/services/basicsetFun"; import { modelList, addMode, delMode } from "@/services/basicsetFun";
import StatementManage from "./components/StatementManage.vue"; import StatementManage from "./components/StatementManage.vue";
import TabHeader from "@/components/TabHeader"; import TabHeader from "@/components/TabHeader";
import { pageSizeOptions } from "@/config/pageConfig.js"; import YTable from "@/components/YTable.vue";
import YUpload from "@/components/YUpload.vue";
const columns = [ const columns = [
{ {
title: "序号", title: "序号",
dataIndex: "num", dataIndex: "index",
width: "65px", width: "65px",
scopedSlots: { scopedSlots: {
customRender: "num", customRender: "index",
}, },
}, },
{ {
...@@ -259,7 +221,7 @@ const columns = [ ...@@ -259,7 +221,7 @@ const columns = [
{ {
title: "模块地址", title: "模块地址",
width: "20%", width: "20%",
scopedSlots: { customRender: "modelUrl" }, dataIndex: "modelUrl",
}, },
{ {
title: "模块图标", title: "模块图标",
...@@ -268,7 +230,7 @@ const columns = [ ...@@ -268,7 +230,7 @@ const columns = [
{ {
title: "排序", title: "排序",
width: "5%", width: "5%",
scopedSlots: { customRender: "sort" }, dataIndex: "sort",
}, },
{ {
title: "类型", title: "类型",
...@@ -277,11 +239,12 @@ const columns = [ ...@@ -277,11 +239,12 @@ const columns = [
{ {
title: "创建时间", title: "创建时间",
width: "12%", width: "12%",
dataIndex: "createTime",
scopedSlots: { customRender: "createTime" }, scopedSlots: { customRender: "createTime" },
}, },
{ {
title: "备注", title: "备注",
scopedSlots: { customRender: "remark" }, dataIndex: "remark",
}, },
{ {
title: "操作", title: "操作",
...@@ -293,10 +256,11 @@ export default { ...@@ -293,10 +256,11 @@ export default {
components: { components: {
StatementManage, StatementManage,
TabHeader, TabHeader,
YTable,
YUpload,
}, },
data() { data() {
return { return {
pageSizeOptions,
api: process.env.VUE_APP_API_BASE_URL + "/", api: process.env.VUE_APP_API_BASE_URL + "/",
accept: "image/jpeg,image/png,image/svg+xml", // 上传类型 accept: "image/jpeg,image/png,image/svg+xml", // 上传类型
columns, columns,
...@@ -304,7 +268,7 @@ export default { ...@@ -304,7 +268,7 @@ export default {
title: "新增模块", title: "新增模块",
visible: false, visible: false,
selectedRowKeys: [], selectedRowKeys: [],
modelList: [], tableData: [],
formData: { formData: {
modelName: "", // 模块名称 modelName: "", // 模块名称
modelCode: "", // 模块编码 modelCode: "", // 模块编码
...@@ -314,7 +278,7 @@ export default { ...@@ -314,7 +278,7 @@ export default {
sort: "", // 排序 sort: "", // 排序
type: undefined, // 类型 type: undefined, // 类型
}, },
current: 1, page: 1,
size: 10, size: 10,
total: 0, total: 0,
searchValue: "", // 搜索 searchValue: "", // 搜索
...@@ -349,20 +313,20 @@ export default { ...@@ -349,20 +313,20 @@ export default {
async getmodelList(search = {}) { async getmodelList(search = {}) {
this.loading = true; this.loading = true;
let res = await modelList({ let res = await modelList({
page: this.current, page: this.page,
size: this.size, size: this.size,
modelName: `%${this.searchValue}%`, modelName: `%${this.searchValue}%`,
...search, ...search,
}); });
if (res.data.code == 1) { if (res.data.code == 1) {
let { pageInfo, data, dict } = res.data.data; let { pageInfo, data, dict } = res.data.data;
if (!data.length && this.current > 1) { if (!data.length && this.page > 1) {
this.current -= 1; this.page -= 1;
this.getmodelList(); this.getmodelList();
} }
this.dict = dict; this.dict = dict;
this.total = pageInfo.totalResult; this.total = pageInfo.totalResult;
this.modelList = data; this.tableData = data;
} }
this.loading = false; this.loading = false;
}, },
...@@ -375,7 +339,8 @@ export default { ...@@ -375,7 +339,8 @@ export default {
}, },
// 搜索 // 搜索
onSearch() { onSearch() {
this.current = 1; this.page = 1;
this.selectedRowKeys = [];
this.getmodelList(); this.getmodelList();
}, },
// 表格选中 // 表格选中
...@@ -393,21 +358,13 @@ export default { ...@@ -393,21 +358,13 @@ export default {
}, },
// 编辑 // 编辑
handleEdit(row) { handleEdit(row) {
this.formData = { ...row };
if (this.formData.modelIcon) {
this.fileList = [
{
uid: -1,
status: "done",
name: this.formData.modelIcon,
url: this.formData.modelIcon,
},
];
}
this.visible = true; this.visible = true;
this.$nextTick(() => {
this.formData = { ...row };
});
}, },
// 删除 // 删除
handleDel(num) { handleDel(id) {
let _this = this; let _this = this;
this.$confirm({ this.$confirm({
title: "系统提示", title: "系统提示",
...@@ -419,10 +376,11 @@ export default { ...@@ -419,10 +376,11 @@ export default {
icon: "exclamation-circle", icon: "exclamation-circle",
maskClosable: true, maskClosable: true,
async onOk() { async onOk() {
let res = await delMode({ id: num }); let res = await delMode({ id });
let { code, msg } = res.data; let { code, msg } = res.data;
if (code === 1) { if (code === 1) {
_this.$message.success(msg); _this.$message.success(msg);
_this.selectedRowKeys = [];
_this.getmodelList(); _this.getmodelList();
} }
}, },
...@@ -431,17 +389,6 @@ export default { ...@@ -431,17 +389,6 @@ export default {
}, },
}); });
}, },
// 分页
handleChange(num) {
this.current = num;
this.getmodelList();
},
// 改变每页显示数量
showSizeChange(current, size) {
this.current = current;
this.size = size;
this.getmodelList();
},
// 保存新增 // 保存新增
handleOk() { handleOk() {
this.$refs.ruleForm.validate(async (valid) => { this.$refs.ruleForm.validate(async (valid) => {
...@@ -458,39 +405,9 @@ export default { ...@@ -458,39 +405,9 @@ export default {
}, },
// 重置 // 重置
handleReset() { handleReset() {
this.fileList = [];
this.$refs.ruleForm.resetFields(); this.$refs.ruleForm.resetFields();
}, },
// 上传图标
handleUpload({ fileList }) {
this.fileList = [...fileList].slice(-1);
this.fileList = this.fileList.map((v) => {
if (v.response) {
v.url = v.response.url;
}
return v;
});
if (this.fileList[0]) {
this.formData.modelIcon = this.fileList[0].url;
} else {
this.formData.modelIcon = "";
}
},
// 上传限制
beforeUpload(file) {
const isJpgOrPng =
file.type === "image/jpeg" ||
file.type === "image/png" ||
file.type === "image/svg+xml";
if (!isJpgOrPng) {
this.$message.error("请上传jpeg,svg,png格式图片!");
}
const isLt10M = file.size / 1024 / 1024 < 10;
if (!isLt10M) {
this.$message.error("上传图片大小不能超过 10MB!");
}
return isJpgOrPng && isLt10M;
},
// 预览 // 预览
handlePreview(info) { handlePreview(info) {
this.$viewerApi({ this.$viewerApi({
...@@ -502,16 +419,7 @@ export default { ...@@ -502,16 +419,7 @@ export default {
handleClose() { handleClose() {
this.handleReset(); this.handleReset();
}, },
// 图片类型
// isSvg(url) {
// let index = url.lastIndexOf(".");
// let str = url.slice(index + 1);
// if (str === "svg") {
// return true;
// } else {
// return false;
// }
// },
statementManage(row) { statementManage(row) {
let obj = { let obj = {
id: row.id, id: row.id,
...@@ -580,14 +488,6 @@ export default { ...@@ -580,14 +488,6 @@ export default {
/deep/.ant-col-3 { /deep/.ant-col-3 {
width: 12.5% !important; width: 12.5% !important;
} }
/deep/.ant-upload {
width: 80px;
height: 80px;
img {
width: 80px;
height: 80px;
}
}
.ant-upload-select-picture-card i { .ant-upload-select-picture-card i {
font-size: 20px; font-size: 20px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment