|
@@ -0,0 +1,328 @@
|
|
|
+<template>
|
|
|
+ <div class="base-form">
|
|
|
+ <div class="form">
|
|
|
+ <Form :label-width="86" :rules="rules" :model="form">
|
|
|
+ <Row :gutter="90">
|
|
|
+ <i-col :span="12" class="">
|
|
|
+ <FormItem label="公司名称" prop="companyName">
|
|
|
+ <Input type="text" size="large" v-model="form.companyName" :disabled="isDetail" />
|
|
|
+ </FormItem>
|
|
|
+ </i-col>
|
|
|
+ <i-col :span="12" class="">
|
|
|
+ <FormItem label="所属行业" prop="companyType">
|
|
|
+ <i-select size="large" :model.sync="form.companyType" @on-change="changeCompanyType">
|
|
|
+ <i-option v-for="item in industryList" :key="item.id" :value="item.name">{{ item.name }}</i-option>
|
|
|
+ </i-select>
|
|
|
+ <!-- <Input type="text" size="large" v-model="form.companyType" :disabled="isDetail" /> -->
|
|
|
+ </FormItem>
|
|
|
+ </i-col>
|
|
|
+ <i-col :span="12" class="">
|
|
|
+ <FormItem label="成立时间" prop="companyRegisterTime">
|
|
|
+ <Date-picker v-model="form.companyRegisterTime" type="year" size="large" placeholder="选择年" :disabled="isDetail"></Date-picker>
|
|
|
+ </FormItem>
|
|
|
+ </i-col>
|
|
|
+ <i-col :span="12" class="">
|
|
|
+ <FormItem label="员工人数" prop="staffNum">
|
|
|
+ <Input type="text" size="large" v-model="form.staffNum" :disabled="isDetail" />
|
|
|
+ </FormItem>
|
|
|
+ </i-col>
|
|
|
+ <i-col :span="12" class="">
|
|
|
+ <FormItem label="注册资金" prop="registerFund">
|
|
|
+ <Input type="text" size="large" v-model="form.registerFund" :disabled="isDetail"/>
|
|
|
+ </FormItem>
|
|
|
+ </i-col>
|
|
|
+ <i-col :span="12" class="">
|
|
|
+ <FormItem label="主要产品" prop="mainProductDesc">
|
|
|
+ <Input type="text" size="large" v-model="form.mainProductDesc" :disabled="isDetail" />
|
|
|
+ </FormItem>
|
|
|
+ </i-col>
|
|
|
+ <i-col :span="12" class="">
|
|
|
+ <FormItem label="公司传真">
|
|
|
+ <Input type="text" size="large" v-model="form.companyFax" :disabled="isDetail" />
|
|
|
+ </FormItem>
|
|
|
+ </i-col>
|
|
|
+ <i-col :span="12" class="">
|
|
|
+ <FormItem label="邮政编码">
|
|
|
+ <Input type="text" size="large" v-model="form.companyType" :disabled="isDetail" />
|
|
|
+ </FormItem>
|
|
|
+ </i-col>
|
|
|
+ <i-col :span="12" class="">
|
|
|
+ <FormItem label="公司网址">
|
|
|
+ <Input type="text" size="large" v-model="form.companyType" :disabled="isDetail" />
|
|
|
+ </FormItem>
|
|
|
+ </i-col>
|
|
|
+ <i-col :span="12" class="">
|
|
|
+ <FormItem label="公司地址">
|
|
|
+ <i-select size="large" @on-change="changeAddress" filterable :remote-method="changeAddress">
|
|
|
+ <i-option v-for="item in addressList" :value="`${item.title}-${item.address}`" :key="item.id">
|
|
|
+ <template>
|
|
|
+ <p class="address-name">{{ item.title }}</p>
|
|
|
+ <p class="address-detail">{{ item.address }}</p>
|
|
|
+ </template>
|
|
|
+ </i-option>
|
|
|
+ </i-select>
|
|
|
+ </FormItem>
|
|
|
+ </i-col>
|
|
|
+ <i-col :span="24" class="">
|
|
|
+ <FormItem label="公司简介" class="textarea-w">
|
|
|
+ <Input type="textarea" size="large" v-model="form.companyType" :disabled="isDetail" />
|
|
|
+ </FormItem>
|
|
|
+ </i-col>
|
|
|
+ <i-col :span="24" class="">
|
|
|
+ <FormItem label="公司logo">
|
|
|
+ <picUpload tips="只能上传jpg/png文件,且不超过500kb" :multiple="false" :limit="1" :preUploads="preLogoUploads" :hasUploads="hasLogoUploads" />
|
|
|
+ </FormItem>
|
|
|
+ </i-col>
|
|
|
+ <!-- <i-col :span="12" class="">
|
|
|
+ <FormItem label="资质认证">
|
|
|
+ <picUpload tips="只能上传jpg/png文件,且不超过500kb" :multiple="false" :limit="1" />
|
|
|
+ </FormItem>
|
|
|
+ </i-col> -->
|
|
|
+ <i-col :span="24" class="">
|
|
|
+ <FormItem label="场景地址">
|
|
|
+ <template>
|
|
|
+ <Input type="text" size="large" v-model="form.vrLink" />
|
|
|
+ <Button type="primary" size="large" class="input-btn" @click="modalShow=true">选择场景</Button>
|
|
|
+ <Button type="primary" size="large" class="input-btn">编辑场景</Button>
|
|
|
+ </template>
|
|
|
+ </FormItem>
|
|
|
+ </i-col>
|
|
|
+ <i-col :span="24" class="">
|
|
|
+ <FormItem label="讲解人员">
|
|
|
+ <template>
|
|
|
+ <div class="guide-info">
|
|
|
+ <p class="guide-name">{{select_guide.name}}</p>
|
|
|
+ <p class="guide-id">{{select_guide.viewerId}}</p>
|
|
|
+ <p class="guide-phone">{{select_guide.phoneNum}}</p>
|
|
|
+ <img :src="select_guide.avatar" alt="" class="guide-avatar">
|
|
|
+ </div>
|
|
|
+ <Button type="primary" size="large" @click="guideModalShow=true">选择/更换</Button>
|
|
|
+ </template>
|
|
|
+ </FormItem>
|
|
|
+ </i-col>
|
|
|
+ </Row>
|
|
|
+ </Form>
|
|
|
+ </div>
|
|
|
+ <cModal :show="modalShow" class="scene-modal" :width="960" title="添加/选择场景" @close="modalShow=false" @submit="changeScene">
|
|
|
+ <template>
|
|
|
+ <tables
|
|
|
+ :data-api="dataApi"
|
|
|
+ :columns="tableColumns"
|
|
|
+ placeholder="场景名称"
|
|
|
+ />
|
|
|
+ <div style="height:20px"></div>
|
|
|
+ </template>
|
|
|
+ </cModal>
|
|
|
+ <cModal :show="guideModalShow" class="scene-modal" :width="960" title="选择讲解员" @close="guideModalShow=false" @submit="changeGuide">
|
|
|
+ <template>
|
|
|
+ <tables
|
|
|
+ :data-api="getGuideList"
|
|
|
+ :columns="guideTableColumns"
|
|
|
+ placeholder="经纪人"
|
|
|
+ ref="guideTable"
|
|
|
+ />
|
|
|
+ <div style="height:20px"></div>
|
|
|
+ </template>
|
|
|
+ </cModal>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import picUpload from '@/components/upload'
|
|
|
+import cModal from '@/components/Modal'
|
|
|
+import tables from 'components/tables'
|
|
|
+import * as CompanyApi from '@/api/company'
|
|
|
+import { getGuideList } from '@/api/guide'
|
|
|
+import { searchPlaceByKeyword } from '@/api/qqmap'
|
|
|
+
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ form: Object
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ isDetail: false,
|
|
|
+ preLogoUploads: [],
|
|
|
+ hasLogoUploads: [],
|
|
|
+ select_scene_num: '',
|
|
|
+ select_guide_id: '',
|
|
|
+ select_guide: {},
|
|
|
+ rules: {
|
|
|
+ name: [{ required: true, message: '请填写公司名', trigger: 'blur' }],
|
|
|
+ companyType: [{ required: true, message: '请选择所属行业', trigger: 'change'}],
|
|
|
+ companyRegisterTime: [{ required: true, message: '请填写成立时间', trigger: 'change'}],
|
|
|
+ staffNum: [{ required: true, message: '请填写员工人数', trigger: 'blur' }],
|
|
|
+ registerFund: [{ required: true, message: '请填写注册资金', trigger: 'blur' }],
|
|
|
+ mainProductDesc: [{ required: true, message: '请填写主要产品描述', trigger: 'blur' }],
|
|
|
+ },
|
|
|
+ tableColumns: [
|
|
|
+ {
|
|
|
+ align: 'center',
|
|
|
+ width: 80,
|
|
|
+ render: (h, params ) => h('Checkbox', {
|
|
|
+ props: {
|
|
|
+ trueValue: params.row.num,
|
|
|
+ falseValue: false,
|
|
|
+ value: params.row.num === this.select_scene_num ? params.row.num : false
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ 'on-change': (val) => {
|
|
|
+ this.select_scene_num = val
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'index',
|
|
|
+ title: '序号',
|
|
|
+ align: 'center',
|
|
|
+ width: 80
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '场景名称',
|
|
|
+ key: 'sceneName',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '分类',
|
|
|
+ key: 'title',
|
|
|
+ align: 'center',
|
|
|
+ render: h => h('div', '其它')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '拍摄时间',
|
|
|
+ key: 'createTime',
|
|
|
+ align: 'center'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ guideTableColumns: [
|
|
|
+ {
|
|
|
+ align: 'center',
|
|
|
+ width: 80,
|
|
|
+ render: (h, params ) => h('Checkbox', {
|
|
|
+ props: {
|
|
|
+ trueValue: params.row.viewerId,
|
|
|
+ falseValue: false,
|
|
|
+ value: params.row.viewerId === this.select_guide_id ? params.row.viewerId : false
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ 'on-change': (val) => {
|
|
|
+ this.select_guide_id = val
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'index',
|
|
|
+ title: '序号',
|
|
|
+ align: 'center',
|
|
|
+ width: 80
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '头像',
|
|
|
+ key: 'avatar',
|
|
|
+ align: 'center',
|
|
|
+ render: (h, params) => h('img', {
|
|
|
+ attrs: {
|
|
|
+ style: "width: 40px;height:40px;border-radius: 50%;",
|
|
|
+ src: params.row.avatar
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '名称',
|
|
|
+ key: 'name',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '联系方式',
|
|
|
+ key: 'phoneNum',
|
|
|
+ align: 'center'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ industryList: [],
|
|
|
+ dataApi: CompanyApi.fetchAllScene,
|
|
|
+ getGuideList,
|
|
|
+ modalShow: false,
|
|
|
+ guideModalShow: false,
|
|
|
+ addressList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ picUpload,
|
|
|
+ cModal,
|
|
|
+ tables,
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.getIndustryList()
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeScene () {
|
|
|
+ },
|
|
|
+ changeGuide () {
|
|
|
+ this.select_guide = this.$refs['guideTable'].tableData.find(item => item.viewerId === this.select_guide_id)
|
|
|
+ },
|
|
|
+ getIndustryList () {
|
|
|
+ CompanyApi.getIndustry({pageSize: 9999}).then(res => {
|
|
|
+ this.industryList = res.data.list
|
|
|
+ })
|
|
|
+ },
|
|
|
+ changeCompanyType (value) {
|
|
|
+ this.form.companyType = value
|
|
|
+ },
|
|
|
+ changeAddress (value) {
|
|
|
+ if (!value) {
|
|
|
+ this.addressList = []
|
|
|
+ return
|
|
|
+ }
|
|
|
+ searchPlaceByKeyword({keyword: value}).then(res => {
|
|
|
+ this.addressList = res.data
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.base-form {
|
|
|
+
|
|
|
+ .address-detail {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909090;
|
|
|
+ }
|
|
|
+ .ivu-select .ivu-select-dropdown {
|
|
|
+ width: 337px;
|
|
|
+ overflow: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+}
|
|
|
+.guide-info {
|
|
|
+ width: 380px;
|
|
|
+ padding: 12px 15px 16px;
|
|
|
+ font-size: 14px;
|
|
|
+ background: #161A1A;
|
|
|
+ border:1px solid rgba(255,255,255,0.4);
|
|
|
+ position: relative;
|
|
|
+ line-height: 19px;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 15px;
|
|
|
+ min-height: 104px;
|
|
|
+ vertical-align: top;
|
|
|
+ p {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .guide-phone {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ .guide-avatar {
|
|
|
+ position: absolute;
|
|
|
+ right: 15px;
|
|
|
+ top: 15px;
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|