Merge branch 'CRM_13.9'

src/api/modules/statisticApi.js

@@ -44,12 +44,69 @@ const dataMainInterface = {
 	 * @param {RegionType } params 
 	 * @param {StartDate} params 
 	 * @param {DataType} params 
-	 * @returns 
+	 * @param {IsConfirm} params  是否确认续约: -1-默认全部; 0-待确认; 1-已确认
+	 * @param {CompanyAscribeId} params  归因Id
+	 * @returns  
 	 */
 	incrementalList:params => {
 		return http.get('/statistic_report/incremental_company_list',params);
 	},
 	/**
+ * 获取未续约备注列表
+ * @param {CompanyId} params 公司ID
+ * @param {ProductId} params 产品ID 1：FICC ，2权益
+ * @returns 
+ */
+	getNotRenewedRemarkList:params => {
+		return http.get('/custom/company_no_renewed_note/list',params);
+	},
+	/**
+ * 添加未续约备注
+ * @param {CompanyId} params 公司ID
+ * @param {ProductId} params 产品ID 1：FICC ，2权益
+ * @param {Content} params 内容
+ * @returns 
+ */
+	addNotRenewedRemark:params => {
+		return http.post('/custom/company_no_renewed_note/add',params);
+	},
+	/**
+ * 获取归因列表
+ * @param {KeyWord} params 
+ * @returns  
+ */
+	getAscribList:params => {
+		return http.get('/custom/company_ascribe/list',params);
+	},
+	/**
+	 * 新增归因
+	 * @param {KeyWord} params 
+	 * @returns  
+	*/
+	addAscrib:params => {
+		return http.post('/custom/company_ascribe/add',params);
+	},
+	/**
+	 * 修改归因标签
+	* @param {CompanyId} params 公司ID
+	* @param {ProductId} params 产品ID 1：FICC ，2权益
+	* @param {Content} params 内容
+	* @param {CompanyAscribeId} params 归因Id
+	 * @returns  
+	*/
+	addNoRenewedAscribe:params => {
+		return http.post('/custom/company_no_renewed_ascribe/add',params);
+	},
+	/**
+	 * 归因标签详情
+	* @param {CompanyId} params 公司ID
+	* @param {ProductId} params 产品ID 1：FICC ，2权益
+	 * @returns  
+	*/
+	infoNoRenewedAscribe:params => {
+		return http.get('/custom/company_no_renewed_ascribe/detail',params);
+	},
+	/**
 	 * 获取收入统计列表接口
 	 * @param {PageSize} params 
 	 * @param {CurrentIndex} params 

src/views/dataReport_manage/components/noRenewalReasonDia/addRemark.vue

@@ -0,0 +1,73 @@
+<template>
+  <el-dialog
+  :visible.sync="isShow"
+  @close="$emit('update:isShow',false)"
+  :modal-append-to-body='false'
+  width="652px"
+  title="添加备注">
+    <div class="dialog-box">
+      <el-form :model="remarkForm" ref="remarkFormRef">
+        <el-form-item prop="text" :rules="{required:true,message:'备注不能为空',trigger:'blur'}">
+          <el-input v-model.trim="remarkForm.text" placeholder="请输入备注信息" type="textarea"
+          style="width: 505px;" :rows="9"></el-input>
+        </el-form-item>
+      </el-form>
+      <div class="dialog-footer">
+        <el-button @click="$emit('update:isShow',false)" class="dialog-footer-button">取消</el-button>
+        <el-button @click="save" type="primary" class="dialog-footer-button" style="margin-left: 30px;">确定</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  export default{
+    props:{
+      isShow:{
+        type:Boolean,
+        required:true
+      }
+    },
+    data() {
+      return {
+        remarkForm:{
+          text:''
+        }
+      }
+    },
+    watch:{
+      isShow(value){
+        if(value){
+          this.remarkForm.text=""
+          this.$refs.remarkFormRef && this.$refs.remarkFormRef.clearValidate()
+        }
+      }
+    },
+    methods: {
+      save(){
+        this.$refs.remarkFormRef.validate(valid=>{
+          if(valid){
+            this.$emit("saveRemark",this.remarkForm.text)
+            this.$refs.remarkFormRef.resetFields()
+          }
+        })
+      }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .dialog-box{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    .dialog-footer{
+      margin: 30px 0;
+      .dialog-footer-button{
+        height: 40px;
+        width: 120px;
+      }
+    }
+  }
+</style>

src/views/dataReport_manage/components/noRenewalReasonDia/confirmedNoRenewal.vue

@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <el-dialog
+    :visible.sync="isShow"
+    @close="$emit('update:isShow',false)"
+    :modal-append-to-body='false'
+    width="652px"
+    title="确认不续约">
+      <div class="dialog-box">
+        <el-form :model="labelForm" ref="confirmNoRenewalFormRef">
+          <el-form-item prop="reason" :rules="{required:true,message:'不续约归因不能为空',trigger:'change'}">
+            <div style="display: flex;align-items: center;justify-content: space-between;">
+              <el-select v-model="labelForm.reason" placeholder="不续约归因" style="width: 424px;">
+                <el-option :label="item.AscribeContent" :value="item.CompanyAscribeId" v-for="item in noRenewalReasonList" :key="item.reasonId"></el-option>
+              </el-select>
+              <span class="create-reason" @click="createReason">新建</span>
+            </div>
+          </el-form-item>
+          <el-form-item prop="detailReason" :rules="{required:true,message:'详细原因不能为空',trigger:'blur'}">
+            <el-input v-model="labelForm.detailReason" placeholder="请描述详细原因" type="textarea"
+            style="width: 505px;" :rows="9"></el-input>
+          </el-form-item>
+        </el-form>
+        <div class="dialog-footer">
+          <el-button @click="$emit('update:isShow',false)" class="dialog-footer-button">取消</el-button>
+          <el-button @click="save" type="primary" class="dialog-footer-button" style="margin-left: 30px;">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <el-dialog
+    :visible.sync="createReasonShow"
+    @close="resetReasonForm"
+    :modal-append-to-body='false'
+    width="652px"
+    title="新建归因">
+      <div class="dialog-box">
+        <el-form :model="remarkForm" ref="confirmReasonRef">
+          <el-form-item prop="AscribeContent" :rules="{required:true,message:'归因不能为空',trigger:'blur'}">
+            <el-autocomplete class="autocomplete-input" v-model.trim="remarkForm.AscribeContent" 
+            :fetch-suggestions="querySearch" placeholder="请输入归因名称"></el-autocomplete>
+          </el-form-item>
+        </el-form>
+        <div class="dialog-footer">
+          <el-button @click="createReasonShow=false" class="dialog-footer-button">取消</el-button>
+          <el-button @click="saveReason" type="primary" class="dialog-footer-button" style="margin-left: 30px;">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+
+</template>
+
+<script>
+import { dataMainInterface } from '@/api/api.js'
+
+  export default{
+    props:{
+      isShow:{
+        type:Boolean,
+        required:true
+      },
+      dataForm:{
+        type:Object,
+        required:true
+      },
+      noRenewalReasonList:{
+        type:Array,
+        required:true
+      }
+    },
+    watch:{
+      isShow(value){
+        if(value){
+          this.labelForm.reason = this.dataForm.reason
+          this.labelForm.detailReason = this.dataForm.detailReason
+          this.$nextTick(()=>{
+            this.$refs.confirmNoRenewalFormRef && this.$refs.confirmNoRenewalFormRef.clearValidate()
+          })
+        }
+      }
+    },
+    computed: {
+      Role() {
+        let role = localStorage.getItem('Role') || '';
+        return role;
+      },
+      //确认未续约权限
+      canConfirmNotRenewed(){
+        return ['admin','rai_admin'].includes(this.Role)
+      }
+	  },
+    data() {
+      return {
+        remarkForm:{
+          AscribeContent:''
+        },
+        labelForm:{
+          reason:'',
+          detailReason:''
+        },
+        createReasonShow:false
+      }
+    },
+    methods: {
+      createReason(){
+        this.createReasonShow=true
+      },
+      resetReasonForm(){
+        this.remarkForm.AscribeContent=""
+        this.$refs.confirmReasonRef.clearValidate()
+      },
+      querySearch(queryString,cb){
+        if(!queryString){
+          cb(this.noRenewalReasonList.map(item => {
+            return {value:item.AscribeContent}
+          }))
+        }else{
+          // dataMainInterface.getAscribList({KeyWord:queryString}).then(res=>{
+          //   if(res.Ret == 200){
+          //     let suggestionsReason = res.Data.List || []
+          //     cb(suggestionsReason.map(item => {
+          //       return {value:item.AscribeContent}
+          //     }))
+          //   }
+          // }).catch(()=>{
+          //   cb([])
+          // })
+          cb(this.noRenewalReasonList.map(item => {
+            if(item.AscribeContent.indexOf(queryString)!=-1){
+              return {value:item.AscribeContent}
+            }
+          }).filter(Boolean))
+        }
+      },
+      saveReason(){
+        this.$refs.confirmReasonRef.validate(valid=>{
+          if(valid){
+            this.remarkForm.AscribeContent=this.remarkForm.AscribeContent.replace(/\s*/g,"")
+            dataMainInterface.addAscrib({AscribeContent:this.remarkForm.AscribeContent})
+            .then(res=>{
+              if(res.Ret ==200){
+                this.$message.success("新建成功")
+                this.createReasonShow=false
+                this.$emit("refreshReasonList")
+              }
+            })
+          }
+        })
+      },
+      save(){
+        if((this.Role!='rai_admin' && this.dataForm.reason) || (!this.canConfirmNotRenewed)){
+          this.$message.error("仅管理员可修改")
+          return 
+        }
+        this.$refs.confirmNoRenewalFormRef.validate(valid=>{
+          if(valid){
+            this.$emit("saveLabel",{CompanyAscribeId:this.labelForm.reason,Content:this.labelForm.detailReason})
+          }
+        })
+      }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .dialog-box{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    .create-reason{
+      cursor: pointer;
+      color: #409EFF;
+      font-size: 14px;
+      margin-right: 20px;
+    }
+    .dialog-footer{
+      margin: 30px 0;
+      .dialog-footer-button{
+        height: 40px;
+        width: 120px;
+      }
+    }
+  }
+</style>
+<style lang="scss">
+.autocomplete-input{
+  .el-input{
+    width: 505px;
+  }
+}
+
+</style>

src/views/dataReport_manage/components/noRenewalReasonDia/viewRemark.vue

@@ -0,0 +1,62 @@
+<template>
+  <el-dialog
+  :visible.sync="isShow"
+  @close="$emit('update:isShow',false)"
+  :modal-append-to-body='false'
+  width="652px"
+  title="历史备注">
+    <div class="dialog-box">
+      <el-table
+        :data="tableData"
+        border
+        max-height="360">
+        <el-table-column label="备注信息" prop="Content" align="center">
+          <template slot-scope="{row}">
+            {{row.Content}}
+          </template>
+        </el-table-column>
+        <el-table-column label="备注时间" prop="CreateTime" align="center">
+          <template slot-scope="{row}">
+            {{row.CreateTime}}
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  export default{
+    props:{
+      isShow:{
+        type:Boolean,
+        required:true
+      },
+      tableData:{
+        type:Array,
+        default:()=>[]
+      }
+    },
+    data() {
+      return {
+ 
+      }
+    },
+    methods: {
+      save(){
+        this.$refs.remarkFormRef.validate(valid=>{
+          if(valid){
+            this.$emit("saveRemark",this.remarkForm.text)
+            this.$refs.remarkFormRef.resetFields()
+          }
+        })
+      }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .dialog-box{
+    padding: 0 35px 20px;
+  }
+</style>

src/views/dataReport_manage/configdata.js

@@ -67,6 +67,13 @@ export const incrementTableColums = [
 		key:"ProductName",
 		widthsty:'100px'
 	},
+	{
+		label:"不续约归因",
+		key:"AscribeContent",
+		dataType:"未续约客户",
+		notRenewedConfirm:1,
+		sort:true
+	},
 	{
 		label:"客户状态",
 		key:"Status",
@@ -114,13 +121,20 @@ export const incrementTableColums = [
 		dataType:"未续约客户",
 		sort:true
 	},
+	{
+		label:"备注",
+		key:"Remark",
+		dataType:"未续约客户",
+		widthsty:'100px',
+		sort:true
+	},
 	{
 		label:"未续约说明",
 		key:"RenewalReason",
 		dataType:"未续约客户",
 		widthsty:'300px',
 		sort:true
-	},
+	}
 ]
 /* 存量客户表格列 */
 export const stockTableColums = [
@@ -136,6 +150,13 @@ export const stockTableColums = [
 		key:"ProductName",
 		widthsty:'100px'
 	},
+	{
+		label:"不续约归因",
+		key:"AscribeContent",
+		dataType:"未续约客户",
+		notRenewedConfirm:1,
+		sort:true
+	},
 	{
 		label:"客户状态",
 		key:"Status",
@@ -161,6 +182,13 @@ export const stockTableColums = [
 		key:"EndDate",
 		dataType:"未续约客户"
 	},
+	{
+		label:"备注",
+		key:"Remark",
+		dataType:"未续约客户",
+		widthsty:'100px',
+		sort:true
+	},
 	{
 		label:"未续约说明",
 		key:"RenewalReason",

src/views/dataReport_manage/incrementalList.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="dataReport-container">
+	<div class="dataReport-container" id="dataReport-container">
 		<div class="dataReport-top">
 			<a :href="exportExcel" download>
 				<button class="button-sty act">导出EXCEL</button>
@@ -133,7 +133,22 @@
 				</el-row>
 			</div>
 			<div class="tabs-box" v-if="filterObj.data_type=='未续约客户'">
-				<span @click="tabsHandler(item)" :class="tabsActiveName===item.value ? 'active':''" v-for="item in tabsList" :key="item">{{item.name}}({{item.name==='试用'?NotRenewalTryOut:NotRenewalNotTryOut}})</span>
+				<el-radio-group v-model="isNotRenewedConfirm" class="tabs-box-confirm" @change="notRenewedConfirmChange">
+					<el-radio-button :label="1">已确认</el-radio-button>
+					<div class="center-line"></div>
+					<el-radio-button :label="0">待确认</el-radio-button>
+				</el-radio-group>
+				<div class="tabs-box-status" v-show="isNotRenewedConfirm">
+					<el-select v-model="noRenewalReasonId" placeholder="请选择不续约归因"
+					clearable @change="getTableData" style="width: 240px;margin-right: 50px;">
+						<el-option :label="item.AscribeContent" :value="item.CompanyAscribeId"
+						v-for="item in noRenewalReasonList" :key="item.reasonId"></el-option>
+					</el-select>
+					<span @click="tabsHandler(item)" :class="tabsActiveName===item.value ? 'active':''" 
+					v-for="item in tabsList" :key="item">
+						{{item.name}}({{item.name==='试用'?NotRenewalTryOut:NotRenewalNotTryOut}})
+					</span>
+				</div>
 			</div>
 			<el-table
 				:data="tableData"
@@ -148,7 +163,7 @@
 				:label="item.label"
 				:width="item.widthsty"
 				align="center"
-				v-if="!item.dataType || item.dataType === filterObj.data_type">
+				v-if="controlTableColumnShow(item)">
 					<template slot-scope="scope">
 						<span 
 							:style="item.textsty" 
@@ -175,6 +190,17 @@
 								{{scope.row.PackageDifference}}
 							</div>
 						</div>
+						<div v-else-if="item.key==='Remark' " class="remark-row">
+							<span class="remark-text" @click="viewHistoryRemarkFun(scope.row)" v-if="scope.row.IsShowNoRenewedNote">...</span>
+							<span class="operation-button" v-show="canConfirmNotRenewed && (!isNotRenewedConfirm)"
+							 style="margin-right: 0;" @click="addRemarkFun(scope.row)">添加</span>
+						</div>
+						<div v-else-if="item.key=='AscribeContent'">
+							<span style="color: #409EFF;cursor: pointer;"
+								@click="editReasonLabel(scope.row)" >
+								{{scope.row[item.key]}}
+							</span>
+						</div>
 						<span 
 							v-else 
 							:style="item.textsty" 
@@ -186,6 +212,14 @@
 					</template>
 				</el-table-column>
 			</template>
+			<el-table-column label="操作" width="180px" align="center"
+			v-if="canConfirmNotRenewed && (!isNotRenewedConfirm) && filterObj.data_type =='未续约客户'" >
+				<template slot-scope="scope">
+					<div class="operation-row">
+						<span class="operation-button" @click="confirmedNoRenewalFun(scope.row)">确认不续约</span>
+					</div>
+				</template>
+			</el-table-column>
 				<div slot="empty" style="lineHeight:44px;margin:60px 0;color:#999;">
 					<img src="~@/assets/img/cus_m/nodata.png" alt="" style="display:block;width:160px;height:128px;margin: auto;">
 					<span>暂无数据</span>
@@ -200,6 +234,13 @@
 		</div>
 		<!-- 未续约说明列表弹窗 -->
 		<renewalListDia :isShow.sync="isRenewalShow" :rowInfo="rowInfo"/>
+		<!-- 添加备注弹窗 -->
+		<addRemark :isShow.sync="isAddRemarkShow" @saveRemark="saveRemark"  />
+		<!-- 历史备注弹窗 -->
+		<viewRemark :isShow.sync="isViewRemarkShow" :tableData="historyRemarkList" />
+		<!-- 确认不续约弹窗 -->
+		<confirmedNoRenewal :isShow.sync="isConfirmNoRenewalShow" :dataForm="confirmNoRenewalForm" 
+			:noRenewalReasonList="noRenewalReasonList" @refreshReasonList="getNORenewalReasonList" @saveLabel="saveLabel" />
 	</div>
 </template>
 
@@ -208,11 +249,15 @@ import { incrementTableColums } from './configdata.js'
 import { dataMainInterface,customInterence } from '@/api/api.js'
 import mPage from '@/components/mPage.vue'
 import renewalListDia from './components/renewalListDia.vue'
+import addRemark from './components/noRenewalReasonDia/addRemark.vue'
+import viewRemark from './components/noRenewalReasonDia/viewRemark.vue'
+import confirmedNoRenewal from './components/noRenewalReasonDia/confirmedNoRenewal.vue'
+
 var moment = require('moment');
 moment().format();
 export default {
 	name:'',
-	components: {mPage,renewalListDia},
+	components: {mPage,renewalListDia,addRemark,viewRemark,confirmedNoRenewal},
 	computed: {
 		exportExcel() {
 			let baseUrl = process.env.API_ROOT + "/statistic_report/incremental_company_list";
@@ -234,6 +279,8 @@ export default {
 				DataType: this.filterObj.data_type == '新增试用客户' ? '新增试用' : this.filterObj.data_type,
 				Keyword:this.searchVal,
 				IsExport:true,
+				IsConfirm:this.filterObj.data_type=='未续约客户'?1:-1,
+				CompanyAscribeId:this.noRenewalReasonId
 			};
 			for (let key in obj) {
 				paramStr = `${paramStr}&${key}=${obj[key]}`;
@@ -252,6 +299,10 @@ export default {
 		ManageType() {
 			return localStorage.getItem('ManageType') || '';
 		},
+		//确认未续约权限
+		canConfirmNotRenewed(){
+			return ['admin','rai_admin'].includes(this.Role)
+		}
 	},
 	data () {
 		return {
@@ -322,6 +373,21 @@ export default {
 			tabsActiveName:'试用',
 			NotRenewalNotTryOut:0,//冻结流失的人数
 			NotRenewalTryOut:0,//试用的人数
+			isNotRenewedConfirm:1,//未续约的是否已确认
+			noRenewalReasonList:[],
+			noRenewalReasonId:'',
+			selectItemRow:{},// 当前选中的row
+			// 添加备注
+			isAddRemarkShow:false,
+			//历史备注
+			isViewRemarkShow:false,
+			historyRemarkList:[],
+			//确认不续约
+			isConfirmNoRenewalShow:false,
+			confirmNoRenewalForm:{
+				reason:"",
+				detailReason:""
+			}
 		};
 	},
 	/* 页面跳转前记录参数 */
@@ -343,6 +409,11 @@ export default {
 		next()
 	},
 	methods: {
+		controlTableColumnShow(item){
+			return !item.dataType || 
+							(item.dataType === this.filterObj.data_type && 
+							(!item.notRenewedConfirm || item.notRenewedConfirm==this.isNotRenewedConfirm)) // 已确认和待确认
+		},
 		// 搜索
 		handleSearch(){
 			if(!this.searchVal){
@@ -380,6 +451,13 @@ export default {
 		//tabs 的点击事件
 		tabsHandler(item) {
 			this.tabsActiveName = item.value;
+			this.noRenewalReasonId=''
+			this.page_no = 1;
+			this.getTableData()
+		},
+		notRenewedConfirmChange(){
+			this.tabsActiveName = '试用'
+			this.noRenewalReasonId=''
 			this.page_no = 1;
 			this.getTableData()
 		},
@@ -403,7 +481,9 @@ export default {
 				EndDate: this.end_date,
 				StartDate: this.start_date,
 				DataType: this.filterObj.data_type == '新增试用客户' ? '新增试用' : this.filterObj.data_type,
-				TryOutType:this.filterObj.data_type=='未续约客户'? this.tabsActiveName : '',
+				TryOutType:this.filterObj.data_type=='未续约客户' && this.isNotRenewedConfirm==1? this.tabsActiveName : '',
+				IsConfirm:this.filterObj.data_type=='未续约客户'?this.isNotRenewedConfirm:-1,
+				CompanyAscribeId:this.noRenewalReasonId
 			}
 			dataMainInterface.incrementalList(params).then(res => {
 				if(res.Ret === 200) {
@@ -450,6 +530,10 @@ export default {
 		/* 切换数据类型 */
 		toggleType(label) {
 			this.filterObj.data_type = label;
+			this.noRenewalReasonId=''
+			if(label == "未续约客户"){
+				this.getNORenewalReasonList()
+			}
 			this.tabsActiveName = '试用';
 			this.page_no = 1;
 			this.getTableData()
@@ -490,7 +574,13 @@ export default {
 				})
 			}
 		},
-
+		getNORenewalReasonList(){
+			dataMainInterface.getAscribList().then(res=>{
+				if(res.Ret == 200){
+					this.noRenewalReasonList=res.Data.List||[]
+				}
+			})			
+		},
 		// 未续约说明更多按钮
 		renewalReasonMore(row){
 			this.rowInfo={
@@ -499,6 +589,71 @@ export default {
 			}
 			this.isRenewalShow=true
 		},
+		// 添加备注
+		addRemarkFun(row){
+			this.selectItemRow=row
+			this.isAddRemarkShow=true
+		},
+		// 添加备注 保存
+		saveRemark(remark){
+			// console.log(remark);
+			let params={
+				CompanyId:this.selectItemRow.CompanyId,
+				ProductId:this.selectItemRow.ProductId,
+				Content:remark
+			}
+			dataMainInterface.addNotRenewedRemark(params).then(res=>{
+				if(res.Ret == 200){
+					this.$message.success("添加成功")
+					this.getTableData()
+					this.isAddRemarkShow=false
+					this.selectItemRow={}
+				}
+			})
+		},
+		// 查看历史备注
+		viewHistoryRemarkFun(row){
+			dataMainInterface.getNotRenewedRemarkList({CompanyId:row.CompanyId,ProductId:row.ProductId})
+			.then(res=>{
+				if(res.Ret == 200){
+					this.historyRemarkList=res.Data.List || []
+					this.isViewRemarkShow=true
+				}
+			})
+		},
+		confirmedNoRenewalFun(row){
+			this.confirmNoRenewalForm.reason = ""
+			this.confirmNoRenewalForm.detailReason = ""
+			this.selectItemRow = row
+			this.isConfirmNoRenewalShow=true
+		},
+		editReasonLabel(row){
+			dataMainInterface.infoNoRenewedAscribe({CompanyId:row.CompanyId,ProductId:row.ProductId})
+			.then(res=>{
+				if(res.Ret == 200){
+					this.confirmNoRenewalForm.reason = res.Data.Detail?res.Data.Detail.CompanyAscribeId||"":""
+					this.confirmNoRenewalForm.detailReason = res.Data.Detail?res.Data.Detail.Content||"":""
+					this.selectItemRow=row
+					this.isConfirmNoRenewalShow=true
+				}
+			})
+		},
+		saveLabel(item){
+			let params={
+				CompanyId:this.selectItemRow.CompanyId,
+				ProductId:this.selectItemRow.ProductId,
+				CompanyAscribeId:item.CompanyAscribeId,
+				Content:item.Content
+			}
+			dataMainInterface.addNoRenewedAscribe(params).then(res=>{
+				if(res.Ret == 200){
+					this.$message.success("确认成功")
+					this.isConfirmNoRenewalShow=false
+					this.selectItemRow={}
+					this.getTableData()
+				}
+			})
+		}
 	},
 	created() {},
 	mounted() {
@@ -517,6 +672,68 @@ export default {
 	},
 }
 </script>
-<style lang='scss'>
+<style lang='scss' scoped>
 @import './index.scss';
+.tabs-box{
+	flex-direction: column;
+	.tabs-box-confirm{
+		display: flex;
+		align-items: center;
+		margin-bottom: 20px;
+		.center-line{
+			width: 1px;
+			height: 21px;
+			background-color: #333333;
+			margin: 0 20px;
+		}
+	}
+
+}
+.operation-button{
+		color:#409EFF;
+		cursor: pointer;
+		font-size: 14px;
+		margin-right: 10px;
+	}
+.remark-row{
+	display: flex;
+	justify-content: center;
+	.remark-text{
+		width:18px ;
+		height: 18px;
+		margin-right: 8px;
+		font-size: 18px;
+		color: #409EFF;
+		cursor: pointer;
+	}
+}
+.operation-row{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-wrap: wrap;
+	.operation-button{
+		&:last-child{
+			margin-right:0;
+		}
+	}
+}
+
+</style>
+<style lang="scss">
+#dataReport-container{
+	.tabs-box{
+		.el-radio-button{
+			margin-right: 0;
+		}
+		.el-radio-button .el-radio-button__inner{
+			border: none;
+			width: 120px;
+			height: 40px;
+			border-radius: 4px;
+		}
+	}
+}
+
+
 </style>

src/views/dataReport_manage/stockCutomList.vue

@@ -120,6 +120,11 @@
 					</el-col>	
 				</el-row>
 			</div>
+			<el-select v-model="noRenewalReasonId" placeholder="请选择不续约归因" v-show="filterObj.data_type=='未续约客户'"
+			clearable @change="getTableData" style="width: 240px;margin-top: 40px;">
+				<el-option :label="item.AscribeContent" :value="item.CompanyAscribeId"
+				v-for="item in noRenewalReasonList" :key="item.reasonId"></el-option>
+			</el-select>
 			<div class="tabs-box" v-if="filterObj.data_type=='未续约客户'">
 				<span @click="tabsHandler(item)" :class="tabsActiveName===item.value ? 'active':''" v-for="item in tabsList" :key="item">{{item.name}}({{item.name==='试用'?NotRenewalTryOut:NotRenewalNotTryOut}})</span>
 			</div>
@@ -167,6 +172,15 @@
 								{{scope.row.PackageDifference}}
 							</div>
 						</div>
+						<div v-else-if="item.key==='Remark' " class="remark-row">
+							<span class="remark-text" @click="viewHistoryRemarkFun(scope.row)" v-if="scope.row.IsShowNoRenewedNote">...</span>
+						</div>
+						<div v-else-if="item.key=='AscribeContent'">
+							<span style="color: #409EFF;cursor: pointer;"
+								@click="editReasonLabel(scope.row)" >
+								{{scope.row[item.key]}}
+							</span>
+						</div>
 						<span 
 							v-else
 							:style="item.textsty" 
@@ -190,6 +204,11 @@
 		</div>
 		<!-- 未续约说明列表弹窗 -->
 		<renewalListDia :isShow.sync="isRenewalShow" :rowInfo="rowInfo"/>
+		<!-- 历史备注弹窗 -->
+		<viewRemark :isShow.sync="isViewRemarkShow" :tableData="historyRemarkList" />
+		<!-- 确认不续约弹窗 -->
+		<confirmedNoRenewal :isShow.sync="isConfirmNoRenewalShow" :dataForm="confirmNoRenewalForm" 
+			:noRenewalReasonList="noRenewalReasonList" @refreshReasonList="getNORenewalReasonList" @saveLabel="saveLabel" />
 	</div>
 </template>
 
@@ -198,11 +217,14 @@ import { stockTableColums } from './configdata.js'
 import { dataMainInterface,customInterence } from '@/api/api.js'
 import mPage from '@/components/mPage.vue'
 import renewalListDia from './components/renewalListDia.vue'
+import viewRemark from './components/noRenewalReasonDia/viewRemark.vue'
+import confirmedNoRenewal from './components/noRenewalReasonDia/confirmedNoRenewal.vue'
+
 var moment = require('moment');
 moment().format();
 export default {
 	name:'',
-	components: {mPage,renewalListDia},
+	components: {mPage,renewalListDia,viewRemark,confirmedNoRenewal},
 	computed: {
 		exportExcel() {
 			let baseUrl = process.env.API_ROOT + "/statistic_report/stack_company_list";
@@ -225,6 +247,8 @@ export default {
 				DataType: this.filterObj.data_type,
 				Keyword:this.searchVal,
 				IsExport:true,
+				IsConfirm:this.filterObj.data_type=='未续约客户'?1:-1,
+				CompanyAscribeId:this.noRenewalReasonId,
 			};
 			for (let key in obj) {
 				paramStr = `${paramStr}&${key}=${obj[key]}`;
@@ -242,7 +266,7 @@ export default {
 		//管理权限
 		ManageType() {
 			return localStorage.getItem('ManageType') || '';
-		},
+		}
 	},
 	data () {
 		return {
@@ -296,6 +320,18 @@ export default {
 			tabsActiveName:'试用',
 			NotRenewalNotTryOut:0,//冻结流失的人数
 			NotRenewalTryOut:0,//试用的人数
+			noRenewalReasonList:[],
+			noRenewalReasonId:'',
+			selectItemRow:{},// 当前选中的row
+			//历史备注
+			isViewRemarkShow:false,
+			historyRemarkList:[],
+			//确认不续约
+			isConfirmNoRenewalShow:false,
+			confirmNoRenewalForm:{
+				reason:"",
+				detailReason:""
+			}
 		};
 	},
 	/* 页面跳转前记录参数 */
@@ -354,6 +390,8 @@ export default {
 				DataType: this.filterObj.data_type,
 				Keyword:this.searchVal,
 				TryOutType:this.filterObj.data_type=='未续约客户'? this.tabsActiveName : '',
+				IsConfirm:-1,
+				CompanyAscribeId:this.noRenewalReasonId,
 			}
 			dataMainInterface.stackList(params).then(res => {
 				if(res.Ret === 200) {
@@ -379,6 +417,10 @@ export default {
 		/* 切换数据类型 */
 		toggleType(label) {
 			this.filterObj.data_type = label;
+			if(label == "未续约客户"){
+				this.getNORenewalReasonList()
+			}
+			this.noRenewalReasonId=''
 			this.tabsActiveName = '试用';
 			this.page_no = 1;
 			this.searchVal=''
@@ -415,6 +457,53 @@ export default {
 			}
 			this.isRenewalShow=true
 		},
+		getNORenewalReasonList(){
+			dataMainInterface.getAscribList().then(res=>{
+				if(res.Ret == 200){
+					this.noRenewalReasonList=res.Data.List||[]
+				}
+			})			
+		},
+		// 查看历史备注
+		viewHistoryRemarkFun(row){
+			// console.log(row);
+			dataMainInterface.getNotRenewedRemarkList({CompanyId:row.CompanyId,ProductId:row.ProductId})
+			.then(res=>{
+				if(res.Ret == 200){
+					this.historyRemarkList=res.Data.List || []
+					this.isViewRemarkShow=true
+				}
+			})
+		},
+		editReasonLabel(row){
+			// console.log(row);
+			dataMainInterface.infoNoRenewedAscribe({CompanyId:row.CompanyId,ProductId:row.ProductId})
+			.then(res=>{
+				if(res.Ret == 200){
+					this.confirmNoRenewalForm.reason = res.Data.Detail?res.Data.Detail.CompanyAscribeId||"":""
+					this.confirmNoRenewalForm.detailReason = res.Data.Detail?res.Data.Detail.Content||"":""
+					this.selectItemRow=row
+					this.isConfirmNoRenewalShow=true
+				}
+			})
+		},
+		saveLabel(item){
+			// console.log(item);
+			let params={
+				CompanyId:this.selectItemRow.CompanyId,
+				ProductId:this.selectItemRow.ProductId,
+				CompanyAscribeId:item.CompanyAscribeId,
+				Content:item.Content
+			}
+			dataMainInterface.addNoRenewedAscribe(params).then(res=>{
+				if(res.Ret == 200){
+					this.$message.success("确认成功")
+					this.isConfirmNoRenewalShow=false
+					this.selectItemRow={}
+					this.getTableData()
+				}
+			})
+		}
 	},
 	created() {},
 	mounted() {
@@ -430,6 +519,18 @@ export default {
 	},
 }
 </script>
-<style lang='scss'>
+<style lang='scss' scoped>
 @import './index.scss';
+.remark-row{
+	display: flex;
+	justify-content: center;
+	.remark-text{
+		width:18px ;
+		height: 18px;
+		margin-right: 8px;
+		font-size: 18px;
+		color: #409EFF;
+		cursor: pointer;
+	}
+}
 </style>