项目中好用的方法

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>