epmet-oper-pc-chengyang/epmet-oper-web/src/views/modules/customer/manage/CustomerList.vue

<template>
	<div class="registerList">
		<el-card shadow="never" class="aui-card--fill">
			<div class="mod-demo__demo}">
				<el-form :inline="true" :model="tableParams" @keyup.enter.native="loadData()">
					<el-form-item><el-input v-model="tableParams.customerName" placeholder="客户名称"></el-input></el-form-item>

					<el-form-item><el-button @click="loadData()">查询</el-button></el-form-item>
					<el-form-item>
						<el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
					</el-form-item>
					<el-form-item><el-button type="danger" @click="del('')">删除</el-button></el-form-item>
				</el-form>

				<c-table
					column-type="selection"
					ref="table"
					:url="tableUrl"
					:params="tableParams"
					keyword="CustomerList"
					:operations="operations"
					:tableHeight="tableHeight"
					:operationWidth="80"
					@config="config"
					@edit="edit"
					@init="init"
					@del="del"
					@select="select"
				></c-table>
				<!-- 弹窗, 新增 / 修改 -->
				<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
			</div>
		</el-card>
		<edit-form ref="ref_edit_form" @refresh="loadData"></edit-form>
		<config-form ref="ref_config_form" @refresh="loadData"></config-form>
	</div>
</template>

<script>
import CTable from '@c/CTable';
import EditForm from './EditForm';
import ConfigForm from './ConfigForm';
import { mapGetters } from 'vuex';
import { Loading } from 'element-ui'; // 引入Loading服务
import AddOrUpdate from './customer-add-or-update.vue';
import mixinViewModule from '@/mixins/view-module';

let loading; // 加载动画
export default {
	mixins: [mixinViewModule],
	data() {
		return {
			// 列表相关
			tableUrl: '/oper/crm/customer/customerlist',
			// tableUrl: 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/crm/customer/customerlist',
			tableParams: {
				customerName: ''
			},
			// 列表操作栏的操作项数组
			operations: [
				{
					lable: '修改', // 按钮显示名称
					size: 'mini',
					style: 'margin: 0 6px;',
					type: 'text',
					slot: '',
					plain: false,
					methodName: 'edit', // 回调方法名称
					isShow: row => {
						return true;
					}
				},
				{
					lable: '配置', // 按钮显示名称
					size: 'mini',
					style: 'margin: 0 6px;',
					type: 'text',
					slot: '',
					plain: false,
					methodName: 'config', // 回调方法名称
					isShow: row => {
						return true;
					}
				},
				{
					lable: '数字社区初始化', // 按钮显示名称
					size: 'mini',
					style: 'margin: 0 6px;',
					type: 'text',
					slot: '',
					plain: false,
					methodName: 'init', // 回调方法名称
					isShow: row => {
						return true;
					}
				},
				{
					lable: '删除', // 按钮显示名称
					size: 'mini',
					style: 'margin: 0 6px;',
					type: 'text',
					slot: '',
					plain: false,
					methodName: 'del', // 回调方法名称
					isShow: row => {
						return true;
					}
				}
			],

			// 列表数据
			tableData: [],
			addOrUpdateVisible: false, // 新增／更新，弹窗visible状态
			multipleSelection: []
		};
	},
	components: {
		CTable,
		EditForm,
		ConfigForm,
		AddOrUpdate
	},
	activated() {
		this.$nextTick(() => {
			this.$refs.table.doLayout(); // 解决表格错位
		});
	},
	mounted() {
		// eslint-disable-next-line
		console.log(this);
		this.loadData();
	},
	computed: {
		tableHeight() {
			return this.clientHeight - 60 - 80 - 80 - 70;
		},
		...mapGetters(['clientHeight', 'env'])
	},
	methods: {
		select(row) {
			this.multipleSelection = row.map(item => {
				return item.customerId;
			});
			console.log(this.multipleSelection);
		},
		// 获取列表数据
		loadData() {
			this.$refs.table.loadData();
		},
		// 修改
		edit(row) {
			this.$refs['ref_edit_form'].initData(row);
		},

		// 初始化
		init(row) {
			let params = {
				customerId: row.customerId,
				areaCode: row.rootAgencyAreaCode
			};

			this.$http.get(`/oper/customize/icform/initCustomerForm/resi_base_info/`, { params: params }).then(({ data: res }) => {
				if (res.code === 0) {
					return this.$message.info(res.data);
				} else {
					return this.$message.error(res.internalMsg);
				}
			});
		},

		del(row) {
			console.log('this.multipleSelection', row);
			let ids = [];

			if (row != '') {
				ids = [row.customerId];
			} else {
				if (this.multipleSelection.length > 0) {
					ids = this.multipleSelection;
				} else {
					return this.$message.error('请选择菜单');
				}
			}

			let params = {
				ids: ids
			};
			this.$http.post('oper/crm/customer/delete', params).then(({ data: res }) => {
				console.log(res);
				if (res.code === 0) {
					this.$message.info(res.data);
					this.$refs.table.loadData();
				} else {
					return this.$message.error(res.internalMsg);
				}
			});
		},

		// 网格数、有效期配置
		config(row) {
			this.$refs['ref_config_form'].initData(row);
		},

		// 开启加载动画
		startLoading() {
			loading = Loading.service({
				lock: true, // 是否锁定
				text: '正在加载……', // 加载中需要显示的文字
				background: 'rgba(0,0,0,.7)' // 背景颜色
			});
		},
		// 结束加载动画
		endLoading() {
			// clearTimeout(timer);
			if (loading) {
				loading.close();
			}
		}
	}
};
</script>
<style lang="css">
.aaa {
  height: 100px;
}
/* .register .el-table .el-table__header-wrapper {
  position: absolute;
  top: 0;
  left: 0;
}*/
/*
.register .el-table .el-table__fixed-body-wrapper {
  height: calc(100% - 44px);
  margin-top: 44px;
  overflow-y: auto !important;
} */
</style>