CRM_13.9 暂存

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

@@ -0,0 +1,65 @@
+<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="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:''
+        }
+      }
+    },
+    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,117 @@
+<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="dataForm" 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="dataForm.reason" placeholder="不续约归因" style="width: 424px;">
+                <el-option :label="item.reasonName" :value="item.reasonId" 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="dataForm.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="createReasonShow=false"
+    :modal-append-to-body='false'
+    width="652px"
+    title="确认不续约">
+      <div class="dialog-box">
+        <el-form :model="remarkForm" ref="confirmReasonRef">
+          <el-form-item prop="text" :rules="{required:true,message:'备注不能为空',trigger:'blur'}">
+            <el-input v-model="remarkForm.text" placeholder="请输入备注信息" type="textarea"
+            style="width: 505px;" :rows="9"></el-input>
+          </el-form-item>
+          <el-form-item prop="text" :rules="{required:true,message:'详细原因不能为空',trigger:'blur'}">
+            <el-input v-model="remarkForm.text" placeholder="请描述详细原因" type="textarea"
+            style="width: 505px;" :rows="9"></el-input>
+          </el-form-item>
+        </el-form>
+        <div class="dialog-footer">
+          <el-button @click="createReasonShow=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>
+  </div>
+
+</template>
+
+<script>
+  export default{
+    props:{
+      isShow:{
+        type:Boolean,
+        required:true
+      },
+      dataForm:{
+        type:Object,
+        required:true
+      },
+      noRenewalReasonList:{
+        type:Array,
+        required:true
+      }
+    },
+    data() {
+      return {
+        remarkForm:{
+          text:''
+        },
+        createReasonShow:false
+      }
+    },
+    methods: {
+      createReason(){
+        this.createReasonShow=true
+      },
+      save(){
+        this.$refs.confirmNoRenewalFormRef.validate(valid=>{
+          if(valid){
+            this.$emit("saveRemark",this.remarkForm.text)
+            this.$refs.confirmNoRenewalFormRef.resetFields()
+          }
+        })
+      }
+    },
+  }
+</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>

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="text" align="center">
+          <template slot-scope="{row}">
+            {{row.text}}
+          </template>
+        </el-table-column>
+        <el-table-column label="备注时间" prop="time" align="center">
+          <template slot-scope="{row}">
+            {{row.time}}
+          </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

@@ -114,13 +114,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 = [

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="getTableData">
+					<el-radio-button :label="true">已确认</el-radio-button>
+					<div class="center-line"></div>
+					<el-radio-button :label="false">待确认</el-radio-button>
+				</el-radio-group>
+				<div class="tabs-box-status" v-show="isNotRenewedConfirm">
+					<el-select v-model="noRenewalReason" placeholder="请选择不续约归因"
+					clearable @change="getTableData" style="width: 240px;margin-right: 50px;">
+						<el-option :label="item.reasonName" :value="item.reasonId"
+						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"
@@ -183,9 +198,22 @@
 								scope.row[item.key]
 							}}
 						</span>
+						<div v-if="item.key==='Remark' " class="remark-row">
+							<span class="remark-text" @click="viewHistoryRemarkFun(scope.row)">...</span>
+							<span class="operation-button" v-show="canConfirmNotRenewed && (!isNotRenewedConfirm)"
+							 style="margin-right: 0;" @click="addRemarkFun(scope.row)">添加</span>
+						</div>
 					</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 +228,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" />
 	</div>
 </template>
 
@@ -208,11 +243,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";
@@ -252,6 +291,10 @@ export default {
 		ManageType() {
 			return localStorage.getItem('ManageType') || '';
 		},
+		//确认未续约权限
+		canConfirmNotRenewed(){
+			return ['admin','rai_admin'].includes(this.Role)
+		}
 	},
 	data () {
 		return {
@@ -322,6 +365,21 @@ export default {
 			tabsActiveName:'试用',
 			NotRenewalNotTryOut:0,//冻结流失的人数
 			NotRenewalTryOut:0,//试用的人数
+			isNotRenewedConfirm:true,//未续约的是否已确认
+			noRenewalReasonList:[],
+			noRenewalReason:'',
+			selectItemId:0,// 当前选中的Id
+			// 添加备注
+			isAddRemarkShow:false,
+			//历史备注
+			isViewRemarkShow:false,
+			historyRemarkList:[],
+			//确认不续约
+			isConfirmNoRenewalShow:false,
+			confirmNoRenewalForm:{
+				reason:"",
+				detailReason:""
+			}
 		};
 	},
 	/* 页面跳转前记录参数 */
@@ -450,6 +508,9 @@ export default {
 		/* 切换数据类型 */
 		toggleType(label) {
 			this.filterObj.data_type = label;
+			if(label == "未续约客户" && (! this.noRenewalReasonList || !this.noRenewalReasonList.length>=0)){
+				this.getNORenewalReasonList()
+			}
 			this.tabsActiveName = '试用';
 			this.page_no = 1;
 			this.getTableData()
@@ -490,7 +551,10 @@ export default {
 				})
 			}
 		},
-
+		getNORenewalReasonList(){
+			//TODO: 获取不续约归因列表
+			this.noRenewalReasonList=[{reasonId:1,reasonName:"不想"},{reasonId:2,reasonName:"没钱"},{reasonId:3,reasonName:"没有"},{reasonId:4,reasonName:"无聊"}]
+		},
 		// 未续约说明更多按钮
 		renewalReasonMore(row){
 			this.rowInfo={
@@ -499,6 +563,29 @@ export default {
 			}
 			this.isRenewalShow=true
 		},
+		// 添加备注
+		addRemarkFun(){
+			this.isAddRemarkShow=true
+		},
+		// 添加备注 保存
+		saveRemark(remark){
+			console.log(remark);
+			//TODO: 添加备注接口
+			this.isAddRemarkShow=false
+		},
+		// 查看历史备注
+		viewHistoryRemarkFun(row){
+			// this.selectItemId = row
+			// TODO: 历史备注信息接口
+			this.historyRemarkList = [{text:"噶分士大夫尔萨分昂工号刚发的合同合同梵蒂冈发读后感烦得很刚发的和规范的和规范的规范大消费",time:"2023-05-29 19:04:35"},{text:"大消费",time:"2023-05-29 19:04:35"},{text:"大消费",time:"2023-05-29 19:04:35"},
+			{text:"大消费",time:"2023-05-29 19:04:35"},{text:"大消费",time:"2023-05-29 19:04:35"},{text:"大消费",time:"2023-05-29 19:04:35"},{text:"大消费",time:"2023-05-29 19:04:35"},
+			{text:"大消费",time:"2023-05-29 19:04:35"},{text:"大消费",time:"2023-05-29 19:04:35"},{text:"大消费",time:"2023-05-29 19:04:35"},{text:"大消费",time:"2023-05-29 19:04:35"},
+			{text:"大消费",time:"2023-05-29 19:04:35"},{text:"大消费",time:"2023-05-29 19:04:35"}]
+			this.isViewRemarkShow=true
+		},
+		confirmedNoRenewalFun(){
+			this.isConfirmNoRenewalShow=true
+		}
 	},
 	created() {},
 	mounted() {
@@ -517,6 +604,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>