1. 弹窗-Popup
默认弹窗页面每个页面应该减少弹窗组件，尽量使用一个
更多組件内的方法 你查看组件的props属性
<template>
<!-- 弹窗 -->
<Popup
:width="700"
:title="pop_title"
:isShow="pop_isShow"
:showModal="pop_showModal"
:ok="pop_handleOk"
:showFooter="true"
>
<!-- 弹窗内组件请用判断展示 -->
<RecordingFile v-if="pop_type === 'file'"></RecordingFile>
<!-- 弹窗内组件信息提示 -->
<div v-if="pop_type === 'del'" class="tipsModalMsg" v-html="pop_tipsText"></div>
</Popup>
</template>
<script>
import Popup from "@c/popup/Popup";
import RecordingFilefrom "@c/RecordingFile";
export default {
components: {
Popup,
RecordingFile
},
data() {
return {
pop_type: "", // del 删除成员 out 成员退出
pop_title: "标题",
pop_isShow: false,
pop_tipsText: "",
// 更多关于弹窗样式 pop_
}
},
methods:{
// 弹窗 控制显隐
pop_showModal(val) {
this.pop_isShow = val;
},
// 弹窗 确定方法 del add edit
pop_handleOk() {
switch (this.pop_type) {
case "del": // 删除群成员
this.api_deletePersonal();
break;
case "add": // 编辑群成员备注信息
this.$refs.editMember.handleValidate();
break;
case "edit": // 编辑群成员备注信息
this.$refs.editMember.handleValidate();
break;
}
},
// 弹窗的其他方法 pop_
}
}
</script>
2. tabel列表
涉及的功能相对较多，同一大概的功能方法，所有关于tabel上的功能时间都用 tabel_handleOperation() 处理、
操作类型方法名：add（添加）、edit（编辑）、del（删除）、move（移动）、import（导入）、export（导出）、batchDel（批量删除），batch + 功能名 ，为批量操作方法
table_ 表示都是 table列表相关的操作
下面都是规范，不能吧代码粘过去就会执行，认真审阅需要的逻辑功能自行修改
**
2-1. 请求全部数据，本地处理分页loading
<!-- 成员列表 -->
<template>
<div>
<!-- 关于tabel顶部操作按钮 -->
<div class="tableTop_opreation_box">
<Btn type="btn08C" text="刷新" @callback="tableFn_handleOperation('refresh')"></Btn>
<Btn type="btn08A" text="添加部门" @callback="tableFn_handleOperation('add')"></Btn>
</div>
<!-- table 列表 -->
<a-spin tip="加载中，请稍后..." :spinning="Loading">
<Table
:columns="table_columns"
:data="table_nowData"
:showCheck="true"
:selectedRowKeys="table_selectedRowKeys" // 所有选中的数据key
rowKey="id"
:total="table_total"
:pageindex="this.table_page.pageindex"
:rowcount="this.table_page.rowcount"
:singleClick="()=>{}" // 单行点击事件
@changePage="tableFn_pageFun"
@checkChange="tableFn_searchData"
@checkAllChange="tableFn_allCheckData"
>
<!-- 插入操作图标 -->
<template v-slot:permissions="{data}">
<div class="table_opreation_box">
<a-tooltip placement="bottom" title="删除部门">
<span @click.stop="tableFn_handleOperation('del', data)" class="opera_btn icon_del" />
</a-tooltip>
<a-tooltip placement="bottom" title="编辑部门">
<span @click.stop="tableFn_handleOperation('edit', data)" class="opera_btn icon_edit" />
</a-tooltip>
</div>
</template>
</Table>
</a-spin>
<script>
import Table from "@c/table/TableList";
import Btn from "@c/button/Btn";
import API from "@/request/api/contacts/enterprise";
// 引入处理tabel数据的方法 ***如果你使用的静态分页搜索tabel的方法请引用这个***
import {
handleTabelData,
handleSearchTabelData,
} from "@/utils/handleTabelData";
export default {
name: "DepartmentList", // 部门列表
components: {
Btn,
Table,
},
data() {
return {
// 默认页码行数
table_page: {
pageindex: 1,
rowcount: 10,
},
table_columns: deptColumns,
table_total: 0,
table_data: [], // 列表数据
table_nowData: [], // 列表展示数据
table_searchData: [], // 搜索后的数据
table_selectedRowKeys: [], //复选选中key
table_checkData: [], // 复选框数据
// 静态loading
localLoading: false,
};
},
methods: {
// 本地搜索触发的loading
localLoadingFn() {
this.localLoading = true;
setTimeout(() => {
this.localLoading = false;
}, 300);
},
// 查询企业下所有部门
qurey_allDeptList() {
this.localLoadingFn();
this.data = [];
// 接口请求的数据，如果是从vuex 中取到的需要使用静态的loading状态，
// 如果是接口请求的，需要配置 loading 请求状态
// 这里继续处理数据结构然后 给 this.data
this.table_showData(this.data);
},
// table-当前展示数据 处理当前需要展示的列表，直接去当前页面与条数的数据
tableFn_showData(data) {
let dataInfo = handleTabelData(data, this.listtest);
this.total = dataInfo.total;
this.nowData = dataInfo.newData;
},
// table-搜索后数据 处理搜索后的数据
tableFn_searchData() {
let sData = handleSearchTabelData(
this.searchText,
this.data,
"name"
);
this.searchData = sData;
this.tableFn_showData(sData);
},
// table-页码变化 页码变化回调
tableFn_pageFun(pageindex, rowcount) {
this.table_page= {
pageindex,
rowcount,
};
this.table_checkData= [];
this.table_selectedRowKeys= [];
// 如果搜索条件不是空的时候，重新过滤一遍搜索条件并给
if (this.searchText !== "") {
this.tableFn_showData(this.table_searchData);
} else this.tableFn_showData(this.table_data);
},
// 复选框选中/取消
tableFn_selectedData(e) {
this.table_selectedRowKeys = e.index;
this.table_checkData = e.data;
},
// 复选框全选
tableFn_allCheckData(e) {
this.table_checkData = e.data;
},
// 重置选中状态以及选中的人员
tableFn_resetCheckData() {
this.table_checkData = [];
this.table_selectedRowKeys = [];
},
// 处理按钮点击事件
tableFn_handleOperation(type, data) {
this.pop_type = type;
switch (type) {
// 刷新
case 'refresh':
this.table_page.pageindex = 1;
this.qurey_allDeptList()
break;
// 添加部门
case "add":
this.editData = null;
this.pop_title = "添加部门";
this.pop_isShow = true;
break;
// xx功能方法
case "xxx":
// 这里对应写方法的操作
// *****
break;
}
},
// 操作回调
tabelFn_operationCallback() {
this.pop_isShow = false;
// 相关 回调操作
},
// 删除部门接口
api_handleOkDelTheDept() {
// api 请求代码
},
},
};
</script>
<style lang="less" scoped>
.tableTop_opreation_box{
width: 100%;
height: 56px;
line-height: 56px;
padding-left: 32px;
box-sizing: border-box;
button {
margin-right: 20px;
}
}
</style>
2-2. 接口请求分页数据，异步处理loading
<template>
<div>
<div class="query_box">
<DatePicker :setTime="setTime" :getTime="getTime"></DatePicker>
<a-input
placeholder="请输入会议主题"
:allowClear="true"
class="search_input"
v-model="params.title"
></a-input>
<Btn type="btn08A" text="搜索" :btnStyle="btnStyle" @callback="query_recordList('search')"></Btn>
</div>
<a-tabs class="tabs_box">
<a-tab-pane key="1" tab="云端录制">
<div class="tableTop_opreation_box">
<Btn type="btn08A" text="刷新" @callback="tableFn_handleOperation('refresh')"></Btn>
</div>
<a-spin tip="加载中，请稍后..." :spinning="Loading">
<Table
:columns="table_columns"
:data="table_nowData"
rowKey="starttime"
:total="table_total"
:singleClick="tableFn_singleClick"
:pageIndex="this.table_page.pageindex"
:rowcount="this.table_page.rowcount"
@changePage="tableFn_pageFun"
>
</Table>
</a-spin>
</a-tab-pane>
</a-tabs>
<!-- 弹窗 -->
<Popup
:width="700"
:title="pop_title"
:isShow="pop_isShow"
:showModal="pop_showModal"
:ok="pop_handleOk"
:showFooter="true"
>
<RecordingFile v-if="pop_type === 'file'"></RecordingFile>
<div v-if="pop_type === 'del'" class="tipsModalMsg" v-html="pop_tipsText"></div>
</Popup>
</div>
</template>
<script>
import DatePicker from "@c/datePicker/DatePicker";
import Btn from "@c/button/Btn.vue";
import Table from "@c/table/TableList";
import Popup from "@c/popup/Popup";
import RecordingFile from "./compontents/RecordingFile";
import API from "@/request/api/meeting/recording";
export default {
name: "Recording", //会议录制
components: {
DatePicker,
Btn,
Table,
Popup,
RecordingFile,
},
data() {
return {
// 搜索按钮样式
btnStyle: {
width: "60px",
height: "40px",
},
pop_type: "", // del 删除成员 out 成员退出
pop_title: "标题",
pop_isShow: false,
pop_tipsText: "",
// 日期选择
setTime: ["", ""],
// 日期搜索回调
params: {
startTime: "",
endTime: "",
title: "",
},
// 默认页码行数
table_page: {
pageindex: 1,
rowcount: 10,
},
table_columns: [
{
title: "会议主题",
dataIndex: "theme",
ellipsis: true,
key: "theme",
},
{
title: "会议id",
dataIndex: "confid",
ellipsis: true,
key: "confid",
},
{
title: "会议开始时间",
dataIndex: "starttime",
ellipsis: true,
key: "starttime",
}
],
table_total: 0,
table_nowData: [], // 列表展示数据
};
},
computed: {
Loading() {
return (
this.$store.getters.getLoading(
this.apiUrl.meeting.meetingRecord
) || false
);
},
},
created() {
},
mounted(){
this.query_recordList()
},
methods: {
// 查询会议录制列表
query_recordList(type){
if(type === 'search'){
if(this.params.searchparam.trim().length > 1){
this.table_page.pageindex = 1
} else {
return;
}
}
let params = {
...this.table_page,
...this.params,
btime: '2019-06-22 10:10:10',
etime: '2021-06-22 10:10:10'
}
API.getRecordList(params).then(res=>{
if(res.result === 0){
this.tableFn_showData(res)
}
})
},
// table-当前展示数据 处理当前需要展示的列表，直接去当前页面与条数的数据
tableFn_showData(res) {
this.table_total = res.totalelements;
this.table_nowData = res.data;
},
// table-页码变化 页码变化回调
tableFn_pageFun(pageindex, rowcount) {
this.table_page = {
pageindex,
rowcount
}
this.query_recordList()
},
// 点击单行查看数据按钮
tableFn_singleClick(record) {
this.singleData = record;
console.log("点击单行查看数据", this.singleData);
},
// 处理按钮点击事件
tableFn_handleOperation(type, data) {
this.pop_type = type;
switch (type) {
// 刷新
case 'refresh':
this.table_page.pageindex = 1;
this.query_recordList()
break;
}
},
// 操作回调
tabelFn_operationCallback() {
this.pop_isShow = false;
},
// 获取日期value
getTime(val) {
this.params.startTime = val.statrTime;
this.params.endTime = val.endTime;
},
// 获取搜索内容
getSearch() {
console.log("搜索按钮");
},
// 弹窗
pop_showModal(val) {
this.pop_isShow = val;
},
pop_handleOk() {
switch (this.pop_type) {
case "del": // 删除群成员
this.api_deletePersonal();
break;
case "add": // 编辑群成员备注信息
this.$refs.editMember.handleValidate();
break;
case "edit": // 编辑群成员备注信息
this.$refs.editMember.handleValidate();
break;
}
},
},
};
</script>
<style lang="less" scoped>
.query_box {
display: flex;
justify-content: flex-start;
border: none;
padding-left: 32px;
margin-top: 20px;
margin-bottom: 12px;
box-sizing: border-box;
.search_input {
margin: 0 16px;
}
}
.tableTop_opreation_box{
padding: 12px 0 12px 32px;
}
</style>
扫一扫
7494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
