|
@@ -0,0 +1,366 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="app-container">
|
|
|
|
+ <div class="title-container">
|
|
|
|
+ <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>
|
|
|
|
+ </div>
|
|
|
|
+ <y-detail-page-layout @save="handleCreate" :edit-status="true" v-loading="vLoading" element-loading-text="处理中。。。">
|
|
|
|
+ <div style="padding-top: 30px;">
|
|
|
|
+ <el-tabs v-model="activeName">
|
|
|
|
+ <el-tab-pane label="客户信息" name="first">
|
|
|
|
+ <el-form ref="postForm" :model="postForm" class="form-container">
|
|
|
|
+ <div class="createPost-main-container">
|
|
|
|
+ <div class="postInfo-container">
|
|
|
|
+ <div style="margin-bottom: 30px">
|
|
|
|
+ <h3 class="title">
|
|
|
|
+ <div class="avatar-wrapper icon-title">基</div>
|
|
|
|
+ <div class="icon-info">基本信息</div>
|
|
|
|
+ </h3>
|
|
|
|
+ </div>
|
|
|
|
+ <el-row>
|
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6" :span="6">
|
|
|
|
+ <el-form-item
|
|
|
|
+ label="客户名称:"
|
|
|
|
+ prop="name"
|
|
|
|
+ :rules="{required: true, message: '请输入员工姓名', trigger: 'blur'}"
|
|
|
|
+ label-width="120px"
|
|
|
|
+ class="postInfo-container-item"
|
|
|
|
+ >
|
|
|
|
+ <el-input v-model="postForm.name" class="filter-item"/>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6" :span="6">
|
|
|
|
+ <el-form-item
|
|
|
|
+ label="省市县:"
|
|
|
|
+ prop="province"
|
|
|
|
+ :rules="{required: true, message: '请选择省份', trigger: 'blur'}"
|
|
|
|
+ label-width="120px"
|
|
|
|
+ class="postInfo-container-item"
|
|
|
|
+ >
|
|
|
|
+ <el-cascader
|
|
|
|
+ filterable
|
|
|
|
+ v-model="postForm.value"
|
|
|
|
+ :options="districtsOptions"
|
|
|
|
+ :props="{ expandTrigger: 'hover' }"
|
|
|
|
+ @change="handleChange"
|
|
|
|
+ style="width: 100%"></el-cascader>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6" :span="6">
|
|
|
|
+ <el-form-item
|
|
|
|
+ label="市:"
|
|
|
|
+ prop="city"
|
|
|
|
+ :rules="{required: true, message: '请选择市', trigger: 'blur'}"
|
|
|
|
+ label-width="120px"
|
|
|
|
+ class="postInfo-container-item"
|
|
|
|
+ >
|
|
|
|
+ <el-select
|
|
|
|
+ v-model="postForm.city"
|
|
|
|
+ placeholder=""
|
|
|
|
+ clearable
|
|
|
|
+ filterable
|
|
|
|
+ class="filter-item"
|
|
|
|
+ style="width: 100%"
|
|
|
|
+ >
|
|
|
|
+ <el-option v-for="(item, index) in AllEnum['市级']" :key="index" :label="item" :value="item"/>
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6" :span="6">
|
|
|
|
+ <el-form-item
|
|
|
|
+ label="区/县:"
|
|
|
|
+ prop="county"
|
|
|
|
+ :rules="{required: true, message: '请选择区/县', trigger: 'blur'}"
|
|
|
|
+ label-width="120px"
|
|
|
|
+ class="postInfo-container-item"
|
|
|
|
+ >
|
|
|
|
+ <el-select
|
|
|
|
+ v-model="postForm.county"
|
|
|
|
+ placeholder=""
|
|
|
|
+ clearable
|
|
|
|
+ filterable
|
|
|
|
+ class="filter-item"
|
|
|
|
+ style="width: 100%"
|
|
|
|
+ >
|
|
|
|
+ <el-option v-for="(item, index) in AllEnum['区/县级']" :key="index" :label="item" :value="item"/>
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6" :span="6">
|
|
|
|
+ <el-form-item
|
|
|
|
+ label="部门:"
|
|
|
|
+ prop="department"
|
|
|
|
+ label-width="120px"
|
|
|
|
+ class="postInfo-container-item"
|
|
|
|
+ >
|
|
|
|
+ <el-input v-model="postForm.department" class="filter-item"/>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6" :span="6">
|
|
|
|
+ <el-form-item
|
|
|
|
+ label="职位:"
|
|
|
|
+ prop="position"
|
|
|
|
+ label-width="120px"
|
|
|
|
+ class="postInfo-container-item"
|
|
|
|
+ >
|
|
|
|
+ <el-input v-model="postForm.position" class="filter-item"/>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6" :span="6">
|
|
|
|
+ <el-form-item
|
|
|
|
+ label="科室:"
|
|
|
|
+ prop="section"
|
|
|
|
+ label-width="120px"
|
|
|
|
+ class="postInfo-container-item"
|
|
|
|
+ >
|
|
|
|
+ <el-input v-model="postForm.section" class="filter-item"/>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6" :span="6">
|
|
|
|
+ <el-form-item label="联系电话:"
|
|
|
|
+ prop="mobile"
|
|
|
|
+ :rules="[{required: true, message: '请输入联系电话', trigger: 'blur'},]"
|
|
|
|
+ label-width="120px" class="postInfo-container-item">
|
|
|
|
+ <el-input v-model="postForm.mobile" class="filter-item"/>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6" :span="6">
|
|
|
|
+ <el-form-item
|
|
|
|
+ label="微信号:"
|
|
|
|
+ prop="wechatNo"
|
|
|
|
+ label-width="120px"
|
|
|
|
+ class="postInfo-container-item"
|
|
|
|
+ >
|
|
|
|
+ <el-input v-model="postForm.wechatNo" class="filter-item"/>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6" :span="6">
|
|
|
|
+ <el-form-item
|
|
|
|
+ label="QQ号:"
|
|
|
|
+ prop="qq"
|
|
|
|
+ label-width="120px"
|
|
|
|
+ class="postInfo-container-item"
|
|
|
|
+ >
|
|
|
|
+ <el-input v-model="postForm.qq" class="filter-item"/>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6" :span="6">
|
|
|
|
+ <el-form-item label="客户等级:" label-width="120px" class="postInfo-container-item">
|
|
|
|
+ <el-select
|
|
|
|
+ v-model="postForm.level"
|
|
|
|
+ placeholder=""
|
|
|
|
+ clearable
|
|
|
|
+ filterable
|
|
|
|
+ class="filter-item"
|
|
|
|
+ style="width: 100%"
|
|
|
|
+ >
|
|
|
|
+ <el-option v-for="(item, index) in AllEnum['客户等级']" :key="index" :label="item" :value="item"/>
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6" :span="6">
|
|
|
|
+ <el-form-item
|
|
|
|
+ label="客户地址:"
|
|
|
|
+ prop="address"
|
|
|
|
+ label-width="120px"
|
|
|
|
+ class="postInfo-container-item"
|
|
|
|
+ >
|
|
|
|
+ <el-input v-model="postForm.address" class="filter-item" style="width: 480px"/>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-form>
|
|
|
|
+ </el-tab-pane>
|
|
|
|
+ </el-tabs>
|
|
|
|
+ </div>
|
|
|
|
+ </y-detail-page-layout>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+<script>
|
|
|
|
+ import Breadcrumb from '@/components/Breadcrumb'
|
|
|
|
+ import YDetailPageLayout from '@/components/YDetailPageLayout'
|
|
|
|
+
|
|
|
|
+ export default {
|
|
|
|
+ name: 'customerDetail',
|
|
|
|
+ components: {
|
|
|
|
+ Breadcrumb,
|
|
|
|
+ YDetailPageLayout
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ type: 'detail',
|
|
|
|
+ postForm: {
|
|
|
|
+ },
|
|
|
|
+ dataId: this.$route.query.id,
|
|
|
|
+ activeName: 'first',
|
|
|
|
+ vLoading: false,
|
|
|
|
+ AllEnum:[],
|
|
|
|
+ listQuery:{},
|
|
|
|
+ disable: false,
|
|
|
|
+ districtsOptions:[]
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ this.getAllEnum();
|
|
|
|
+ this.getDistrictsOptions();
|
|
|
|
+ this.getDetail();
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ handleChange(value) {
|
|
|
|
+ console.log(value);
|
|
|
|
+ },
|
|
|
|
+ getDistrictsOptions(){
|
|
|
|
+ const that = this;
|
|
|
|
+ that.$api.districts.tree().then(data => {
|
|
|
|
+ if (data.code === 200) {
|
|
|
|
+ that.districtsOptions = data.data
|
|
|
|
+ } else {
|
|
|
|
+ this.$message({
|
|
|
|
+ type: 'error',
|
|
|
|
+ message: data.msg
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getAllEnum() {
|
|
|
|
+ const that = this;
|
|
|
|
+ that.$api.globalConfig.getAllEnum().then(data => {
|
|
|
|
+ if (data.code === 200) {
|
|
|
|
+ that.AllEnum = data.data
|
|
|
|
+ } else {
|
|
|
|
+ this.$message({
|
|
|
|
+ type: 'error',
|
|
|
|
+ message: data.msg
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getDetail() {
|
|
|
|
+ if (this.dataId) {
|
|
|
|
+ this.$api.customer.detail(this.dataId).then(res => {
|
|
|
|
+ this.postForm = res.data;
|
|
|
|
+ this.userPosts = res.data.userPosts.map(item => {
|
|
|
|
+ return item.id
|
|
|
|
+ })
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ handleCreate() {
|
|
|
|
+ // if (!this.postForm.userType) {
|
|
|
|
+ // this.$notify({
|
|
|
|
+ // title: '错误',
|
|
|
|
+ // message: '请选择员工类型',
|
|
|
|
+ // type: 'error',
|
|
|
|
+ // duration: 2000
|
|
|
|
+ // });
|
|
|
|
+ // return
|
|
|
|
+ // }
|
|
|
|
+ // if (!this.postForm.name) {
|
|
|
|
+ // this.$notify({
|
|
|
|
+ // title: '错误',
|
|
|
|
+ // message: '请输入姓名',
|
|
|
|
+ // type: 'error',
|
|
|
|
+ // duration: 2000
|
|
|
|
+ // });
|
|
|
|
+ // return
|
|
|
|
+ // }
|
|
|
|
+ // if (!this.postForm.sex) {
|
|
|
|
+ // this.$notify({
|
|
|
|
+ // title: '错误',
|
|
|
|
+ // message: '请选择性别',
|
|
|
|
+ // type: 'error',
|
|
|
|
+ // duration: 2000
|
|
|
|
+ // });
|
|
|
|
+ // return
|
|
|
|
+ // }
|
|
|
|
+ // if (!this.postForm.idNo) {
|
|
|
|
+ // this.$notify({
|
|
|
|
+ // title: '错误',
|
|
|
|
+ // message: '请输入身份证号',
|
|
|
|
+ // type: 'error',
|
|
|
|
+ // duration: 2000
|
|
|
|
+ // });
|
|
|
|
+ // return
|
|
|
|
+ // }
|
|
|
|
+ // if (this.postForm.remark && this.postForm.remark.length>200) {
|
|
|
|
+ // this.$notify({
|
|
|
|
+ // title: '错误',
|
|
|
|
+ // message: '备注信息长度应不超过200字符',
|
|
|
|
+ // type: 'error',
|
|
|
|
+ // duration: 2000
|
|
|
|
+ // });
|
|
|
|
+ // return
|
|
|
|
+ // }
|
|
|
|
+ // this.postForm.userPosts = this.userPosts;
|
|
|
|
+ // if (!this.postForm.userPosts || !this.postForm.userPosts.length) {
|
|
|
|
+ // this.$notify({
|
|
|
|
+ // title: '错误',
|
|
|
|
+ // message: '请选择岗-部门',
|
|
|
|
+ // type: 'error',
|
|
|
|
+ // duration: 2000
|
|
|
|
+ // });
|
|
|
|
+ // return
|
|
|
|
+ // }
|
|
|
|
+ //
|
|
|
|
+ // if (!this.postForm.hireDate) {
|
|
|
|
+ // this.$notify({
|
|
|
|
+ // title: '错误',
|
|
|
|
+ // message: '请选择入职日期',
|
|
|
|
+ // type: 'error',
|
|
|
|
+ // duration: 2000
|
|
|
|
+ // });
|
|
|
|
+ // return
|
|
|
|
+ // }
|
|
|
|
+ this.vLoading = true;
|
|
|
|
+
|
|
|
|
+ this.$refs.postForm.validate(valid => {
|
|
|
|
+ if (valid) {
|
|
|
|
+ if (this.dataId) {
|
|
|
|
+ this.$api.customer.edit(Object.assign({}, this.postForm)).then(res => {
|
|
|
|
+ if (res.code === 200) {
|
|
|
|
+ this.$notify({
|
|
|
|
+ title: '成功',
|
|
|
|
+ message: '保存成功',
|
|
|
|
+ type: 'success',
|
|
|
|
+ duration: 2000
|
|
|
|
+ });
|
|
|
|
+ const back = this.$route.query.back;
|
|
|
|
+ if (back) {
|
|
|
|
+ this.$router.push(back)
|
|
|
|
+ }
|
|
|
|
+ this.initData();
|
|
|
|
+ this.vLoading = false
|
|
|
|
+ }
|
|
|
|
+ }).catch(() => {
|
|
|
|
+ this.vLoading = false
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ this.$api.customer.add(Object.assign({}, this.postForm)).then(res => {
|
|
|
|
+ if (res.code === 200) {
|
|
|
|
+ this.$notify({
|
|
|
|
+ title: '成功',
|
|
|
|
+ message: '新增成功',
|
|
|
|
+ type: 'success',
|
|
|
|
+ duration: 2000
|
|
|
|
+ });
|
|
|
|
+ const back = this.$route.query.back;
|
|
|
|
+ if (back) {
|
|
|
|
+ this.$router.push(back)
|
|
|
|
+ }
|
|
|
|
+ this.initData();
|
|
|
|
+ this.vLoading = false
|
|
|
|
+ }
|
|
|
|
+ }).catch(() => {
|
|
|
|
+ this.vLoading = false
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+
|
|
|
|
+</style>
|