item-management-web/src/views/market/visit/detail.vue

<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" style="padding-left: 200px;">
              <div>
                <div class="postInfo-container">
                  <el-row>
                    <el-col :xs="24" :sm="12" :lg="10" :span="6">
                      <el-form-item
                        label="客户名字："
                        prop="customerId"
                        label-width="180px"
                        class="postInfo-container-item"
                        :rules="{required: true, message: '请填选择客户名字', trigger: 'blur'}"
                      >
                        <el-select
                          v-model="postForm.customerId"
                          placeholder=""
                          clearable
                          filterable
                          class="filter-item"
                          style="width:360px"
                          @change="getCustomerDetail"

                        >
                          <el-option
                            v-for="item in customers"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :xs="24" :sm="12" :lg="10" :span="6">
                      <el-form-item
                        label="客户等级："
                        prop="level"
                        label-width="180px"
                        class="postInfo-container-item"
                      >
                        <el-input style="width:360px" :value="postForm.customerLevel" readonly disabled/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :xs="24" :sm="12" :lg="10" :span="6">
                      <el-form-item
                        label="客户部门："
                        prop="department"
                        label-width="180px"
                        class="postInfo-container-item"
                      >
                        <el-input style="width:360px" :value="postForm.customerDepartment" readonly disabled/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :xs="24" :sm="12" :lg="10" :span="6">
                      <el-form-item
                        label="客户科室："
                        prop="section"
                        label-width="180px"
                        class="postInfo-container-item"
                      >
                        <el-input style="width:360px" :value="postForm.customerSection" readonly disabled/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :xs="24" :sm="12" :lg="10" :span="6">
                      <el-form-item
                        label="客户职位："
                        prop="position"
                        label-width="180px"
                        class="postInfo-container-item"
                      >
                        <el-input style="width:360px" :value="postForm.customerPosition" readonly disabled/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </div>
              <div>
                <div>
                  <div class="postInfo-container">
                    <el-row>
                      <el-col :xs="24" :sm="12" :lg="10" :span="6">
                        <el-form-item
                          label="拜访类型："
                          prop="visitType"
                          label-width="180px"
                          class="postInfo-container-item"
                          :rules="{required: true, message: '选择拜访类型', trigger: 'blur'}"
                        >
                          <el-select clearable style="width:360px" v-model="postForm.visitType" placeholder="拜访类型">
                            <el-option key="0" label="初访" value="初访"/>
                            <el-option key="1" label="回访" value="回访"/>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </div>
                </div>
                <div>
                  <div class="postInfo-container">
                    <el-row>
                      <el-col :xs="24" :sm="12" :lg="10" :span="6">
                        <el-form-item
                          label="拜访日期："
                          prop="visitTime"
                          :rules="{required: true, message: '请选择日期', trigger: 'blur'}"
                          label-width="180px"
                          class="postInfo-container-item"
                        >
                          <el-date-picker
                            v-model="postForm.visitTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            style="width:360px"
                            placeholder="选择日期"
                          />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </div>
                </div>
                <div>
                  <div class="postInfo-container">
                    <el-row>
                      <el-col :xs="24" :sm="12" :lg="10" :span="6">
                        <el-form-item
                          label="拜访地点："
                          prop="spot"
                          label-width="180px"
                          class="postInfo-container-item"
                        >
                          <el-input v-model="postForm.spot"  style="width:360px" class="filter-item"/>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </div>
                </div>
                <div>
                  <div class="postInfo-container">
                    <el-row>
                      <el-col :xs="24" :sm="12" :lg="10" :span="6">
                        <el-form-item
                          label="沟通内容："
                          prop="content"
                          label-width="180px"
                          class="postInfo-container-item"
                        >
                          <el-input type="textarea" style="width:360px" v-model="postForm.content" class="filter-item" placeholder="200字符" :autosize="{ minRows: 8, maxRows: 8}"/>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </div>
                </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: 'visitDetail',
    components: {
      Breadcrumb,
      YDetailPageLayout
    },
    data() {
      return {
        type: 'detail',
        postForm: {
          customerId:null,
          customerDepartment:null,
          customerSection:null,
          customerPosition:null,
          customerLevel:null
        },
        visitId : this.$route.query.id,
        activeName: 'first',
        vLoading: false,
        listQuery:{},
        customers:[],
      }
    },
    created() {
      this.getCustomer();
      this.getDetail();
    },
    methods: {
      getCustomerDetail(){
        this.$api.customer.detail(this.postForm.customerId).then(res =>{
          this.postForm.customerDepartment = res.data.department;
          this.postForm.customerPosition = res.data.position;
          this.postForm.customerSection = res.data.section;
          this.postForm.customerLevel = res.data.level;
        })
      },
      getDetail() {
        if (this.visitId) {
          this.$api.visit.detail(this.visitId).then(res => {
            this.postForm = res.data;
          });
        }
      },
      getCustomer(){
        const that = this;
        that.$api.customer.simpleAll().then(data => {
          if (data.code === 200) {
            that.customers = data.data
          } else {
            this.$message({
              type: 'error',
              message: data.msg
            })
          }
        })
      },
      handleCreate() {
        this.$refs.postForm.validate(valid => {
          if (valid) {
            if (this.visitId) {
              this.$api.visit.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.visit.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>