feature(跟进): 项目添加创建跟进功能

src/views/plat/punchRecords/index.vue

@@ -2,7 +2,7 @@
   <div class="follow-container">
     <el-row :gutter="10" style="margin-bottom: 10px">
       <el-col :span="4">
-        <el-input v-model="queryForm.userNickName" placeholder="用户" />
+        <el-input v-model="queryForm.userNickName" placeholder="销售工程师" />
       </el-col>
       <el-col :span="4">
         <el-input v-model.number="queryForm.daysBeforeToday" placeholder="查询天数">

src/views/proj/business/components/DetailsFollow.vue

@@ -15,7 +15,7 @@
               <vab-icon class="user-avatar" icon="account-circle-fill" />
               <div class="text">
                 <p class="action">
-                  <span>{{ item.createdName }} 跟进（{{ formatType(item.followType) }}）</span>
+                  <span>{{ item.createdName }} 跟进（{{ selectDictLabel(followTypeOptions, item.followType) }}）</span>
                   <span>
                     <vab-icon icon="time-line" />
                     {{ item.followDate }}
@@ -78,12 +78,19 @@
     data() {
       return {
         followList: [],
+        followTypeOptions: [],
       }
     },
     mounted() {
       // console.log(this.busId)
+      this.getOptions()
     },
     methods: {
+      getOptions() {
+        Promise.all([this.getDicts('plat_follow_type')]).then(([followType]) => {
+          this.followTypeOptions = followType.data.values || []
+        })
+      },
       // 跟进记录详情
       showDetail(row) {
         this.$refs.followDetail.init({ ...row })
@@ -94,13 +101,6 @@
         row.showComment = !row.showComment
         this.$forceUpdate()
       },
-      formatType(val) {
-        let str = ''
-        if (val == 10) str = '电话'
-        else if (val == 20) str = '邮件'
-        else if (val == 30) str = '拜访'
-        return str
-      },
       async fetchData() {
         let params = {
           targetId: String(this.busId),

src/views/proj/business/components/FollowAdd.vue

@@ -3,68 +3,117 @@
     <el-form ref="form" label-width="96px" :model="form" :rules="rules">
       <el-row>
         <el-col :span="12">
-          <el-form-item label="跟进类型" prop="followType">
-            <el-input v-model="form.followType" />
+          <el-form-item label="跟进时间" prop="followDate">
+            <el-date-picker
+              v-model="form.followDate"
+              placeholder="选择日期"
+              style="width: 100%"
+              type="datetime"
+              value-format="yyyy-MM-dd HH:mm:ss" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="跟进时间" prop="followDate">
-            <el-date-picker v-model="form.followDate" placeholder="选择日期" style="width: 100%" type="datetime" />
+          <el-form-item label="跟进方式" prop="followType">
+            <el-select v-model="form.followType" placeholder="请选择" style="width: 100%">
+              <el-option v-for="item in followTypeOptions" :key="item.key" :label="item.value" :value="item.key" />
+            </el-select>
           </el-form-item>
         </el-col>
+        <!--        <el-col :span="12">-->
+        <!--          <el-form-item label="跟进内容" prop="followContentType">-->
+        <!--            <el-select v-model="form.followContentType" placeholder="请选择跟进内容" style="width: 100%">-->
+        <!--              <el-option-->
+        <!--                v-for="item in followContentTypeOptions"-->
+        <!--                :key="item.key"-->
+        <!--                :label="item.value"-->
+        <!--                :value="item.key" />-->
+        <!--            </el-select>-->
+        <!--          </el-form-item>-->
+        <!--        </el-col>-->
+        <!--        <el-col v-if="followContentType !== '10'" :span="12">-->
+        <!--          <el-form-item label="总部支持人员" prop="supportName">-->
+        <!--            <el-input v-model="form.supportName" />-->
+        <!--          </el-form-item>-->
+        <!--        </el-col>-->
         <el-col :span="24">
           <el-form-item label="跟进内容" prop="followContent">
             <el-input
               v-model="form.followContent"
-              placeholder="请输入跟进内容"
+              placeholder="请输入拜访对象，协同拜访人员、具体沟通内容、进展或问题，下一步工作计划及完成时间"
               rows="5"
               show-word-limit
               type="textarea" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="提醒对象" prop="reminders">
-            <el-input v-model="form.reminders" />
+          <el-form-item label="联系人" prop="contactsName">
+            <el-input v-model="form.contactsName" readonly suffix-icon="el-icon-search" @focus="handleSelectContact" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="下次联系时间" prop="nextTime">
-            <el-date-picker v-model="form.nextTime" placeholder="选择日期" style="width: 100%" type="datetime" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="24">
-          <el-form-item label="备注" prop="remark">
-            <el-input v-model="form.remark" placeholder="请输入备注信息" rows="5" show-word-limit type="textarea" />
+          <el-form-item label="上传附件" prop="files">
+            <el-upload
+              ref="uploadRef"
+              action="#"
+              :before-upload="
+                (file) => {
+                  return beforeAvatarUpload(file)
+                }
+              "
+              :file-list="fileList"
+              :http-request="uploadrequest">
+              <el-button size="mini" type="primary">点击上传</el-button>
+            </el-upload>
           </el-form-item>
         </el-col>
+        <!--        <el-col :span="12">-->
+        <!--          <el-form-item label="提醒对象" prop="reminders">-->
+        <!--            <el-input v-model="form.reminders" />-->
+        <!--          </el-form-item>-->
+        <!--        </el-col>-->
+        <!--        <el-col :span="12">-->
+        <!--          <el-form-item label="下次联系时间" prop="nextTime">-->
+        <!--            <el-date-picker v-model="form.nextTime" placeholder="选择日期" style="width: 100%" type="datetime" />-->
+        <!--          </el-form-item>-->
+        <!--        </el-col>-->
+        <!--        <el-col :span="24">-->
+        <!--          <el-form-item label="备注" prop="remark">-->
+        <!--            <el-input v-model="form.remark" placeholder="请输入备注信息" rows="5" show-word-limit type="textarea" />-->
+        <!--          </el-form-item>-->
+        <!--        </el-col>-->
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
       <el-button @click="close">取 消</el-button>
       <el-button type="primary" @click="save">确 定</el-button>
     </div>
+
+    <!-- 选择客户联系人弹窗 -->
+    <select-contact
+      ref="selectContact"
+      :default-customer="customerInfo"
+      :query-params="queryContact"
+      @save="selectContact" />
   </el-dialog>
 </template>
 
 <script>
   import followApi from '@/api/customer/follow'
+  import SelectContact from '@/components/select/SelectCustomerContact'
+  import asyncUploadFile from '@/utils/uploadajax'
+  import axios from 'axios'
 
   export default {
     name: 'FollowAdd',
-    props: {
-      // 跟进信息
-      followup: {
-        type: Object,
-        default() {
-          return {}
-        },
-      },
+    components: {
+      SelectContact,
     },
     data() {
       return {
         form: {
           followType: '',
           followDate: '',
+          followContentType: '',
           followContent: '',
           targetId: '',
           targetName: '',
@@ -76,36 +125,84 @@
           reminders: '',
           nextTime: '',
           remark: '',
+          supportName: '',
+          files: [],
         },
         rules: {
-          followType: [{ required: true, trigger: 'blur', message: '请输入跟进类型' }],
+          followType: [{ required: true, trigger: 'blur', message: '请输入跟进方式' }],
           followDate: [{ required: true, trigger: 'blur', message: '请输入跟进时间' }],
+          followContentType: [{ required: true, trigger: 'blur', message: '请输入跟进内容类型' }],
           followContent: [{ required: true, trigger: 'blur', message: '请输入跟进内容' }],
           targetId: [{ required: true, trigger: 'blur', message: '请选择跟进对象' }],
           targetName: [{ required: true, trigger: 'blur', message: '跟进对象不能为空' }],
-          targetType: [{ required: true, trigger: 'blur', message: '请输入标题' }],
+          targetType: [{ required: true, trigger: 'blur', message: '跟进对象类型不能为空' }],
           custId: [{ required: true, trigger: 'blur', message: '请选择关联客户' }],
           custName: [{ required: true, trigger: 'blur', message: '客户名称不能为空' }],
           contactsId: [{ required: true, trigger: 'blur', message: '请选择关联联系人' }],
           contactsName: [{ required: true, trigger: 'blur', message: '联系人姓名不能为空' }],
+          supportName: [{ required: true, trigger: 'blur', message: '总部支持人员不能为空' }],
         },
         title: '',
         dialogFormVisible: false,
+        fileList: [],
+        fileSettings: {
+          // 文件配置信息
+          fileSize: 52428800,
+          fileTypes: '.doc,.docx,.zip,.xls,.xlsx,.rar,.jpg,.jpeg,.gif,.png,.jfif,.txt',
+          pictureSize: 52428800,
+          pictureTypes: '.jpg,.jpeg,.gif,.png,.jfif,.txt',
+          types: '.doc,.docx,.zip,.xls,.xlsx,.rar,.jpg,.jpeg,.gif,.png,.jfif,.mp4,.txt',
+          videoSize: 104857600,
+          videoType: '.mp4',
+        },
+        queryContact: {},
+        customerInfo: {},
+        followTypeOptions: [],
+        followContentTypeOptions: [],
       }
     },
     watch: {},
-    created() {},
+    created() {
+      this.getOptions()
+    },
     methods: {
-      showEdit() {
+      getOptions() {
+        Promise.all([this.getDicts('plat_follow_type'), this.getDicts('plat_follow_content_type')]).then(
+          ([followType, followContentType]) => {
+            this.followTypeOptions = followType.data.values || []
+            this.followContentTypeOptions = followContentType.data.values || []
+          }
+        )
+      },
+      handleSelectContact() {
+        if (!this.queryContact.custId) {
+          this.$message.warning('请先选择客户')
+          return
+        }
+        this.$refs.selectContact.open()
+      },
+      selectContact(val) {
+        if (val && val.length > 0) {
+          this.form.contactsId = val[0].id
+          this.form.contactsName = val.map((item) => item.cuctName).join()
+        }
+        console.log(this.form)
+      },
+      showEdit(row) {
         this.title = '添加跟进记录'
-        this.form = { ...this.followup }
-        console.log(this.followup)
+        this.form = Object.assign(this.form, row)
         console.log(this.form)
+        this.queryContact.custId = this.form.custId
+        this.customerInfo = {
+          custId: this.form.custId,
+          custName: this.form.custName,
+        }
         this.dialogFormVisible = true
       },
       close() {
         this.$refs['form'].resetFields()
         this.form = this.$options.data().form
+        this.fileList = []
         this.dialogFormVisible = false
       },
       save() {
@@ -120,6 +217,60 @@
           }
         })
       },
+
+      // 上传图片
+      beforeAvatarUpload(file) {
+        let flag1 = file.size < this.fileSettings.fileSize
+        if (!flag1) {
+          this.$message.warning('文件过大，请重新选择！')
+          return false
+        }
+        let flag2 = this.fileSettings.fileTypes.split(',').includes('.' + file.name.split('.').pop())
+        if (!flag2) {
+          this.$message.warning('文件类型不符合，请重新选择！')
+          return false
+        }
+        return true
+      },
+      // 上传
+      uploadrequest(option) {
+        let _this = this
+        let url = process.env.VUE_APP_UPLOAD_WEED
+        axios
+          .post(url)
+          .then(function (res) {
+            if (res.data && res.data.fid && res.data.fid !== '') {
+              option.action = `${process.env.VUE_APP_PROTOCOL}${res.data.publicUrl}/${res.data.fid}`
+              let file_name = option.file.name
+              let index = file_name.lastIndexOf('.')
+              let file_extend = ''
+              if (index > 0) {
+                // 截取名称中的扩展名
+                file_extend = file_name.substr(index + 1)
+              }
+              let uploadform = {
+                fileName: file_name, // 资料名称
+                fileUrl: `${process.env.VUE_APP_PROTOCOL}${res.data.publicUrl}/${res.data.fid}`, // 资料存储url
+                size: option.file.size.toString(), // 资料大小
+                fileType: file_extend, // 资料文件类型
+              }
+              asyncUploadFile(option).then(() => {
+                _this.form.files.push(uploadform)
+              })
+            } else {
+              _this.$message({
+                type: 'warning',
+                message: '未上传成功！请刷新界面重新上传！',
+              })
+            }
+          })
+          .catch(function () {
+            _this.$message({
+              type: 'warning',
+              message: '未上传成功！请重新上传！',
+            })
+          })
+      },
     },
   }
 </script>

src/views/proj/business/detail.vue

@@ -7,6 +7,7 @@
           <h3>
             {{ details.nboName }}
             <span>
+              <el-button @click="handleFollow">添加跟进</el-button>
               <!--升级、降级-->
               <business-gradation :bus-id="id" :business-info="details" @fetch-data="init" />
               <el-button
@@ -204,6 +205,8 @@
     </div>
     <!-- 编辑 -->
     <edit ref="edit" @fetch-data="init" />
+    <!-- 添加跟进记录 -->
+    <follow-add ref="follow-add" @fetch-data="init" />
     <!-- 转移 -->
     <transfer ref="transfer" @fetch-data="init" />
     <!-- 转储备项目 -->
@@ -219,6 +222,7 @@
   import { mapGetters } from 'vuex'
   import businessApi from '@/api/proj/business'
   import Edit from './components/BusinessEdit'
+  import FollowAdd from './components/FollowAdd'
   import Transfer from './components/Transfer'
   import DetailsContact from './components/DetailsContact'
   import DetailsContract from './components/DetailsContract'
@@ -232,6 +236,7 @@
     components: {
       BusinessGradation,
       Edit,
+      FollowAdd,
       Transfer,
       ToReserve,
       DetailsContact,
@@ -248,6 +253,7 @@
         abstract: {},
         activeName: 'details',
         selectRows: [],
+        followup: {},
         followList: [],
         contactList: [],
         dynamicsList: [],
@@ -285,6 +291,7 @@
           this.getDicts('sys_product_line'),
           this.getDicts('sys_yes_no'),
           this.getRecord(),
+          this.handleClick({ name: this.activeName }),
         ]).then(([details, nboType, nboSource, salesModel, productLine, yesOrNo]) => {
           if (details.data) this.details = details.data
           this.nboTypeOptions = nboType.data.values || []
@@ -331,6 +338,20 @@
           return
         }
       },
+      // 添加跟进记录
+      handleFollow() {
+        this.followup = {
+          targetId: this.details.id,
+          targetType: '20',
+          targetName: this.details.nboName,
+          custId: this.details.custId,
+          custName: this.details.custName,
+          contactsId: this.details.contactId,
+          contactsName: this.details.contactName,
+        }
+        console.log(this.followup)
+        this.$refs['follow-add'].showEdit(this.followup)
+      },
       // 转为储备项目
       handleToReserve() {
         this.$refs.toReserve.open(this.id)

src/views/proj/business/index.vue

@@ -185,7 +185,7 @@
     <!-- 转移 -->
     <transfer ref="transfer" @fetch-data="fetchData" />
     <!-- 添加跟进记录 -->
-    <follow-add ref="follow" :followup.sync="followup" @fetch-data="fetchData" />
+    <follow-add ref="follow" @fetch-data="fetchData" />
   </div>
 </template>
 
@@ -498,7 +498,7 @@
           contactsName: row.contactName,
         }
         console.log(this.followup)
-        this.$refs.follow.showEdit()
+        this.$refs.follow.showEdit(this.followup)
       },
       handleEdit(row) {
         if (row.id) {