oms/src/views/audit/Information/index.vue

<template>
	<div>
		<div class="information" v-show="isShow==='home'" key="item">
			<div v-show="isShow==='home'" key="item">
				<el-descriptions title="企业信息" :column="3" border>
					<template slot="extra">
						<el-button type="primary" size="small" @click="openEdit">编辑</el-button>
					</template>
					<el-descriptions-item label="机构名称">{{baseInfo.name?baseInfo.name:'-'}}</el-descriptions-item>
					<el-descriptions-item label="机构代码">{{baseInfo.organizationCode?baseInfo.organizationCode:'-'}}</el-descriptions-item>
					<el-descriptions-item label="机构负责人">{{baseInfo.contacts?baseInfo.contacts:'-'}}</el-descriptions-item>
					<el-descriptions-item label="机构分类名称">{{baseInfo.categoryName?baseInfo.categoryName:'-'}}</el-descriptions-item>
					<el-descriptions-item label="财务系统类型">{{baseInfo.financeType&&baseInfo.financeType=='kingdee'?'金蝶K3':'-'}}</el-descriptions-item>
					<el-descriptions-item label="金媒集成用户名称">{{baseInfo.k3UserName?baseInfo.k3UserName:'-'}}</el-descriptions-item>
					<el-descriptions-item label="金蝶系统登录授权的应用ID" span="3">{{baseInfo.k3AppId?baseInfo.k3AppId:'-'}}</el-descriptions-item>
					<el-descriptions-item label="金蝶数据中心ID" span="3">{{baseInfo.k3AcctId?baseInfo.k3AcctId:'-'}}</el-descriptions-item>
					<el-descriptions-item label="金蝶系统登录授权的应用秘钥" span="3">{{baseInfo.k3AppSec?baseInfo.k3AppSec:'-'}}</el-descriptions-item>
					<el-descriptions-item label="金蝶服务Url地址" span="3">{{baseInfo.k3ServerUrl?baseInfo.k3ServerUrl:'-'}}</el-descriptions-item>
					<el-descriptions-item label="联系电话">{{baseInfo.phonenum?baseInfo.phonenum:'-'}}</el-descriptions-item>
					<el-descriptions-item label="手机号码">{{baseInfo.telephone?baseInfo.telephone:'-'}}</el-descriptions-item>
					<el-descriptions-item label="电子邮箱">{{baseInfo.email?baseInfo.email:'-'}}</el-descriptions-item>
					<el-descriptions-item label="邮编">{{baseInfo.postcode?baseInfo.postcode:'-'}}</el-descriptions-item>
					<el-descriptions-item label="纳税人识别号">{{baseInfo.taxnum?baseInfo.taxnum:'-'}}</el-descriptions-item>
					<el-descriptions-item label="状态">
						<el-tag :type="baseInfo.status===0?'primary':'danger'" disable-transitions>
							{{baseInfo.status===0?'正常':'禁用'}}
						</el-tag>
					</el-descriptions-item>
					<el-descriptions-item label="联系地址" span="3">{{baseInfo.province?baseInfo.province+baseInfo.province+baseInfo.city+baseInfo.region+baseInfo.street+baseInfo.address:'-'}}</el-descriptions-item>
					<el-descriptions-item label="备注" span="3">{{baseInfo.remark?baseInfo.remark:'-'}}</el-descriptions-item>
				</el-descriptions>
			</div>
			
		</div>
		<div class="my-container" v-show="isShow==='add'" key="item2">
			<!-- 新增/编辑弹窗 -->
			<div class="detil">
				<by-tool :propConfig="toolConfig" @clickHandle="insideTools" ref="byTool" />
				<div class="box-shadow">
					<by-form :propConfig="addConfig" ref="addFormId">
						<template v-slot:k3ServerUrl="{value}" class="clearfix">
							<!-- <i class="el-icon-question" title="私有云必须配置金蝶云星空产品地址,K3Cloud/结尾,若为公有云则必须置空"></i> -->
							<!-- <vxe-input v-model="value.k3ServerUrl" style="width:calc(100% - 25px);margin-left: 10px;"></vxe-input> -->						
							<vxe-input v-model="value.k3ServerUrl" style="width: 27.2%;"></vxe-input>
							<div style="display: inline-block;margin-left: 17px;color: #ababab;">
								<span style="color: red;margin-right: 5px;">*</span>私有云必须配置金蝶云星空产品地址,K3Cloud/结尾,若为公有云则必须置空
							</div>
						</template>
						<template v-slot:status class="clearfix">
							<el-radio class="fl" style="margin-top: 8px;" v-model="radio" :label="0">正常</el-radio>
							<el-radio class="fl" style="margin-top: 8px;" v-model="radio" :label="1">禁用</el-radio>
						</template>
					</by-form>
				</div>
			</div>
		</div>
	</div>
	
</template>

<script lang="ts">
	import { Component, Vue } from "vue-property-decorator";
	import api from "@/api/currency";
	@Component
	export default class Information extends Vue {
		baseInfo : any = {}
		isShow = 'home'
		radio : any = 0
		popTitle : any = ''
		dialogFormVisible : boolean = false
		toolConfig = {
			tools: {
				return: true,
				save: true,
			}
		}
		addConfig = {
			attr: {
				size: 'medium',
				rules: {
					categoryName: [{
						required: true, message: '请选择机构分类', trigger: 'change'
					}],
					name: [{
						required: true, message: '请输入名称', trigger: 'blur'
					}],
					organizationCode: [{
						required: true, message: '请输入机构代码', trigger: 'blur'
					}],
					contacts: [{
						required: true, message: '请输入负责人', trigger: 'blur'
					}],
					telephone: [{
						required: true, message: '请输入手机号码', trigger: 'blur'
					}],
					// phonenum: [{
					// 	required: true, message: '请输入联系电话', trigger: 'blur'
					// }],
					financeType: [{
						required: true, message: '请输入财务系统类型', trigger: 'change'
					}],
					province: [{
						required: true, message: '请选择地址', trigger: 'change'
					}],
					address: [{
						required: true, message: '请输入详细地址', trigger: 'blur'
					}],
				}
			},
			columns: [
				[
					{
						span: 6,
						label: '机构分类',
						prop: 'categoryName',
						component: 'select-tree',
						compConfig: {
							attr: {
								label: 'name',
								clearable: true,
								retConfig: {
									categoryId: 'id',
									categoryName: 'name',
								},
								defaultExpandAll: true
							},
							request: {
								url: '/maindata/maindataOrganizationCategory/treeUseList'
							}
						}
					},
					{
						span: 6,
						label: '名称',
						prop: 'name',
						component: 'by-input',
					},
					{
						span: 6,
						label: '机构代码',
						prop: 'organizationCode',
						component: 'by-input',
					},
					{
						span: 6,
						label: '负责人',
						prop: 'contacts',
						component: 'by-input',
					},
					{
						span: 6,
						label: '手机号码',
						prop: 'telephone',
						component: 'by-input',
					},
					{
						span: 6,
						label: '联系电话',
						prop: 'phonenum',
						component: 'by-input',
					},
					{
						span: 6,
						label: '电子邮箱',
						prop: 'email',
						component: 'by-input',
					},
				],
				[
					{
						span: 6,
						labelWidth: '110px',
						label: '财务系统类型',
						prop: 'financeType',
						component: 'by-select',
						compConfig: {
							attr: {
								placeholder: '请选择财务系统类型',
								clearable: true,
								size: 'small',
								data: [
									{
										value: 'kingdee',
										label: '金蝶K3'
									},
									// {
									// 	value: 'yonbip',
									// 	label: '用友U8'
									// },
								]
							}
						}
					},
				],
				[
					{
						span: 18,
						label: 'URL地址',
						slot: true,
						prop: 'k3ServerUrl',
					},
				],
				[
					{
						span: 6,
						label: '登录授权ID',
						slot: true,
						prop: 'k3AppId',
						component: 'by-input',
					},
					{
						span: 6,
						label: '用户名称',
						slot: true,
						prop: 'k3UserName',
						component: 'by-input',
					},
					{
						span: 6,
						label: '数据中心ID',
						slot: true,
						prop: 'k3AcctId',
						component: 'by-input',
					},
					{
						span: 6,
						label: '应用秘钥',
						slot: true,
						prop: 'k3AppSec',
						component: 'by-input',
					},
					{
						span: 6,
						label: '纳税人识别号',
						slot: true,
						prop: 'txNum',
						component: 'by-input',
					},
				],
				
				[{
					span: 18,
					label: '地址',
					prop: 'province',
					component: 'by-area',
					labelWidth: '100px',
					compConfig: {
						attr: {
							province: 'province', //省
							provinceCode: 'provinceCode', //省编码
							city: 'city',   //市
							cityCode: 'cityCode',  //市编码
							county: 'region',  //县/区
							countyCode: 'regionCode',   //县/区编码
							town: 'street', //街道
							townCode: 'streetCode', //街道编码
						}
					}
				}],
				[
					{
						span: 18,
						label: '详细地址',
						slot: true,
						prop: 'address',
						component: 'by-input',
					},
				],
				// [
				// 	{
				// 		span: 6,
				// 		label: '状态',
				// 		slot: true,
				// 		prop: 'status',
				// 	},
				// ]
			]
		}
		created() {
			// 生产厂商
			this.getRequest('/maindata/maindataMaterialManufacturer/page');
			// 供应商
			// this.getRequest('/maindata/maindataMaterialSupplier/page');
			// 分销商
			// this.getRequest('/maindata/maindataMaterialDistributor/page');
		}
		getRequest(url : any) {
			let loading = this.$loading({ target: '.main-container' });
			(this as any).$request({
				url: url,
				method: 'get'
			}).then((res : any) => {
				// console.log(res);
				if (res.code === 200) {
					this.baseInfo = res.data.records[0];
					loading.close();
				}
			}).catch(() => {});
		}
		openEdit(e : any) {
			console.log('打开编辑 ==> ', e);
			this.isShow = 'add'; // 展示类型
			this.popTitle = '编辑'
			let loading = this.$loading({ target: '.main-container' });
			api.single({ id: this.baseInfo.id }, 'maindataMaterialManufacturer').then((res : any) => {
				if (res.code === 200) {
					let data = res.data;
					this.radio = data.status;
					this.dialogFormVisible = true;
					this.$nextTick(() => (this as any).$refs.addFormId.setValue(data));
					loading.close();
				} else loading.close();
			}).catch(() => loading.close());
		}
		// 内页工具栏方法
		insideTools(e : any) {
			console.log(e);
			if (e === 'onReturn') this.isShow = 'home';
			if (e === 'onSave') this.confirm();
		}
		// 保存新增/编辑
		confirm() {
			(this as any).$refs.addFormId.validate().then(() => {
				let query = (this as any).$refs.addFormId.getValue();
				query.status = this.radio;
				query.accountId = this.$store.getters.userInfo.userId;
				// 手机验证
				let reg = /^1[3456789]\d{9}$/;
				// let reg2 = /^0\d{2,3}-\d{7,8}$/;
				if (query.telephone && !reg.test(query.telephone)) return this.$message.warning('请输入正确手机号码');
				// if (query.phonenum && !reg2.test(query.phonenum)) return this.$message.warning('请输入正确联系电话');
				if(query.phonenum){
					if (query.phonenum.length>20 || query.phonenum[0]==' ') {
						return this.$message.warning('请输入正确联系电话');
					}
				}
				if (!query.telephone) query.telephone = null;
				if (!query.phonenum) query.phonenum = null;
				this.dialogFormVisible = false;
				console.log(query);
				let loading = this.$loading({ target: '.main-container' });
				api.updateList(query, 'maindataMaterialManufacturer').then((res : any) => {
					loading.close();
					if (res.code === 200) {
						this.$message.success('编辑成功');
						this.getRequest('/maindata/maindataMaterialManufacturer/page');
						this.isShow = 'home'; // 展示类型
					} else this.$message.error(res.msg);
				}).catch(() => loading.close());
		
			}).catch(() => {});
		}
	}
</script>

<style lang="scss" scoped>
	.information {
		width: 1200px;
		min-width: 1200px;
		margin: 100px auto 0;
	}

	.field-box {
		width: 33.3%;
		float: left;
		margin-bottom: 60px;
	}

	.left-field {
		float: left;
		width: 120px;
		text-align: right;
		line-height: 43px;
		color: #333;
		// word-wrap: break-word; // 换行
	}

	.right-field {
		float: left;
		width: calc(100% - 150px);
		color: #333;
		height: 42px;
		line-height: 42px;
		border-bottom: 1px solid #ddd;
	}
	.my-container {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		padding: 16px;
		height: 100%;
	
		.bill-left {
			position: relative;
			border-right: solid #EEE 1px;
			padding-right: 16px;
			flex-shrink: 0;
	
			.bill-tab {
				width: 150px;
				height: 100%;
				transition: all .5s;
				overflow: hidden;
			}
	
			.tab-title {
				font-size: 16px;
				padding-bottom: 16px;
				width: 200px;
			}
		}
	
		.bill-main {
			width: calc(100% - 16px);
			box-sizing: border-box;
			margin-left: 16px;
			position: relative;
			height: 100%;
			overflow-y: hidden;
		}
	
		.detil {
			width: 100%;
	
			.box-shadow {
				box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
				padding: 20px;
				border-radius: 4px;
				border: 1px solid #e6ebf5;
				background-color: #fff;
				overflow: hidden;
				color: #303133;
				-webkit-transition: .3s;
				transition: .3s;
				margin-top: 20px;
			}
		}
	}
</style>