yos_web/src/SManagement/orderclue_detail/components/editFollow.vue

<template>
  <div class="follow" style="margin-right:10px">
    <el-button size="mini" type="text" @click="followBtn" :disabled="disabled">
      <svg t="1727070702944" class="icon" viewBox="0 0 1024 1024" style="vertical-align: middle" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12802" 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="12803"></path></svg>
      <span style="color: #333333;font-size: 14px;margin-left: 5px;vertical-align: middle">编辑</span></el-button>
    <el-drawer title="线索跟进" append-to-body :visible.sync="dialogVisible" size="600px" :before-close="handleClose" :show-close="false">
      <div class="drawer__panel">
        <el-form :model="param" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm"
                 label-position="right">
          <el-form-item label="跟进时间">
            <el-date-picker v-model="timer" type="datetime" format="yyyy-MM-dd HH:mm:ss"  size="small">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="跟进类型" prop="followupmode">
            <el-select v-model="param.followupmode" placeholder="请选择方式" size="small">
              <el-option v-for="(item,index) in followTypeList" :key="index" :label="item.value" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="本次跟进结果" prop="logtype">
            <el-radio-group v-model="param.logtype">
              <el-radio label="跟进">跟进</el-radio>
            </el-radio-group>
          </el-form-item> -->
          <el-form-item label="跟进内容" prop="content" >
            <el-input type="textarea" v-model="param.content" size="small" placeholder="请填写跟进内容"></el-input>
          </el-form-item>
<!--          <div class="flex-align-center flex-between pionter" v-for="file in data.attinfo" :key="file.index">
            <div class="flex-align-center">
              <img width="38" :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>-->
          <file-item
              :auto="true"
              :isDownLoad="true"
              :isDelete='true'
              :fileData="data.attinfo"
              @deleteFile="handleRemove">
          </file-item>
          <upload
              ref="upload"
              @clickUpload="loading = true"
              @uploadEnd="loading = false"
              :folderid="folderid"
              @onSuccess="onSuccess"
              :bindData=" {ownertable: 'sat_ordercluefollowuplog', ownerid: data.sat_ordercluefollowuplogid,usetype: 'default'}"
              type="button">
          </upload>
        </el-form>

      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="dialogVisible = false" class="normal-btn-width" :disabled="loading">取 消</el-button>
        <el-button size="small" type="primary" @click="followAction" class="normal-btn-width" :loading="loading">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import upload from './upload'
import FileItem from '@/SManagement/orderclue/components/file/index3'
export default {
  name: "editFollow",
  components:{upload,FileItem},
  data () {
    return {
      loading:false,
      bindData:{},
      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
      param: {
        "sat_orderclueid": 4,
        "content": "",
        "createdate":'',
        "followupmode": "", //当面拜访、电话沟通
        "logtype": "跟进", //跟进、成交、丢单、无效
        "competitor": "",
        "latitude":"",//经度，可选
        "longitude":"",//纬度，可选
        "address":"",//解析地址,
        "sat_ordercluefollowuplogid":0//传0新增
      },
      timer: '',
      rules: {
        content: [
          { required: true, message: '内容不能为空', trigger: 'blur' },
        ],
        followupmode: [
          { required: true, message: '内容不能为空', trigger: 'blur' },
        ],
        logtype: [
          { required: true, message: '内容不能为空', trigger: 'blur' },
        ],
        competitor: [
          { required: true, message: '内容不能为空', trigger: 'blur' },
        ],
      },
      time: '',
      dialogVisible: false,
      followTypeList: []
    }
  },
  props: {
    detailInfo: {
      default () {
        return []
      },
    },
    position: {
      type: String
    },
    updataList: {
      type: Function
    },
    getDetail: {
      type: Function
    },
    disabled: Boolean,
    data:{}
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.$refs['ruleForm'].resetFields()
        this.$refs.upload.fileLinkList = []
        this.$refs.upload.fileList = []

      }
    }
  },
  computed: {
  },
  created () {
    /*this.getFollowType()*/
    this.timer = new Date()

  },
  methods: {
    async getFollowType () {
      let res = await this.$store.dispatch('optiontypeselect', 'followupmode')
      this.followTypeList = res.data
    },
    followBtn () {
      this.dialogVisible = true
      this.getFollowType()
      this.param = Object.assign({},this.param,this.data)
    },
    handleClose () {
      this.dialogVisible = false
    },
    followAction () {
      this.$refs.ruleForm.validate(async val => {
        if (!val) return
        this.loading = true
        this.param.sat_orderclueid = this.detailInfo.sat_orderclueid
        this.param.createdate = this.timer
        this.param.createdate = `${this.timer.getFullYear()}-${this.timer.getMonth() + 1}-${this.timer.getDate()} ${this.timer.getHours()}:${this.timer.getMinutes()}:${this.timer.getSeconds()}`
        let res = await this.$api.requested({
          "id":20221208100602,
          "content": this.param
        })
        if (res.code == 0){
          this.loading = false
          this.tool.showMessage(res,()=>{})
        }else {
          this.tool.showMessage(res,()=>{
            this.bindData = {
              "ownertable": 'sat_ordercluefollowuplog',
              "ownerid": res.data.sat_ordercluefollowuplogid,
              "usetype": 'default',
            }
            this.loading = false
            this.$refs['upload'].toUpload(() => {
              this.loading = false
              this.$emit('onSuccess')
              this.dialogVisible = false
            })
          })
        }

      })
    },
    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.queryLogs()*/
      })
    },
    handleRemove (index) {
      this.data.attinfo = this.data.attinfo.filter((e,idx)=>{
        if (idx !== index) {
          return e
        }
      })
      console.log(this.data.attinfo);

      this.fileLinkList = this.fileLinkList.filter((e,idx)=>{
        if (idx !== index) {
          return e
        }
      })
    },
  },
}
</script>

<style scoped>
.follow {
  display: inline-block;
}
/deep/.el-input,.el-select {
  width: 100%;
}
</style>