talent_map/pc/components/company-add.vue

<template>
	<div class="content" v-show="showDialog">
		<el-dialog title="企业反馈" top="30vh" :visible.sync="showDialog" width="700px" @closed="onClosed">
			<el-form inline ref="form" :model="info" label-width="100px" :rules="rules">
				<el-form-item label="产业链：" prop="category_id">
					<!-- 产业链 -->
					<el-cascader ref="chain" v-model="info.category_id" :options="category" :props="{ expandTrigger: 'hover', value: 'id', label: 'title',emitPath: false }"
						@change="handleChainChange"></el-cascader>
				</el-form-item>
				<el-form-item label="数据类型：" prop="module">
					<el-select v-model="info.module" placeholder="请选择">
						<el-option v-for="item in moduleList" :key="item.name" :label="item.title" :value="item.name">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="企业名称：" prop="title">
					<el-input placeholder="请输入" v-model="info.title"></el-input>
				</el-form-item>
				<el-form-item label="联系人：" prop="principal">
					<el-input placeholder="请输入" v-model="info.principal"></el-input>
				</el-form-item>
				<el-form-item label="联系电话：" prop="tel">
					<el-input placeholder="请输入" v-model="info.tel"></el-input>
				</el-form-item>
				<el-form-item label="企业地址：" prop="address">
					<el-input type="textarea" placeholder="请输入" v-model="info.address" :rows="2" resize="none"></el-input>
				</el-form-item>
				<el-form-item label="企业简介：" prop="intro">
					<el-input type="textarea" placeholder="请输入" v-model="info.intro" :rows="3" resize="none">
					</el-input>
				</el-form-item>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">提交</el-button>
				<el-button @click="showDialog = false">取消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		components: {},
		props: {
			value: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				showDialog: false,
				info: {
					category_id: null,
					title: '',
					tel: '',
					address: '',
					chain: '',
					module: '',
					intro: '',
					principal: '',
				},
				showModule: false,
				moduleList: [],
				moduleTitle: '',
				moduleSelect: [0],
				rules: {
					category_id: [{
						required: true,
						message: "请选择产业链",
						trigger: "change",
					}, ],
					title: [{
						required: true,
						message: "请输入企业名称",
						trigger: "change",
					}, ],
					address: [{
						required: true,
						message: "请输入企业地址",
						trigger: "change",
					}, ],
					tel: [{
						required: true,
						message: "请输入联系电话",
						trigger: "change",
					}, ],
					intro: [{
						required: true,
						message: "请输入企业简介",
						trigger: "change",
					}, ],
					principal: [{
						required: true,
						message: "请输入联系人",
						trigger: "change",
					}, ],
				},
			};
		},
		created() {
			this.getModuleListFun()
		},
		methods: {
			onClosed() {
				this.$refs.form.resetFields();
			},
			handleChainChange(value) {
				let node = this.$refs.chain.getCheckedNodes(true)
				this.info.chain = node[0].label;
			},
			// 获取
			async getModuleListFun() {
				const {
					code,
					data
				} = await this.$get('/article/module',{})
				if (code == 1) {
					this.moduleList = data
					this.info.module = this.moduleList[0].name;
				}
			},
			submitForm() {
				this.$refs.form.validate(async (valid) => {
					if (valid) {
						const {
							status,
							data,
							msg
						} = await this.$post('/article', this.info);
						if (status == 1) {
							this.$message.success(msg);
							this.showDialog = false;
							this.$emit("success");
						}
					} else {
						return false;
					}
				});
			},
		},
		watch: {
			value(val) {
				this.showDialog = val;
			},
			showDialog(val) {
				this.$emit('input', val)
			},
		},
		computed: {
			...mapState(['category']),
		},
	};
</script>

<style lang="scss" scoped>
	.content {
		.el-cascader {
			width: 468px;
		}
	
		.el-textarea {
			width: 468px;
		}
	
		.dialog-footer {
			text-align: center;
	
			.el-button {
				width: 160px;
			}
		}
	
		margin: 24px;
		padding: 24px;
		box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.03);
		border-radius: 18px 18px 18px 18px;
	}
	
</style>