190 lines
		
	
	
		
			3.8 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			190 lines
		
	
	
		
			3.8 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
<template>
 | 
						|
	<div class="app-container">
 | 
						|
		<search-bar
 | 
						|
			:formConfigs="formConfig"
 | 
						|
			ref="searchBarForm"
 | 
						|
			@headBtnClick="buttonClick" />
 | 
						|
		<base-table
 | 
						|
			v-loading="dataListLoading"
 | 
						|
			:table-props="tableProps"
 | 
						|
			:page="listQuery.pageNo"
 | 
						|
			:limit="listQuery.pageSize"
 | 
						|
			:table-data="tableData">
 | 
						|
			<method-btn
 | 
						|
				v-if="tableBtn.length"
 | 
						|
				slot="handleBtn"
 | 
						|
				:width="120"
 | 
						|
				label="操作"
 | 
						|
				:method-list="tableBtn"
 | 
						|
				@clickBtn="handleClick" />
 | 
						|
		</base-table>
 | 
						|
		<pagination
 | 
						|
			:limit.sync="listQuery.pageSize"
 | 
						|
			:page.sync="listQuery.pageNo"
 | 
						|
			:total="listQuery.total"
 | 
						|
			@pagination="getDataList" />
 | 
						|
		<base-dialog
 | 
						|
			:dialogTitle="addOrEditTitle"
 | 
						|
			:dialogVisible="addOrUpdateVisible"
 | 
						|
			@cancel="handleCancel"
 | 
						|
			@confirm="handleConfirm"
 | 
						|
			:before-close="handleCancel"
 | 
						|
			width="50%">
 | 
						|
			<add-or-update
 | 
						|
				ref="addOrUpdate"
 | 
						|
				@refreshDataList="successSubmit"></add-or-update>
 | 
						|
		</base-dialog>
 | 
						|
	</div>
 | 
						|
</template>
 | 
						|
 | 
						|
<script>
 | 
						|
import AddOrUpdate from './add-or-updata';
 | 
						|
import basicPage from '../../core/mixins/basic-page';
 | 
						|
import { parseTime } from '../../core/mixins/code-filter';
 | 
						|
import {
 | 
						|
	getCustomerPage,
 | 
						|
	deleteCustomer
 | 
						|
} from '@/api/base/coreCustomer';
 | 
						|
 | 
						|
const tableProps = [
 | 
						|
	{
 | 
						|
		prop: 'createTime',
 | 
						|
		label: '添加时间',
 | 
						|
		filter: parseTime
 | 
						|
	},
 | 
						|
	{
 | 
						|
		prop: 'name',
 | 
						|
		label: '客户名称'
 | 
						|
	},
 | 
						|
	{
 | 
						|
		prop: 'code',
 | 
						|
		label: '客户编码'
 | 
						|
	},
 | 
						|
	{
 | 
						|
		prop: 'contact',
 | 
						|
		label: '联系人'
 | 
						|
	},
 | 
						|
	{
 | 
						|
		prop: 'telephone',
 | 
						|
		label: '联系电话'
 | 
						|
	},
 | 
						|
	{
 | 
						|
		prop: 'address',
 | 
						|
		label: '地址'
 | 
						|
	},
 | 
						|
	{
 | 
						|
		prop: 'remark',
 | 
						|
		label: '备注'
 | 
						|
	},
 | 
						|
];
 | 
						|
 | 
						|
export default {
 | 
						|
	mixins: [basicPage],
 | 
						|
	data() {
 | 
						|
		return {
 | 
						|
			urlOptions: {
 | 
						|
				getDataListURL: getCustomerPage,
 | 
						|
				deleteURL: deleteCustomer
 | 
						|
			},
 | 
						|
			tableProps,
 | 
						|
			tableBtn: [
 | 
						|
				this.$auth.hasPermi(`base:core-customer:detail`)
 | 
						|
					? {
 | 
						|
							type: 'detail',
 | 
						|
							btnName: '详情',
 | 
						|
					  }
 | 
						|
					: undefined,
 | 
						|
				this.$auth.hasPermi(`base:core-customer:update`)
 | 
						|
					? {
 | 
						|
							type: 'edit',
 | 
						|
							btnName: '编辑',
 | 
						|
					  }
 | 
						|
					: undefined,
 | 
						|
        this.$auth.hasPermi(`base:core-customer:delete`)
 | 
						|
					? {
 | 
						|
							type: 'delete',
 | 
						|
							btnName: '删除',
 | 
						|
					  }
 | 
						|
					: undefined,
 | 
						|
			].filter((v)=>v),
 | 
						|
			tableData: [],
 | 
						|
			formConfig: [
 | 
						|
				{
 | 
						|
					type: 'input',
 | 
						|
					label: '客户名称',
 | 
						|
					placeholder: '客户名称',
 | 
						|
					param: 'name',
 | 
						|
				},
 | 
						|
				{
 | 
						|
					type: 'button',
 | 
						|
					btnName: '查询',
 | 
						|
					name: 'search',
 | 
						|
					color: 'primary',
 | 
						|
				},
 | 
						|
				{
 | 
						|
					type: 'separate',
 | 
						|
				},
 | 
						|
				{
 | 
						|
					type: this.$auth.hasPermi('base:core-customer:create') ? 'button' : '',
 | 
						|
					btnName: '新增',
 | 
						|
					name: 'add',
 | 
						|
					color: 'success',
 | 
						|
					plain: true
 | 
						|
				},
 | 
						|
			],
 | 
						|
		};
 | 
						|
	},
 | 
						|
	components: {
 | 
						|
		AddOrUpdate,
 | 
						|
	},
 | 
						|
	created() {},
 | 
						|
	methods: {
 | 
						|
		// 获取数据列表
 | 
						|
    // getDataList() {
 | 
						|
    //   this.dataListLoading = true;
 | 
						|
    //   this.urlOptions.getDataListURL(this.listQuery).then(response => {
 | 
						|
    //     this.tableData = response.data.list;
 | 
						|
    //     this.listQuery.total = response.data.total;
 | 
						|
    //     this.dataListLoading = false;
 | 
						|
    //   });
 | 
						|
    // },
 | 
						|
		buttonClick(val) {
 | 
						|
			switch (val.btnName) {
 | 
						|
				case 'search':
 | 
						|
					this.listQuery.pageNo = 1;
 | 
						|
					this.listQuery.pageSize = 10;
 | 
						|
					this.listQuery.name = val.name ? val.name : undefined;
 | 
						|
					this.getDataList();
 | 
						|
					break;
 | 
						|
				case 'reset':
 | 
						|
					this.$refs.searchBarForm.resetForm();
 | 
						|
					this.listQuery = {
 | 
						|
						pageSize: 10,
 | 
						|
						pageNo: 1,
 | 
						|
						total: 1,
 | 
						|
					};
 | 
						|
					this.getDataList();
 | 
						|
					break;
 | 
						|
				case 'add':
 | 
						|
					this.addOrEditTitle = '新增';
 | 
						|
					this.addOrUpdateVisible = true;
 | 
						|
					this.addOrUpdateHandle();
 | 
						|
					break;
 | 
						|
				case 'export':
 | 
						|
					this.handleExport();
 | 
						|
					break;
 | 
						|
				default:
 | 
						|
					console.log(val);
 | 
						|
			}
 | 
						|
		},
 | 
						|
		otherMethods(val) {
 | 
						|
			this.addOrUpdateVisible = true;
 | 
						|
			this.addOrEditTitle = "详情";
 | 
						|
			this.$nextTick(() => {
 | 
						|
				this.$refs.addOrUpdate.init(val.data.id, true);
 | 
						|
			});
 | 
						|
		}
 | 
						|
	},
 | 
						|
};
 | 
						|
</script>
 |