storevisit-ui-mobile/src/views/week/assignAwait/JZfollowUp.vue

<template>
  <div class="bgcolor assignPage">
    <div class="navBarTOP">
      <van-nav-bar class="navBar" left-arrow :title="title" @click-left="onClickLeft" />
    </div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <!-- 客资详情 -->
    <assignAwaitDetail :infoData="infoData">
      <div class="info">
        跟进状态：
        <span v-if="infoData.isClose == 1">跟进完成</span>
        <span v-if="infoData.isClose == 0">跟进中</span>
        <span v-if="infoData.isClose == -1">未跟进</span>
      </div>
      <!-- 转交 -->
      <!-- v-if="infoData.customerClueStatus == 0 && postName && postName == '区域家装销售负责人'" -->
      <van-button type="info" size="small" plain class="centerBtn" @click="showPicker = true">
        转交下属
      </van-button>
    </assignAwaitDetail>
    <!-- 历史跟进记录 -->
    <p style="margin: 0 16px 8px; color: #888" v-if="infoData.userCustomerClueList">
      该客资历史跟进记录
    </p>
    <van-cell-group inset class="cardclewContentCell">
      <div style="border-radius: 6px; overflow: hidden">
        <van-cell
          is-link
          v-for="(item, index) in infoData.userCustomerClueList"
          :key="index"
          @click="viewFn(item.userCustomerClueId)">
          <template #title>
            <span class="custom-title">{{ item.nickName }}</span>
          </template>
          <div class="cardContent">
            <p class="textLeft" style="padding-bottom: 0px; margin: 0">{{ item.createTime }}</p>
          </div>
        </van-cell>
      </div>
    </van-cell-group>
    <!-- 跟进任务填写 -->
    <div class="assign">
      <div class="followUp required">跟进结果</div>
      <!-- <div
        class="taskGather"
        v-if="taskGather && taskGather.customerClueItemList.customerClueOptionList">
        <radioGroup
          :clueOptionList="taskGather.customerClueItemList.customerClueOptionList"></radioGroup>
      </div> -->
      <div v-if="infoData.isClose != 1" class="tc" style="padding: 0 16px">
        <van-button class="submitBtn" block type="info" color="#0057ba" @click="onSubmit">
          提交
        </van-button>
      </div>
    </div>
    <!-- 转交下属 -->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        value-key="nickName"
        :columns="assignTypeData"
        @confirm="confirm"
        @cancel="showPicker = false" />
    </van-popup>
    <!-- 客资跟进历史 -->
    <van-dialog
      v-model="showView"
      title="客资历史"
      show-cancel-button
      cancel-button-text="关闭"
      :show-confirm-button="false"
      class="dialogz">
      <followUpHistory :historyId="historyId"></followUpHistory>
    </van-dialog>
  </div>
</template>

<script>
import { getCustomerClueInfoById } from '@/api/clew';
import { getDictOption } from '@/api/index';
import assignAwaitDetail from './assignAwaitDetail.vue';
import {
  selectCustomerClueInfoById,
  selectSubUserList,
  allocationSubCustomer,
} from '@/api/assignAwait';
import { mapState } from 'vuex';
import radioGroup from './radioGroup';
import followUpHistory from './followUpHistory';

export default {
  name: 'assignPage',
  components: {
    assignAwaitDetail,
    radioGroup,
    followUpHistory,
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  data() {
    return {
      id: '',
      infoData: {},
      collectionItemList: [],
      title: '',
      postName: '',
      showPicker: false,
      assignTypeData: [],
      taskGather: null, //跟进任务集合
      showView: false,
      historyId: '',
    };
  },
  watch: {},
  activated() {
    this.id = this.$route.query.id;
    this.postName = localStorage.getItem('postName');
    this.getCustomerClueInfoById();
    this.getSelectCustomerClueInfoById();
  },
  methods: {
    getCustomerClueInfoById() {
      this.id = this.$route.query.id;
      this.collectionAnswerlisd = [];
      this.collectionItemList = [];
      getCustomerClueInfoById({ customerClueInfoId: this.id }).then((response) => {
        if (response.code == 200) {
          this.infoData = response.data;
          this.title = response.data.name;
          if (response.data.customerClue != null) {
            this.collectionItemList = response.data.customerClue.customerClueItemList;
          } else {
            this.collectionItemList = [];
          }
          //  获取转交下属数据
          if (
            this.infoData.customerClueStatus == 0 &&
            this.postName &&
            this.postName == '区域家装销售负责人'
          )
            this.getSelectSubUserList();
        } else {
          this.$toast(res.msg);
        }
      });
    },
    getSelectCustomerClueInfoById() {
      selectCustomerClueInfoById({ customerClueInfoId: this.id }).then((res) => {
        if (res.code == 200) {
          this.taskGather = res.data;
        } else {
          this.$toast(res.msg);
        }
      });
    },
    getSelectSubUserList() {
      selectSubUserList().then((res) => {
        if (res.code == 200) {
          this.assignTypeData = res.data ? res.data : [];
        } else {
          this.$toast(res.msg);
        }
      });
    },
    confirm(value) {
      allocationSubCustomer({
        userId: value.userId, //	string	用户ID
        customerClueInfoId: this.id, //	string	客资主键ID
      }).then((res) => {
        if (res.code == 200) {
          this.$toast(res.msg);
          this.onClickLeft();
        } else {
          this.$toast(res.msg);
        }
      });
    },
    // 查看历史跟进记录
    viewFn(val) {
      //   this.viewTextShow = false;
      this.historyId = val;
      this.showView = true;
    },
    onSubmit() {
      //   allocationCustomer({
      //     userId: this.assignUserItem.userId || '', //	string	用户ID
      //     customerClueInfoId: this.id, //	string	客资主键ID
      //     customerClassify: this.activaAssignTypeItem.dictValue || '', //	string	客资类型，（取值页面字典选择的值 jz_customer_type）
      //   }).then((res) => {
      //     if (res.code == 200) {
      //       this.$toast(res.msg);
      //       this.onClickLeft();
      //     } else {
      //       this.$toast(res.msg);
      //     }
      //   });
    },
    // 校验错误返回信息
    onFailed(errorInfo) {
      console.log('failed', errorInfo);
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped lang="scss">
.assignPage {
}
</style>
<style lang="scss">
.assignPage {
  .van-field__label {
    width: 100px;
    &::before {
      content: '*';
      color: red;
    }
  }
  .centerBtn {
    float: right;
    background: #0057ba;
    border-color: #0057ba;
    color: #fff;
    margin-top: -33px;
    border-radius: 5px;
  }
}
</style>