企业档案优化

src/views/audit/Information/index.vue

@@ -1,79 +1,269 @@
 <template>
-	<div class="information">
-		<div class="clearfix">
-			<div class="field-box">
-				<div class="left-field">机构名称：</div>
-				<div class="right-field">{{baseInfo.name}}</div>
+	<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="状态">
+						<el-tag :type="baseInfo.status===0?'primary':'danger'" disable-transitions>
+							{{baseInfo.status===0?'正常':'禁用'}}
+						</el-tag>
+					</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="联系地址" 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 class="field-box">
-				<div class="left-field">机构负责人：</div>
-				<div class="right-field">{{baseInfo.contacts}}</div>
-			</div>
-			<!-- 			<div class="field-box">
-				<div class="left-field">供应商id：</div>
-				<div class="right-field">{{baseInfo.id}}</div>
-			</div> -->
-			<!-- <div class="field-box">
-				<div class="left-field">分销商id：</div>
-				<div class="right-field">{{baseInfo.id}}</div>
-			</div> -->
-			<div class="field-box">
-				<div class="left-field">联系电话：</div>
-				<div class="right-field">{{baseInfo.phonenum}}</div>
-			</div>
-			<div class="field-box">
-				<div class="left-field">手机号码：</div>
-				<div class="right-field">{{baseInfo.telephone}}</div>
-			</div>
-			<div class="field-box">
-				<div class="left-field">电子邮箱：</div>
-				<div class="right-field">{{baseInfo.email}}</div>
-			</div>
-<!-- 			<div class="field-box">
-				<div class="left-field">类型(字典)：</div>
-				<div class="right-field">{{baseInfo.type}}</div>
-			</div> -->
-			<div class="field-box">
-				<div class="left-field">状态：</div>
-				<div class="right-field" style="padding: 0 10px 10px;">
-					<el-tag :type="baseInfo.status===0?'primary':'danger'"
-						disable-transitions>{{baseInfo.status===0?'正常':'禁用'}}</el-tag>
+			
+		</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 class="field-box">
-				<div class="left-field">邮编：</div>
-				<div class="right-field">{{baseInfo.postcode}}</div>
-			</div>
-			<div class="field-box">
-				<div class="left-field">联系地址：</div>
-				<div class="right-field">{{baseInfo.address}}</div>
-			</div>
-			<div class="field-box">
-				<div class="left-field">纳税人识别号：</div>
-				<div class="right-field">{{baseInfo.taxnum}}</div>
-			</div>
-		</div>
-		<div class="field-box" style="width: 100%;">
-			<div class="left-field">备注：</div>
-			<div class="right-field">{{baseInfo.remark}}</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'
+					}],
+					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: 'contacts',
+						component: 'by-input',
+					},
+					{
+						span: 6,
+						label: '手机号码',
+						prop: 'telephone',
+						component: 'by-input',
+					},
+					{
+						span: 6,
+						label: '联系电话',
+						prop: 'phonenum',
+						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: 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/maindataMaterialManufacturer/page');
 			// 供应商
-			this.getRequest('/maindata/maindataMaterialSupplier/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'
@@ -81,10 +271,63 @@
 				// console.log(res);
 				if (res.code === 200) {
 					this.baseInfo = res.data.records[0];
-					console.log(this.baseInfo);
+					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>
 
@@ -118,4 +361,57 @@
 		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>