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

<template>
  <div class="inline-16">
    <el-button v-if="isOperation" type="text" @click="onShow(dialogFormVisible = true)" size="mini">{{$t(`编辑`)}}</el-button>
    <el-button v-else type="text" size="mini" @click="onShow(dialogFormVisible = true)" :disabled="status === '已结案' || status === '已失败'">
      <svg t="1727058404479" class="icon" viewBox="0 0 1024 1024" style="vertical-align: middle" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12347" width="14" height="14"><path d="M319.122286 565.101714a8.265143 8.265143 0 0 0-1.609143 2.852572l-51.2 188.928a32.109714 32.109714 0 0 0 39.277714 39.350857l187.538286-51.2h0.658286a8.118857 8.118857 0 0 0 5.851428-2.413714l501.540572-501.467429a80.457143 80.457143 0 0 0 23.04-57.344 98.011429 98.011429 0 0 0-29.257143-68.681143l-47.396572-47.469714a98.157714 98.157714 0 0 0-68.681143-29.257143 80.457143 80.457143 0 0 0-57.856 23.698286L319.853714 563.712c-0.512 0.512-0.365714 1.170286-0.731428 1.755429m632.685714-373.028572l-49.810286 49.810286-80.969143-81.92 49.078858-49.078857a23.332571 23.332571 0 0 1 31.744 2.267428l47.396571 47.469715a25.819429 25.819429 0 0 1 7.753143 17.993142 19.090286 19.090286 0 0 1-5.412572 13.604572m-543.524571 380.342857l361.764571-361.545143 80.457143 82.066286-360.521143 361.252571z m-65.828571 146.724571l26.185142-95.963428 69.778286 69.778286z m641.170285-328.704a34.742857 34.742857 0 0 0-34.596571 34.669715v467.894857a44.470857 44.470857 0 0 1-44.470857 44.397714H113.590857a44.544 44.544 0 0 1-44.470857-44.397714V130.486857a44.544 44.544 0 0 1 44.470857-44.470857h509.366857a34.596571 34.596571 0 0 0 0-69.193143H108.324571A108.544 108.544 0 0 0-0.073143 125.220571v773.558858a108.544 108.544 0 0 0 108.397714 108.397714h801.353143a108.470857 108.470857 0 0 0 108.397715-108.397714V426.130286a34.669714 34.669714 0 0 0-34.596572-34.450286" fill="#999999" p-id="12348"></path></svg>
      <span style="font-size: 14px;color: #333;margin-left: 5px;vertical-align: middle" >{{$t(`编辑`)}}</span></el-button>
    <el-drawer :title="$t(`编辑跟进动态`)" size="600px" append-to-body :visible.sync="dialogFormVisible" @close="onClose">
      <div class="drawer__panel">
        <el-form ref="form" :model="form" label-position="top" :label-width="tool.onlyZh('80px')">
          <el-form-item v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'" :label="$t(`跟进类型`)" prop="type" :rules="{ required: true, message: $t('请选择跟进类型'), trigger: 'change'}">
            <el-select v-model="form.type" :placeholder="$t(`请选择`)" style="width: 100%">
              <el-option
                  v-for="item in followUpType"
                  :key="item.value"
                  :label="$t(item.label)"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail'" :label="$t(`跟进对象`)" prop="dataextendContactsid" :rules="{ required: true, message: $t('请选择跟进对象'), 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">
              {{$t(tag.name)}}
            </el-tag>
            <contactsList style="float: left" @onSelect="onSelect" ref="listData" :selects="form.dataextend.contactsid" :sys_enterpriseid="sys_enterpriseid"></contactsList>
          </el-form-item>
          <el-form-item :label="$t(`跟进动态`)" prop="content" :rules="{ required: true, message: $t('请填写跟进动态'), 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="$t(`请输入跟进动态`)" autocomplete="off"></el-input>
          </el-form-item>
           <el-form-item :label="$t(`目的`)" prop="target" :rules="{ required: false, message: $t('请填写跟进目的'), 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="$t(`请输入跟进目的`)" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :label="$t(`过程`)" prop="content" :rules="{ required: false, message: $t('请填写跟进过程'), 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="$t(`请输入跟进过程`)" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :label="$t(`结果`)" prop="results" :rules="{ required: false, message: $t('请填写跟进结果'), 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="$t(`请输入跟进结果`)" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :label="$t(`下次跟进计划`)" prop="nextplan" :rules="{ required: false, message: $t('请填写下次跟进计划'), 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="$t(`请输入下次跟进计划`)" autocomplete="off"></el-input>
          </el-form-item>
          <div class="flex-align-center flex-between pionter" v-for="file in data.attinfos" :key="file.index">
            <div class="flex-align-center">
              <img width="30" :src="checkFileType(file.postfix) === 'file'?require('@/assets/file_icons/file.svg'):file.url" class="inline-16" alt="">
              <div class="file__link inline-16">
                <a :href="file.url">{{file.document}}</a>
                <p>{{(file.contentlength / 1024).toFixed(2)}}kb</p>
              </div>
            </div>
            <i style="color:red;" class="el-icon-delete" @click="deleteFile(file)"></i>
          </div>
          <upload
            :folderid="folderid"
            @upload="loading = true"
            btntype="icon"
            @onSuccess="onSuccess"
            :hidemediastock="false"
            :isFile="true"
            :bindData=" {ownertable: 'sys_datafollowup', ownerid: data.sys_datafollowupid,usetype: 'default'}"
            :bindDataFile="bindDataFile">
          </upload>
        </el-form>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="onClose" :disabled="loading">{{$t(`取 消`)}}</el-button>
        <el-button type="warning" size="small" @click="submitLog" :loading="loading">{{$t(`保 存`)}}</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import upload from '@/components/upload/hw_obs_upload.vue'
import previewImage from '@/components/previewImage/index.vue'
import contactsList from '@/template/projectChange/contactsList.vue'
export default {
  props:['data','ownertable','status','disabled','isOperation','bindDataFile'],
  components:{
    upload,
    previewImage,
    contactsList
  },
  data () {
    return {
      dialogFormVisible:false,
      loading:false,
      sys_enterpriseid:'',
      form:{
        content:'',
        type:'',
        dataextendContactsid:[],
        dataextend: {
          contactsid: [] // 跟进对象
        }//扩展参数
      },
      followUpType:[],
      selectTag:[],
      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
      attachmentids:[]
    }
  },

  methods:{
    onShow () {
      this.form = Object.assign({},this.form,this.data)
      console.log(this.form,'表单数据')
      this.selectTag = this.form.contacts
      this.form.dataextendContactsid = this.form.dataextend.contactsid
      this.queryFollowUpType()
    },
    /*获取跟进类型*/
    async queryFollowUpType(){
      const res = await this.$store.dispatch('optiontypeselect','followuptype')
      this.followUpType = res.data
    },
    onSuccess(res) {
      res.attinfos = JSON.parse(res.attinfos)
      this.attachmentids = [...this.attachmentids,...res.attinfos.data]
      this.loading = false
      this.$emit('onSuccess')
    },

    // 更新接口
     submitLog () {
      this.$refs.form.validate(async(valid)=>{
        if (!valid) return false
        let resource = this.$route.matched[1].meta.title
        const res = await this.$api.requested({
          "id": 20220930121601,
          "content": {
            "sys_datafollowupid":this.data.sys_datafollowupid,
            "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 // 跟进对象
            },
            "resource":resource
          }
        })
        this.tool.showMessage(res,()=>{
          this.form.content = ''
          this.dialogFormVisible = false
          this.$store.dispatch('bindFileToData',{
            "ownertable": 'sys_datafollowup',
            "ownerid": res.data.sys_datafollowupid,
            "usetype": 'default',
            "attachmentids": this.attachmentids

          }).then(rs=>{
            this.attachmentids = []
            this.dialogFormVisible = false
            this.$emit('onSuccess')
          })

        })
      })

    },
    checkFileType (type) {
      let arr = ['JPG','JPEG','PNG']
      if (arr.includes(type.toUpperCase())) {
        return 'img'
      } else {
        return 'file'
      }
    },
    async deleteFile (row) {
      const res = await this.$api.requested({
        "classname": "system.attachment.Attachment",
        "method": "deleteFileLink",
        "content": {
          "linksids":[row.linksid]
        }
      })
      this.tool.showMessage(res,()=>{
        this.data.attinfos.forEach(item=>{
          if (item.rowindex == row.rowindex){
            console.log('删除')
            this.data.attinfos.splice(item,1)
          }
        })
      })
    },
    onSelect(row){
      this.selectTag = row
      this.form.dataextend.contactsid = row.map(item=>item.sys_phonebookid)
      this.form.dataextendContactsid = this.form.dataextend.contactsid
      this.$refs.form.validateField('dataextendContactsid')
    },
    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)
          this.form.dataextendContactsid.splice(i,1)
          break
        }
      }
    },
    onClose(){
      this.dialogFormVisible = false
      this.selectTag = []
      this.form.dataextend.contactsid = []
      this.form.dataextendContactsid = []
      this.$refs.form.resetFields()
    }
  }
}

</script>
<style>
</style>
<style scoped>
.file__link,.file__link > a{
  color:#999;
  font-size: 12px;
  display:block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pionter{
  margin:6px 0;
  padding: 10px;
  transition: .2s linear;
  cursor: pointer;
  border-radius: 5px;
}
.pionter:hover{
  box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
}
/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>