yos_web/src/components/normal-basic-layout-new/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 :label="$t(`关联线索`)" prop="sat_orderclueids">
            <el-tag
                style="float: left;margin-right: 5px;margin-bottom: 5px"
                v-for="tag in clueTag"
                :key="tag.rowindex + 1"
                closable
                @close="closeAssociationTag(tag,'线索')"
                :type="tag.type">
              {{$t(tag.enterprisename)}}
            </el-tag>
            <tableDataAdd :tablecols="tool.tabelCol($route.name).selectClue.tablecols" btnTitle="添加" :param="paramClue" @onSelect="selectAssociation"
                          :selectData="clueTag" type="线索" :isEdit="true"></tableDataAdd>
          </el-form-item>
          <el-form-item :label="$t(`关联客户`)" prop="sa_customersids">
            <el-tag
                style="float: left;margin-right: 5px;margin-bottom: 5px"
                v-for="tag in customersTag"
                :key="tag.rowindex + 2"
                closable
                @close="closeAssociationTag(tag,'客户')"
                :type="tag.type">
              {{$t(tag.name)}}
            </el-tag>
            <tableDataAdd :tablecols="tool.tabelCol($route.name).selectCustomers.tablecols" btnTitle="添加" :param="paramCustomers" @onSelect="selectAssociation"
                          :selectData="customersTag" type="客户" :isEdit="true"></tableDataAdd>
          </el-form-item>
          <el-form-item :label="$t(`关联项目`)" prop="sa_projectids">
            <el-tag
                style="float: left;margin-right: 5px;margin-bottom: 5px"
                v-for="tag in projectTag"
                :key="tag.rowindex + 3"
                closable
                @close="closeAssociationTag(tag,'项目')"
                :type="tag.type">
              {{$t(tag.projectname)}}
            </el-tag>
            <tableDataAdd :tablecols="tool.tabelCol($route.name).selectProject.tablecols" btnTitle="添加" :param="paramProject" @onSelect="selectAssociation"
                          :selectData="projectTag" type="项目" :isEdit="true"></tableDataAdd>
          </el-form-item>
          <el-form-item v-if="$route.path === '/projectChangeDetail' || $route.path === '/customerDetail' || $route.path === '/PublicCustomerDetail' || $route.path === '/phonebookDetail'" :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="dataextend.contactsid" :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' && $route.path !== '/phonebookDetail'">
            <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' || $route.path === '/phonebookDetail'">
            <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' || $route.path === '/phonebookDetail'">
            <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' || $route.path === '/phonebookDetail'">
            <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' || $route.path === '/phonebookDetail'">
            <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"
            :bindData=" {ownertable: 'sys_datafollowup', ownerid: data.sys_datafollowupid,usetype: 'default'}">
          </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'
import tableDataAdd from '@/components/tableDataAdd/index'
export default {
  props:['data','ownertable','status','ownerid','disabled','isOperation'],
  components:{
    upload,
    previewImage,
    contactsList,
    tableDataAdd
  },
  data () {
    return {
      dialogFormVisible:false,
      loading:false,
      sys_enterpriseid:'',
      form:{
        content:'',
        type:'',
        dataextend: {
          contactsid: [], // 跟进对象
          sat_orderclueids: [],
          sa_customersids: [],
          sa_projectids: []
        }//扩展参数
      },
      followUpType:[],
      selectTag:[],
      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
      attachmentids:[],
      clueTag:[],
      customersTag:[],
      projectTag:[],
      /*关联线索列表*/
      paramClue:{
        "content": {
          "pageNumber": 1,
          "pageSize": 50,
          "where": {
            "condition": ""
          }
        },
        "id": 2025042409073602,
      },
      /*关联客户列表*/
      paramCustomers:{
        "content": {
          "pageNumber": 1,
          "pageSize": 50,
          "where": {
            "condition": ""
          },
          "nocache": true
        },
        "id": 2025042409074102,
      },
      /*关联项目*/
      paramProject:{
        "content": {
          "pageNumber": 1,
          "pageSize": 50,
          "where": {
            "condition": ""
          },
          "nocache": true
        },
        "id": 2025042409074702,
      },
    }
  },

  methods:{
    onShow () {
      this.form = Object.assign({},this.form,this.data)
      console.log(this.form,'表单数据')
      this.selectTag = this.form.contacts
      this.clueTag = this.data.sat_orderclue
      this.customersTag = this.data.sa_customers
      this.projectTag = this.data.sa_project
      this.queryFollowUpType()
    },
    /*获取跟进类型*/
    async queryFollowUpType(){
      const res = await this.$store.dispatch('optiontypeselect','followuptype')
      this.followUpType = res.data
    },
    onSuccess(res,type) {
      res.attinfos = type == '删除'?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 = ''
        if (this.$route.path == '/phonebookDetail'){
          this.form.dataextend.contactsid = [this.$route.query.id]
          resource = '通讯录'
        }
        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, // 跟进对象
              "sat_orderclueids":this.form.dataextend.sat_orderclueids,
              "sa_customersids":this.form.dataextend.sa_customersids,
              "sa_projectids":this.form.dataextend.sa_projectids
            },
            "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,async ()=>{
        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.contactsid)
      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()
    },
    closeAssociationTag(row,val){
      if (val == '线索'){
        this.form.dataextend.sat_orderclueids = []
        for (var i=0;i<this.clueTag.length;i++){
          if (row.sat_orderclueid == this.clueTag[i].sat_orderclueid){
            this.clueTag.splice(i,1)
            // this.form.dataextend.sat_orderclueids.splice(i,1)
            console.log(this.clueTag)
            console.log(this.form.dataextend.sat_orderclueids)
            break
          }
        }
        this.form.dataextend.sat_orderclueids = this.clueTag.map(item=>item.sat_orderclueid)
      }else if (val == '客户'){
        this.form.dataextend.sa_customersids = []
        for (var i=0;i<this.customersTag.length;i++){
          if (row.sa_customersid == this.customersTag[i].sa_customersid){
            this.customersTag.splice(i,1)
            // this.form.dataextend.sa_customersids.splice(i,1)
            break
          }
        }
        this.form.dataextend.sa_customersids = val.map(item=>item.sa_customersid)
      }else if (val == '项目'){
        this.form.dataextend.sa_projectids = []
        for (var i=0;i<this.projectTag.length;i++){
          if (row.sa_projectid == this.projectTag[i].sa_projectid){
            this.projectTag.splice(i,1)
            // this.form.dataextend.sa_projectids.splice(i,1)
            break
          }
        }
        this.form.dataextend.sa_projectids = val.map(item=>item.sa_projectid)
      }
    },
    selectAssociation(val,type){
      console.log(val)
      if (type == '线索'){
        this.clueTag = val
        this.form.dataextend.sat_orderclueids = val.map(item=>item.sat_orderclueid)
      }else if (type == '客户'){
        this.customersTag = val
        this.form.dataextend.sa_customersids = val.map(item=>item.sa_customersid)
      }else if (type == '项目'){
        this.projectTag = val
        this.form.dataextend.sa_projectids = val.map(item=>item.sa_projectid)
      }
      console.log(this.clueTag,'clueTag')
    }
  }
}

</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>