yos_web/src/components/normal-basic-layout/details/modules/followUp/addLog.vue

<template>
  <div>
    <el-button type="default" size="mini" @click="onShow" :disabled="status === '已结案' || status === '已失败'">新 建</el-button>
    <el-drawer title=" 新建跟进动态" size="600px" append-to-body :visible.sync="dialogFormVisible" @close="onClose">
      <div class="drawer__panel">
        <el-form :model="form" ref="form" label-position="top" label-width="80px">
          <el-form-item v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'" label="跟进类型" prop="type" :rules="{ required: true, message: '请选择跟进类型', trigger: 'change'}">
            <el-select v-model="form.type" placeholder="请选择" style="width: 100%">
              <el-option
                  v-for="item in followUpType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="跟进对象" v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'" prop="dataextend.contactsid" :rules="{ required: true, message: '请选择跟进对象', trigger: 'change'}">
            <el-tag
                style="float: left;margin-right: 5px;margin-bottom: 5px"
                v-for="tag in selectTag"
                :key="tag.index"
                closable
                @close="closeTag(tag)"
                :type="tag.type">
              {{tag.name}}
            </el-tag>
            <contactsList style="float: left" @onSelect="onSelect" :selects="form.dataextend.contactsid"></contactsList>
          </el-form-item>
          <el-form-item label="跟进动态" prop="content" :rules="{ required: true, message: '请填写跟进动态', trigger: 'blur'}" v-if="$route.path !== '/projectChangeDetail' && $route.path !== '/customerDetail' && $route.path !== '/PublicCustomerDetail'">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 18 }" v-model="form.content" placeholder="请输入跟进动态" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="目的" prop="target" :rules="{ required: false, message: '请填写跟进目的', trigger: 'blur'}" v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 18 }" v-model="form.target" placeholder="请输入跟进目的" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="过程" prop="content" :rules="{ required: false, message: '请填写跟进过程', trigger: 'blur'}" v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 18 }" v-model="form.content" placeholder="请输入跟进过程" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="结果" prop="results" :rules="{ required: false, message: '请填写跟进结果', trigger: 'blur'}" v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 18 }" v-model="form.results" placeholder="请输入跟进结果" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="下次跟进计划" prop="nextplan" :rules="{ required: false, message: '请填写下次跟进计划', trigger: 'blur'}" v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 18 }" v-model="form.nextplan" placeholder="请输入下次跟进计划" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <upload
              ref="upload"
              :folderid="folderid"
              @onSuccess="onSuccess"
              :bindData="bindData"
              type="button">
            </upload>
            <!-- <previewImage :image="{}" :deletebtn="true"></previewImage> -->
          </el-form-item>

        </el-form>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="onClose">取 消</el-button>
        <el-button type="warning" size="small" @click="submitLog">保 存</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import upload from '@/components/upload/preview_upload.vue'
import previewImage from '@/components/previewImage/index.vue'
import contactsList from '@/template/projectChange/contactsList.vue'
export default {
  props:['ownertable','status'],
  components:{
    upload,
    previewImage,
    contactsList
  },
  data () {
    return {
      dialogFormVisible:false,
      form:{
        content:'',
        type:'',
        dataextend: {
          contactsid: [] // 跟进对象
        },//扩展参数
        target:'',//目的
        results:'',//结果
        nextplan:'',//下次跟进计划
      },
      selectTag:[],
      bindData:{},
      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
      attachmentids:[],
      path:'',
      followUpType:[],
      projectParam:{
        id:20221111131004,
        content:{
          pageNumber:1,
          pageSize:20,
          sa_projectid:'',
          nocache:true,
          where:{
            condition:''
          }
        }
      }
    }
  },

  methods:{
    /*onSuccess(res) {
      this.attachmentids = res.data.attachmentids
    },*/
    onShow(){
      this.dialogFormVisible = true
      console.log(this.$route,'route')
      this.path = this.$route.path
      console.log(this.path)
      this.queryFollowUpType()
    },
    /*获取跟进类型*/
    async queryFollowUpType(){
      const res = await this.$store.dispatch('optiontypeselect','followuptype')
      this.followUpType = res.data
    },
    submitLog () {
      this.$refs.form.validate(async (valid)=>{
        if (!valid) return false
        const res = await this.$api.requested({
          "id": 20220930121601,
          "content": {
            "sys_datafollowupid":0,
            "ownertable":this.ownertable,
            "ownerid":this.$route.query.id,
            "type":this.form.type,
            "content":this.form.content,
            "target":this.form.target,//目的
            "results":this.form.results,//结果
            "nextplan":this.form.nextplan,//下次跟进计划
            "dataextend": {
              "contactsid": this.form.dataextend.contactsid // 跟进对象
            }
          }
        })
        this.tool.showMessage(res,()=>{
          this.bindData = {
            "ownertable": 'sys_datafollowup',
            "ownerid": res.data.sys_datafollowupid,
            "usetype": 'default',
          }
          this.dialogFormVisible = false
          this.$refs['form'].resetFields();

          this.$refs['upload'].toUpload()
          this.$emit('onSuccess')
          this.selectTag = []
          this.form.dataextend.contactsid = []
        })
      })

    },
    onSuccess() {
      this.$emit('onSuccess')
      this.dialogFormVisible = false
    },
    onSelect(row){
      this.selectTag = row
      this.form.dataextend.contactsid = row.map(item=>item.sys_phonebookid)
      this.$refs.form.validateField('dataextend.contactsid')
    },
    closeTag(row){
      for (var i=0;i<this.selectTag.length;i++){
        if (row.contactsid === this.selectTag[i].contactsid){
          this.selectTag.splice(i,1)
          this.form.dataextend.contactsid.splice(i,1)
          break
        }
      }
    },
    onClose(){
      this.dialogFormVisible = false
      this.selectTag = []
      this.form.dataextend.contactsid = []
      this.$refs.form.resetFields()
    }
  }
}

</script>
<style>
</style>
<style scoped>
/deep/ .el-form-item {
   margin-bottom: 10px;
}
/deep/ .el-form--label-top .el-form-item__label {
  float: none;
  display: inline-block;
  text-align: left;
  padding: 0 0 0px 0;
}
</style>