1.过滤(数组子项是对象的,对象有重复的)
let arr = res.data.filter(function (item, index, self) {
return self.findIndex((el) => el['applyPerson'] == item['applyPerson']) === index;
2.一般初始化数据的浅拷贝
Object.assign(this.formQuery, newObj);
3.给数组或对象添加某一元素
this.$set(this.queryObj, ['tableId'], row.tableId);
[],//中括号中可以是健名也可以是下标index
4.假如后端返回给多个不同的值代表不同值1:‘通过’,2:'驳回',3:'等待'....,显示可以通过switch方法显示不同值
switch (row.viewUrl) {
case '1':
return '通过'
break;
case '2':
return '驳回'
break;
default:
break;
}
5.provide和 inject搭配使用,可以实现上层组件传值给下下下...组件,(格式要正确)
//上层组件传值
provide() {
//直接传递给孙组件
return {
fromObj: this.fromObj,
strategyFollowRecordsModels: () => this.strategyFollowRecordsModels,
updateIndex: () => this.strategyFollowRecordsModels,
getstrategyPeriodId: () => this.fromObj.strategyPeriodId,
};
},
//下层组件接收
inject: ['fromObj'], //得到爷爷传过来的跟进记录id',周期表.关联id
6.时间转换函数
//转换时间功能函数
formatDate(timer) {
let time = new Date(timer);
let y = time.getFullYear();
let m = time.getMonth() + 1;
let d = time.getDate();
let h = time.getHours();
let mm = time.getMinutes();
let ss = time.getSeconds();
return `${y}-${m}-${d} ${h}:${mm}:${ss}`;
},
7.限制输入框是0-100数字
//限制输入框0-100数字
onInput0_100(e) {
this.$message.closeAll();
// 验证是否是纯数字
let isNumber = /^\d*$/.test(e.target.value);
// 过滤非数字
e.target.value = e.target.value.replace(/\D/g, '');
if (!isNumber || e.target.value < 0 || e.target.value > 100) {
this.$message.warning('只能输入[0,100]区间的整数');
}
e.target.value = (e.target.value >= 0 && e.target.value <= 100 && e.target.value.match(/^\d*/g)[0]) || null;
},
8.得到数组包对象,对象中某个键名字符串形式显示
replay(flied) {
return flied.map((o) => o.empName).join(',');
},
9.echarts的使用
//1.引入echarts
// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts';
//2.给echerts一个容器
<div id="main" style="height: 400px; margin-top: 20px" class="scroll echarsmain"></div>
//3.渲染echarts的方法
drawLine(id, opinionData) {
this.charts = echarts.init(document.getElementById(id));
this.charts.setOption({
tooltip: {
trigger: 'axis',
},
...
}
//4.mounted里挂载一下
mounted(){
this.drawLine('main');
}
10.取两数组的不同值,差值,(实际应用在table选择)
// 表格全选
selectionChangeAll(selection) {
// 获取当前数组的差集
let differenceSet = [];
// 记录的选中值
let selectedArray = [];
//求2个数组的差值数组
let selectedIds = this.selected.map(item => item.id);
differenceSet = selection.filter(item => !selectedIds.includes(item.id));
if (differenceSet.length > 0) { // 如果有差值,则进行添加操作
this.selected.push(...differenceSet);
} else {
this.selected.forEach((selectedItem, selectedIndex) => {
selection.forEach((tableItem, tableIndex) => {
if (selectedItem.id == tableItem.id) {
selectedArray.push(selectedItem);
}
})
})
this.selected = selectedArray;
}
},
11.树过滤
//树过滤
groupFilterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
//label是树节点字段名
12.树数据转换
13.表单校验整数部分最多六位、小数最多两位
14.数组去重的另一种方法
15,利用newSet得数组的并集,交集,差集
16.可用的选人组件
<template>
<el-dialog
class="app-container"
:title="title"
:visible="dialogVisible"
:before-close="close"
:close-on-click-modal="false"
v-setDialog="{ calc: innerFlag ? `calc(100vh - 450px)` : `calc(100vh - 270px)` }"
fullscreen
:modal="false"
>
<comm-headert :more="false" :showCount="false" :calculate="false">
<el-row slot="query">
<el-col style="display: flex">
<el-select v-if="!companyNo" v-model="queryParam.companyNo" placeholder="所属公司" size="small" @change="handleChangeCompany" clearable>
<el-option v-for="(item, index) in companyList" :key="index" :label="item.companyName" :value="item.companyNo"></el-option>
</el-select>
<select-tree
v-model="queryParam.departNo"
:nodes="departList"
node-key="id"
label="departName"
placeholder="请选择部门"
@input="handleInputDepart"
size="small"
></select-tree>
<el-input v-model="queryParam.empNo" placeholder="工号" clearable></el-input>
<el-input v-model="queryParam.empName" placeholder="员工名称" clearable></el-input>
<el-button type="primary" @click="handleSearch(1)">查询</el-button>
<el-button @click="handleReset">重置</el-button>
</el-col>
</el-row>
</comm-headert>
<comm-table>
<div slot="table" style="display: flex; justify-content: space-between">
<lb-table
ref="baseTbl"
style="width: 60%"
:data="tableData"
:column="tableColumn"
:page="pagination.page"
:limit="pagination.limit"
:total="pagination.total"
:height="$store.getters['tableHeight/tableHeight'](90)"
:header-cell-class-name="selectMultiply ? '' : 'table-disable'"
@changePagination="handleChangePagination"
@selection-change="handleSelectionChange"
pagination
border
stripe
/>
<div style="width: 39%">
<div style="margin-bottom: 6px; font-size: 16px; font-weight: bold">选中用户</div>
<lb-table :data="selectedTableData" :column="selectedTableColumn" :height="$store.getters['tableHeight/tableHeight'](112)" border stripe />
</div>
</div>
</comm-table>
<div slot="footer" class="dialog-footer">
<el-button @click="close" size="small">取消</el-button>
<el-button type="primary" @click="handleSave" size="small">确定</el-button>
</div>
</el-dialog>
</template>
<script>
import company from '@/api/org/company';
import depart from '@/api/org/depart';
import emp from '@/api/org/emp';
import user from '@/api/sys/user';
import SelectTree from '@/component/selectTree';
import { Message } from 'element-ui';
export default {
name: 'SelectEmployee',
components: {
SelectTree,
},
props: {
selectMultiply: {
type: Boolean,
default: () => true,
},
isUser: {
type: Boolean,
default: () => false,
},
selectPersonData: {
type: [Array, Object],
default: () => [],
},
innerFlag: {
type: Boolean,
default: () => false,
},
},
data() {
return {
title: '选择组织用户',
dialogVisible: false,
queryParam: {
companyNo: null,
departNo: null,
empNo: null,
empName: null,
incumbency: true,
accessory: null,
},
tableColumn: [
{ type: 'selection', align: 'center', width: '50' },
{ prop: 'empNo', label: '工号', align: 'center' },
{ prop: 'empName', label: '员工名称', align: 'center' },
{ prop: 'departName', label: '部门名称', align: 'center', width: 400 },
{ prop: 'companyName', label: '公司名称', align: 'center' },
],
tableData: [],
selectedTableColumn: [
{ prop: 'empNo', label: '工号', align: 'center' },
{ prop: 'empName', label: '员工名称', align: 'center' },
{
label: '操作',
align: 'center',
width: 300,
render: (h, scope) => {
return [
<el-button size="mini" className="h24" type="danger" onClick={() => this.handleDeleteSelected(scope.row, scope.$index)}>
删除
</el-button>,
];
},
},
],
selectedTableData: [],
pagination: {
page: 1,
limit: 10,
total: 0,
},
companyList: [],
departList: [],
companyNo: null,
};
},
methods: {
show(accessory) {
// session判断
let userInfo = this.getUserInfo();
this.accessory = accessory;
if (userInfo && userInfo.companyNo) {
this.companyNo = userInfo.companyNo;
this.queryParam.companyNo = this.companyNo;
this.handleSearchDepart();
}
if (!this.companyNo && !this.companyList.length) {
this.handleSearchCompany();
}
this.dialogVisible = true;
this.handleSearch();
},
showEcho(data) {
let userInfo = this.getUserInfo();
if (userInfo && userInfo.companyNo) {
this.companyNo = userInfo.companyNo;
this.queryParam.companyNo = this.companyNo;
this.handleSearchDepart();
}
if (!this.companyNo && !this.companyList.length) {
this.handleSearchCompany();
}
this.dialogVisible = true;
this.selectedTableData = JSON.parse(JSON.stringify(data));
this.handleSearch();
},
close() {
this.queryParam = {
companyNo: null,
departNo: null,
empNo: null,
empName: null,
incumbency: true,
};
this.dialogVisible = false;
this.selectedTableData = [];
this.$refs.baseTbl?.clearSelection();
this.$emit('close');
},
handleSearch(page) {
let params = {
pageNum: page || this.pagination.page,
pageSize: this.pagination.limit,
companyNo: this.queryParam.companyNo,
departNo: this.queryParam.departNo,
empNo: this.queryParam.empNo,
empName: this.queryParam.empName,
incumbency: this.queryParam.incumbency,
};
let searchFun = this.isUser ? user.pageUserEmp : emp.pageEmp;
searchFun(params).then((res) => {
// console.log('searchFun', res);
if (res.code === 200) {
if (res.data && res.data.list) {
this.tableData = res.data.list;
this.pagination.page = res.data.pageNum;
this.pagination.total = res.data.total;
} else {
this.tableData = [];
this.pagination.page = 1;
this.pagination.total = 0;
}
}
});
},
handleSearchCompany() {
company.listCompany().then((res) => {
if (res.code === 200) {
this.companyList = res.data || [];
}
});
},
handleSearchDepart() {
if (!this.queryParam.companyNo) {
return;
}
depart.treeDepart(this.queryParam.companyNo).then((res) => {
if (res.code === 200) {
this.departList = res.data || [];
}
});
},
handleChangeCompany() {
this.handleSearchDepart();
},
handleInputDepart(val) {
this.queryParam.departNo = val;
},
handleReset() {
this.queryParam = {
companyNo: null,
departNo: null,
empNo: null,
empName: null,
incumbency: true,
};
},
handleChangePagination(pagination) {
if (this.pagination.page === pagination.page && this.pagination.limit !== pagination.limit) {
this.pagination.limit = pagination.limit;
this.handleSearch(1);
} else if (this.pagination.limit === pagination.limit && this.pagination.page !== pagination.page) {
this.pagination.page = pagination.page;
this.handleSearch();
}
},
handleSelectionChange(selection) {
if (!selection.length) return;
this.selectedTableData = selection;
return;
// 多选
if (this.selectMultiply) {
this.selectedTableData.push.apply(
this.selectedTableData,
selection.filter((o) => this.selectedTableData.filter((s) => s.id === o.id).length === 0)
);
return;
}
// 单选
if (selection.length > 1) {
this.$refs.baseTbl.toggleRowSelection(selection[0], false);
return;
}
this.selectedTableData = [selection[0]];
},
handleDeleteSelected(row, index) {
this.selectedTableData.splice(index, 1);
// 删除左表已选中状态
this.$refs.baseTbl.toggleRowSelection(row, false);
},
handleSave() {
if (!this.selectedTableData.length) {
Message.warning('未选择用户');
return;
}
this.$emit('selectChange', this.selectedTableData, this.accessory);
this.close();
},
},
};
</script>
<style lang="scss" scoped>
::v-deep .el-table__header-wrapper .table-disable .el-checkbox {
display: none;
}
::v-deep .el-dialog__wrapper {
background: transparent;
}
</style>