日历组件 el-calendar 实现标记功能

曾经终败给现在 2024-03-17 13:09 18阅读 0赞

需求：在日历组件中选择月份时，可以显示当月已经质检或需质检的数据

思路：前端每次点击日期选择器的时候调用接口，接口返回当月需要质检或已质检的数据，前端拿到数据就开始做判断然后回显。

大体样式

![82f0d7a8fff24d5eb02d3666f81a8b0e.png][]![cfc18eae5d234afe8e295cfb8eb5f36e.png][]

代码：

<div style="width: 28% !important">
    					<el-date-picker v-model="selectDate" type="date" placeholder="选择日期" :picker-options="pickerOptions" @change="dataPickerHandle"> </el-date-picker>
    					<el-calendar v-model="selectDate" value-format="yyyy-MM-dd">
    						<template :disabled="data.styleFlag == true" slot="dateCell" slot-scope="{ data }">
    							<span>{
       { dealMyDate(data.day, data) }}</span>
    							<p @click="calendarOnClick(data)" :class="data.styleFlag == true ? 'preventClick' : ''">
    								{
       {
    									data.day
    										.split('-')
    										.slice(2)
    										.join('')
    								}}<br />
    							</p>
    							<div v-for="item in resDate" :key="item.dt">
    								<div v-if="data.day == item.dt">
    									<span class="redStyle" v-if="item.type == 2">需质检</span>
    									<span class="greenStyle" v-if="item.type == 1">已质检</span>
    								</div>
    							</div>
    						</template>
    					</el-calendar>
    				</div>

dealMyDate(v, data) {
    			if (v > this.defaultDate) {
    				Object.assign(data, { styleFlag: true });
    			}
    		},
    		dataPickerHandle(date) {
    			let obj = {
    				date: this.dateFormat('YYYY-mm-dd', date),
    			};
    			getCalenderList(obj).then((res) => {
    				if (res.data.code == 0) {
    					this.resDate = res.data.data;
    				}
    			});
    		},
            // 页面一开始进来调用前天的日历接口
    	    getCalenderData() {
    			let obj = {
    				date: this.defaultDate,
    			};
    			getCalenderList(obj).then((res) => {
    				if (res.data.code == 0) {
    					this.resDate = res.data.data;
    				}
    			});
    		},

完整代码

<template>
    	<div>
    		<basic-container>
    			<div style="float: left">
    				
    				<div style="width: 28% !important">
    					<el-date-picker v-model="selectDate" type="date" placeholder="选择日期" :picker-options="pickerOptions" @change="dataPickerHandle"> </el-date-picker>
    					<el-calendar v-model="selectDate" value-format="yyyy-MM-dd">
    						<template :disabled="data.styleFlag == true" slot="dateCell" slot-scope="{ data }">
    							<span>{
       { dealMyDate(data.day, data) }}</span>
    							<p @click="calendarOnClick(data)" :class="data.styleFlag == true ? 'preventClick' : ''">
    								{
       {
    									data.day
    										.split('-')
    										.slice(2)
    										.join('')
    								}}<br />
    							</p>
    							<div v-for="item in resDate" :key="item.dt">
    								<div v-if="data.day == item.dt">
    									<span class="redStyle" v-if="item.type == 2">需质检</span>
    									<span class="greenStyle" v-if="item.type == 1">已质检</span>
    								</div>
    							</div>
    						</template>
    					</el-calendar>
    				</div>
    				<el-table
    					v-loading="listLoading"
    					:data="tableList"
    					:header-cell-style="{
    						background: 'rgb(255, 191, 191)',
    						color: 'rgb(44,44,44)',
    					}"
    					stripe
    					border
    					style="width: 28%; margin-top: 15px; margin-bottom: 20px"
    				>
    					<el-table-column label="序号" width="70">
    						<template slot-scope="scope">
    							{
       { scope.$index + 1 }}
    						</template>
    					</el-table-column>
    					<el-table-column label="状态" prop="type"></el-table-column>
    					<el-table-column width="100" label="人数" prop="number"> </el-table-column>
    					<el-table-column label="操作" width="100">
    						<template slot-scope="scope">
    							<el-button type="text" v-if="scope.row.type == '需质检'" @click="handleInspect(scope.row)">质检</el-button>
    							<el-button type="text" v-if="scope.row.type == '已质检'" @click="handleView(scope.row)">详情</el-button>
    						</template>
    					</el-table-column>
    				</el-table>
    			</div>
    			<div class="inspection-right-table">
    				<el-table
    					v-loading="detailLoading"
    					:data="detailTable"
    					:header-cell-style="{
    						background: 'rgb(255, 191, 191)',
    						color: 'rgb(44,44,44)',
    					}"
    					stripe
    					border
    					:default-sort="{ prop: 'time', order: 'descending' }"
    				>
    					<el-table-column label="序号" width="60" type="index">
    						<template slot-scope="scope">{
       { page.size * (page.current - 1) + scope.$index + 1 }}</template>
    					</el-table-column>
    					<el-table-column label="成员" prop="name"></el-table-column>
    					<el-table-column width="90" label="客户" prop="contactName"></el-table-column>
    					<el-table-column width="90" label="敏感内容(分)" prop="sensitiveContent"></el-table-column>
    					<el-table-column width="90" label="用语规范(分)" prop="terminologyNorm"></el-table-column>
    					<el-table-column width="90" label="服务禁语(分)" prop="serviceTaboo"></el-table-column>
    					<el-table-column width="90" label="加分项(分)" prop="pluses"></el-table-column>
    					<el-table-column width="70" label="总分" prop="score"></el-table-column>
    					<el-table-column width="100" label="质检人" prop="checkeName"></el-table-column>
    					<el-table-column width="100" label="质检时间" prop="checkDt" sortable></el-table-column>
    					<el-table-column label="操作" width="100">
    						<template slot-scope="scope">
    							<el-button v-if="scope.row.type == '2'" type="text" @click="dialogInspect(scope.row)">质检</el-button>
    							<el-button type="text" v-if="scope.row.type == '1'" @click="dialogView(scope.row)">详情</el-button>
    						</template>
    					</el-table-column>
    				</el-table>
    				
    				<div class="madp-pagination">
    					<el-pagination
    						background
    						@size-change="handleSizeChange"
    						@current-change="handleCurrentChange"
    						:current-page="page.current"
    						:page-sizes="[10, 20, 30, 50, 100]"
    						:page-size="page.size"
    						layout="total, sizes, prev, pager, next, jumper"
    						:total="page.total"
    					></el-pagination>
    				</div>
    			</div>
    
    			<el-dialog :title="dialogTitle" :close-on-click-modal="false" :visible.sync="dialogVisible" :before-close="handleCancel" width="88%">
    				<div class="dialog-left">
    					<div class="dialog-left-title">聊天记录</div>
    					<el-row style="padding: 7px; border-left: 1px solid #ebebeb">
    						<el-col :span="12" :offset="6">
    							<el-input maxlength="30" v-model="searchCont" placeholder="请输入聊天内容"></el-input>
    						</el-col>
    						<el-col :span="6">
    							<el-button style="margin-left: 20%" type="primary" @click="handleSearch">搜索</el-button>
    						</el-col>
    					</el-row>
    					<div class="scrollStyle">
    						<div class="madp-chatInfo" v-for="(it, i) in chatData" :key="i">
    							<div>
    								<p :class="it.toListType == 0 ? 'madp-chat-link' : 'madp-chat-link madp-chat-right'">
    									<span v-if="it.toListType == 0">
    										<img class="madp-chatInfo-avatar" :src="it.avatar" />
    										<span class="madp-chatInfo-name">{
       { it.name }}</span>
    										<span class="madp-chatInfo-time">{
       { it.msgDataTime }}</span>
    									</span>
    									<span v-else>
    										<span class="madp-chatInfo-etime">{
       { it.msgDataTime }}</span>
    										<span class="madp-chatInfo-ename">{
       { it.name }}</span>
    										<img class="madp-chatInfo-eavatar" :src="it.avatar" />
    									</span>
    								</p>
    								<div v-if="it.type == 1" :class="it.toListType == 0 ? '' : 'madp-chat-right'">
    									<p :class="it.toListType == 0 ? 'madp-chatInfo-chat madp-text-over' : 'madp-chatInfo-echat madp-text-over'">
    										{
       { it.content.content }}
    									</p>
    								</div>
    								<div v-if="it.type == 2" :class="it.toListType == 0 ? 'madp-chat-box' : 'madp-chat-box madp-chatInfo-eimg'">
    									<img
    										:src="it.content.ossPath"
    										class="madp-chatInfo-img"
    										@click="
    											isLargeImgShow = true;
    											largeImgUrl = it.content.ossPath;
    										"
    									/>
    								</div>
    								<div v-if="it.type == 13" :class="it.toListType == 0 ? '' : 'madp-chat-right'">
    									<p :class="it.toListType == 0 ? 'madp-chatInfo-chat madp-text-over' : 'madp-chatInfo-echat madp-text-over'">
    										<a :href="it.content.link_url" target="_blank">{
       { it.content.link_url }}</a>
    									</p>
    								</div>
    								<div v-if="it.type == 4" :class="it.toListType == 0 ? '' : 'madp-right-audio'">
    									<audio :src="it.content.ossPath" controls="controls" class="madp-chatInfo-audio"></audio>
    								</div>
    								<div :class="it.toListType == 0 ? '' : 'madp-chatInfo-eimg'" v-if="it.type == 5">
    									<video :src="it.content.ossPath" controls="controls" class="madp-chatInfo-img"></video>
    								</div>
    								<div v-if="it.type == 7" :class="it.toListType == 0 ? '' : 'madp-right-audio'">
    									
    									<div v-if="it.content.fileext == 'mp3'">
    										<audio :src="it.content.ossPath" controls="controls" class="madp-chatInfo-audio"></audio>
    									</div>
    									
    									<div v-if="it.content.fileext == 'mp4'">
    										<video :src="it.content.ossPath" controls="controls" class="madp-chatInfo-img"></video>
    									</div>
    									<div class="madp-file" v-else>
    										<div>
    											<p class="madp-file-name">
    												{
       { it.content.filename }}
    											</p>
    											<p>{
       { (it.content.filesize / 1024).toFixed(2) }}kb</p>
    										</div>
    										<a :href="it.content.ossPath" target="_blank">
    											<img src="/img/xlsx.png" v-show="it.content.fileext == 'xlsx'" class="madp-chatInfo-file" />
    											<img src="/img/pdf.jpg" v-show="it.content.fileext == 'pdf'" class="madp-chatInfo-file" />
    
    											<img src="/img/ppt.jpg" v-show="it.content.fileext == 'pptx'" class="madp-chatInfo-file" />
    
    											<img src="/img/txt.png" v-show="it.content.fileext == 'txt'" class="madp-chatInfo-file" />
    
    											<img src="/img/word.png" v-show="it.content.fileext == 'docx'" class="madp-chatInfo-file" />
    
    											<img src="/img/csv.png" v-show="it.content.fileext == 'csv'" class="madp-chatInfo-file" />
    											<img :src="it.content.ossPath" v-show="it.content.fileext == 'jpg'" class="madp-chatInfo-file" />
    											<img :src="it.content.ossPath" v-show="it.content.fileext == 'png'" class="madp-chatInfo-file" />
    										</a>
    									</div>
    								</div>
    							</div>
    						</div>
    					</div>
    				</div>
    				<div class="dialog-right">
    					<el-table
    						:data="dialogTableData"
    						:span-method="objectSpanMethod"
    						border
    						:key="randomKey"
    						show-summary
    						:summary-method="getTotalScore"
    						style="width: 100%; margin-top: 10px"
    						max-height="700"
    						align="center"
    					>
    						<el-table-column prop="sort" label="分类" width="110"> </el-table-column>
    						<el-table-column prop="class" label="类别" width="110"> </el-table-column>
    						<el-table-column prop="standards" label="标准"> </el-table-column>
    						<el-table-column prop="checkPoints" label="考核扣分"> </el-table-column>
    						<el-table-column property="inspectScore" label="得分">
    							<template slot-scope="scope">
    								<el-input
    									:disabled="isEdit"
    									v-if="!scope.row[scope.column.property + 'isShow'] && scope.row.sort !== '加分项' && scope.row.class == '敏感内容(40分)'"
    									:ref="scope.column.property"
    									v-model="scope.row.inspectScore"
    									oninput="value=value.replace(/[^\d]/g,'');if(value>40)value=40"
    									@blur="editCellSensitive(scope.row, scope.column)"
    								>
    								</el-input>
    								<el-input
    									:disabled="isEdit"
    									v-if="!scope.row[scope.column.property + 'isShow'] && scope.row.sort !== '加分项' && scope.row.class == '用语规范(20分)'"
    									:ref="scope.column.property"
    									v-model="scope.row.inspectScore"
    									oninput="value=value.replace(/[^\d]/g,'');if(value>20)value=20"
    									@blur="editCellNorms(scope.row, scope.column)"
    								>
    								</el-input>
    								<el-input
    									:disabled="isEdit"
    									v-if="!scope.row[scope.column.property + 'isShow'] && scope.row.sort !== '加分项' && scope.row.class == '服务禁语(40分)'"
    									:ref="scope.column.property"
    									v-model="scope.row.inspectScore"
    									oninput="value=value.replace(/[^\d]/g,'');if(value>40)value=40"
    									@blur="editCellService(scope.row, scope.column)"
    								>
    								</el-input>
    
    								<el-input
    									:disabled="isEdit"
    									v-if="!scope.row[scope.column.property + 'isShow'] && scope.row.sort == '加分项'"
    									:ref="scope.column.property"
    									v-model="scope.row.inspectScore"
    									oninput="value=value.replace(/[^\d]/g,'');if(value>10)value=10;"
    									@blur="editCellPraise(scope.row, scope.column)"
    								>
    								</el-input>
    								<el-select :disabled="isEdit" @change="selectChange" clearable v-if="scope.row.sort == '其他'" v-model="selectValue" placeholder="请选择">
    									<el-option style="text-align: center" v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
    								</el-select>
    								
    							</template>
    						</el-table-column>
    						<el-table-column property="inspectAdvice" label="问题建议">
    							<template slot-scope="scope">
    								<el-input
    									:disabled="isEdit"
    									type="textarea"
    									:autosize="{ minRows: 4, maxRows: 5 }"
    									v-if="!scope.row[scope.column.property + 'isShow'] && scope.row.class == '敏感内容(40分)'"
    									:ref="scope.column.property"
    									v-model="scope.row.inspectAdvice"
    									@blur="editCellQuestionSensitive(scope.row, scope.column)"
    								>
    								</el-input>
    								<el-input
    									:disabled="isEdit"
    									type="textarea"
    									:autosize="{ minRows: 4, maxRows: 5 }"
    									v-if="!scope.row[scope.column.property + 'isShow'] && scope.row.class == '用语规范(20分)'"
    									:ref="scope.column.property"
    									v-model="scope.row.inspectAdvice"
    									@blur="editCellQuestionNorms(scope.row, scope.column)"
    								>
    								</el-input>
    								<el-input
    									:disabled="isEdit"
    									type="textarea"
    									:autosize="{ minRows: 2, maxRows: 2 }"
    									v-if="!scope.row[scope.column.property + 'isShow'] && scope.row.class !== '用语规范(20分)' && scope.row.class !== '敏感内容(40分)'"
    									:ref="scope.column.property"
    									v-model="scope.row.inspectAdvice"
    									@blur="editCellQuestion(scope.row, scope.column)"
    								>
    								</el-input>
    								
    							</template>
    						</el-table-column>
    					</el-table>
    				</div>
    				<div slot="footer" class="dialog-footer">
    					<el-button type="primary" v-if="this.dialogTitle == '会话质检'" @click="dialogConfim">确定</el-button>
    					<el-button type="primary" @click="handleCancel">取消</el-button>
    				</div>
    			</el-dialog>
    		</basic-container>
    	</div>
    </template>
    <script>
    import { getCalenderList, getInspectionList, getChatData, inspectionCinfirmList } from '@/api/session-quality-inspection/inspection';
    export default {
    	name: 'starff-inspection',
    	data() {
    		return {
    			defaultDate: '',
    			selectDate: '',
    			pickerOptions: {
    				disabledDate(time) {
    					return time.getTime() > Date.now() - 60 * 60 * 24 * 1000;
    				},
    			},
    			searchCont: '', //搜索框内容
    			//聊天记录数据
    			chatData: [],
    			//日历组件数据
    			resDate: [],
    			listLoading: false, //左边表格loading
    			tableList: [], //左边表格数据
    			detailLoading: false, //右边详情表格loading
    			detailTable: [], //右边表格数据
    			page: {
    				current: 1,
    				size: 10,
    				total: 0,
    			},
    			isEdit: false, //得分和意见是否可编辑
    			dialogVisible: false,
    			//弹窗表格数据
    			dialogTableData: [],
    			//弹窗表格的接口数据
    			dialogHandleData: {},
    			//弹窗表格自己定义的数据
    			dialogTableList: [
    				{
    					sort: '服务规范',
    					class: '敏感内容(40分)',
    					standards: '遵守法律法规，坚持道德准则，不得妄议党的方针政策，不得传播色情、低俗等不当内容',
    					checkPoints:
    						'1.出现敏感词，如党政领导人、政治敏感事件、军事名称相关敏感词汇，扣5分/次；2.传播色情、低俗、恐怖等不当内容行为，扣10分/次；3.妄议党的方针政策、转播政治负面言论，发表违背中央精神言论，扣15分/次；',
    				},
    				{
    					sort: '服务规范',
    					class: '用语规范(20分)',
    					standards: '态度积极友善、耐心诚恳，不得反问、客户或与客户争辩质问、责怪、嘲讽',
    					checkPoints:
    						'出现“不清楚”、“不知道”、“不了解”等关联词语未做任何解释，扣5分一次；2.出现“这是你的问题”，“你这话什么意思”、“你去投诉啊，我害怕你”、“我就这态度，你能怎样”、“不会用就别用”、“不关我的事”扣10分/次；',
    				},
    				{
    					sort: '服务规范',
    					class: '服务禁语(40分)',
    					standards: '尊重客户、不得训斥、辱骂客户',
    					checkPoints: '出现训斥、辱骂客户的字眼，扣40分/次；',
    				},
    				{
    					sort: '加分项',
    					class: '表扬',
    					standards: '客户在线提出表扬',
    					checkPoints: '如出现"你服务真好！"、"我对你的回答很满意"、"我想表扬你等"加10分；',
    				},
    				{
    					sort: '其他',
    					class: '投诉事件',
    					standards: '出现因工作人员自身原因引起客户投诉，有损银行名誉、形象行为',
    					checkPoints: '如：因服务态度不好引发有责投诉，业务解答、引导、流程有误引发有责投诉或造成客户经济损失，索要红包等扣20分/次；',
    				},
    			],
    			//弹窗标题
    			dialogTitle: '',
    			randomKey: '',
    			options: [
    				{
    					value: 1,
    					label: '是',
    				},
    				{
    					value: 0,
    					label: '否',
    				},
    			],
    			selectValue: '',
    			calanderType: '',
    			sumsScore: '',
    			classFlag: false,
    			searchData: {},
    			allInspectDate: [],
    			allDetailDate: [],
    		};
    	},
    	created() {
    		this.$nextTick(() => {
    			// 点击上个月
    			let prevBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');
    			prevBtn.addEventListener('click', () => {
    				let obj = {
    					date: this.dateFormat('YYYY-mm-dd', this.selectDate),
    				};
    				getCalenderList(obj).then((res) => {
    					if (res.data.code == 0) {
    						this.resDate = res.data.data;
    						this.tableList = [];
    					}
    				});
    			});
    			// 点击今天
    			let currBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');
    			currBtn.addEventListener('click', () => {
    				let obj = {
    					date: this.dateFormat('YYYY-mm-dd', this.selectDate),
    				};
    				getCalenderList(obj).then((res) => {
    					if (res.data.code == 0) {
    						this.resDate = res.data.data;
    						this.tableList = [];
    					}
    				});
    			});
    			// 点击下个月
    			let nextBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)');
    			nextBtn.addEventListener('click', () => {
    				let obj = {
    					date: this.dateFormat('YYYY-mm-dd', this.selectDate),
    				};
    				getCalenderList(obj).then((res) => {
    					if (res.data.code == 0) {
    						this.resDate = res.data.data;
    						this.tableList = [];
    					}
    				});
    			});
    		});
    		// this.page.total = this.detailTable.length;
    	},
    	activated() {},
    	mounted() {
    		this.getdatatime();
    		//得到今天前一天的日期
    		var now = new Date();
    		var year = now.getFullYear(); //得到年份
    		var month = (now.getMonth() + 1).toString().padStart(2, '0'); //得到月份
    		var date = now.getDate().toString(); //得到日期
    		if (date.length == 1) {
    			this.defaultDate = `${year}-${month}-0${date - 1}`;
    		} else if (date.length == 2) {
    			this.defaultDate = `${year}-${month}-${date - 1}`;
    		}
    		this.getCalenderData();
    		this.dealMyDate();
    	},
    	updated() {},
    	methods: {
    		dealMyDate(v, data) {
    			if (v > this.defaultDate) {
    				Object.assign(data, { styleFlag: true });
    			}
    		},
    		dataPickerHandle(date) {
    			let obj = {
    				date: this.dateFormat('YYYY-mm-dd', date),
    			};
    			getCalenderList(obj).then((res) => {
    				if (res.data.code == 0) {
    					this.resDate = res.data.data;
    				}
    			});
    		},
    		// 页面一开始进来调用前天的日历接口
    		getCalenderData() {
    			let obj = {
    				date: this.defaultDate,
    			};
    			getCalenderList(obj).then((res) => {
    				if (res.data.code == 0) {
    					this.resDate = res.data.data;
    				}
    			});
    		},
    		//时间格式化
    		dateFormat(fmt, date) {
    			let ret;
    			const opt = {
    				'Y+': date.getFullYear().toString(), // 年
    				'm+': (date.getMonth() + 1).toString(), // 月
    				'd+': date.getDate().toString(), // 日
    				'H+': date.getHours().toString(), // 时
    				'M+': date.getMinutes().toString(), // 分
    				'S+': date.getSeconds().toString(), // 秒
    			};
    			for (let k in opt) {
    				ret = new RegExp('(' + k + ')').exec(fmt);
    				if (ret) {
    					fmt = fmt.replace(ret[1], ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0'));
    				}
    			}
    			return fmt;
    		},
    		//日期选择器 默认显示当前日期的前一天
    		getdatatime() {
    			const start = new Date();
    			this.selectDate = start.getTime() - 60 * 60 * 24 * 1000;
    		},
    		//点击日历每一天
    		calendarOnClick(e) {
    			console.log(e);
    			this.detailTable = [];
    			if (this.resDate.length == 0) {
    				this.calanderType = '3';
    				this.tableList = [];
    			} else {
    				this.calanderType = this.resDate[0].type;
    			}
    			// 调用左边表格的接口
    			let obj = {
    				date: e.day,
    				type: this.calanderType,
    			};
    			getInspectionList(obj).then((res) => {
    				if (res.data.code == 0) {
    					this.tableList = res.data.data;
    					// this.page.total = res.data.data.page.total;
    					// this.page.current = res.data.data.page.current;
    					// this.page.size = res.data.data.page.size;
    				}
    			});
    		},
    		// 点击质检按钮
    		handleInspect(data) {
    			console.log(data);
    			this.allInspectDate = data.page.records;
    			// this.detailTable = data.page.records;
    			// this.page.size = data.page.size;
    			// this.page.current = data.page.current;
    			this.page.total = data.page.total;
    			this.detailTable = this.allInspectDate.slice((this.page.current - 1) * this.page.size, this.page.current * this.page.size);
    		},
    		// 点击详情按钮
    		handleView(data) {
    			this.allDetailDate = data.page.records;
    
    			this.detailTable = this.allDetailDate.slice((this.page.current - 1) * this.page.size, this.page.current * this.page.size);
    		},
    		// 分页
    		handleSizeChange(size) {
    			console.log('当前页多少数据：', size);
    			this.page.size = size;
    			this.detailTable = this.allInspectDate.slice((this.page.current - 1) * this.page.size, this.page.current * this.page.size);
    		},
    		handleCurrentChange(current) {
    			console.log('当前页数：', current);
    			this.page.current = current;
    			this.detailTable = this.allInspectDate.slice((current - 1) * this.page.size, current * this.page.size);
    		},
    		// 合并单元格操作
    		objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    			if (columnIndex == 0) {
    				if (rowIndex == 0) {
    					//第一行
    					return {
    						rowspan: 3,
    						colspan: 1,
    					};
    				} else if (rowIndex < 3) {
    					return {
    						rowspan: 0,
    						colspan: 0,
    					};
    				}
    			}
    			if (rowIndex == 5) {
    				if (columnIndex == 0) {
    					return {
    						rowspan: 1,
    						colspan: 4,
    					};
    				} else if (columnIndex < 4) {
    					return {
    						rowspan: 0,
    						colspan: 0,
    					};
    				} else {
    					return {
    						rowspan: 1,
    						colspan: 2,
    					};
    				}
    			}
    		},
    		//编辑表格单元格
    		// editTableData(row, column) {
    		// 	row[column.property + 'isShow'] = true;
    		// 	//refreshTable是table数据改动时，刷新table的
    		// 	this.refreshTable();
    		// 	this.$nextTick(() => {
    		// 		this.$refs[column.property] && this.$refs[column.property].focus();
    		// 	});
    		// },
    		//得分一列编辑 敏感内容打分（不包含加分项）
    		editCellSensitive(row, column) {
    			row[column.property + 'isShow'] = false;
    
    			this.refreshTable();
    			if ((row.sort = '敏感内容(40%)')) {
    				if (row.inspectScore != '') {
    					this.selectValue = 0;
    				}
    			}
    		},
    		//得分一列编辑 用语规范（不包含加分项）
    		editCellNorms(row, column) {
    			row[column.property + 'isShow'] = false;
    
    			this.refreshTable();
    			if ((row.sort = '敏感内容(40%)')) {
    				if (row.inspectScore != '') {
    					this.selectValue = 0;
    				}
    			}
    		},
    		//得分一列编辑 服务禁语（不包含加分项）
    		editCellService(row, column) {
    			row[column.property + 'isShow'] = false;
    
    			this.refreshTable();
    			if ((row.sort = '敏感内容(40%)')) {
    				if (row.inspectScore != '') {
    					this.selectValue = 0;
    				}
    			}
    		},
    		//加分项编辑
    		editCellPraise(row, column) {
    			row[column.property + 'isShow'] = false;
    
    			this.refreshTable();
    		},
    		//问题建议编辑  敏感
    		editCellQuestionSensitive(row, column) {
    			row[column.property + 'isShow'] = false;
    
    			this.refreshTable();
    		},
    		//问题建议编辑  规范
    		editCellQuestionNorms(row, column) {
    			row[column.property + 'isShow'] = false;
    
    			this.refreshTable();
    		},
    		//问题建议编辑
    		editCellQuestion(row, column) {
    			row[column.property + 'isShow'] = false;
    
    			this.refreshTable();
    		},
    		//是否投诉
    		selectChange(val) {
    			this.dialogTableData[4].inspectScore = val;
    		},
    		refreshTable() {
    			this.randomKey = Math.random();
    		},
    		// 表尾合计总分
    		getTotalScore(param) {
    			const { columns, data } = param;
    			const sums = [];
    			columns.forEach((column, index) => {
    				if (index === 1) {
    					sums[index] = '最终得分';
    					return;
    				}
                    const values = data.map((item) => Number(item[column.property]));
                    if (!values.every((value) => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] = 0;
                        this.sumsScore = sums[index]; 
                    } else {
                        sums[index] = '';
                    }	
    			});
    			return sums;
    		},
    		// 弹窗搜索聊天记录
    		handleSearch() {
    			//调用聊天数据接口
    			let obj = {
    				chatDate: this.searchData.sessionDt,
    				wxUserId: this.searchData.wxUserId,
    				name: this.searchData.name,
    				wxExternalUserid: this.searchData.wxExternalUserid,
    				contactName: this.searchData.contactName,
    				content: this.searchCont,
    			};
    			getChatData(obj).then((res) => {
    				if (res.data.code == 0) {
    					this.chatData = res.data.data.records;
    				}
    			});
    		},
    		//质检弹窗
    		dialogInspect(data) {
    			this.searchData = data;
    			this.dialogHandleData = data;
    			this.dialogVisible = true;
    			this.isEdit = false;
    			this.dialogTitle = '会话质检';
    			if (data.ifComplain == '') {
    				this.selectValue = 0;
    			} else if (data.ifComplain > 1) {
    				this.selectValue = 1;
    			} else {
    				this.selectValue = data.ifComplain;
    			}
    			let amout3Key = [data.sensitiveContent, data.terminologyNorm, data.serviceTaboo, data.pluses, data.ifComplain];
    			let amout4key = [data.sensitiveDis, data.terminologyDis, data.serviceDis, data.plusesDis, data.complainDis];
    			this.dialogTableData = this.dialogTableList.map((i, index) => {
    				return {
    					...i,
    					inspectScore: amout3Key[index],
    					inspectAdvice: amout4key[index],
    				};
    			});
    			//调用聊天数据接口
    			let obj = {
    				chatDate: data.sessionDt,
    				wxUserId: data.wxUserId,
    				name: data.name,
    				wxExternalUserid: data.wxExternalUserid,
    				contactName: data.contactName,
    			};
    			getChatData(obj).then((res) => {
    				if (res.data.code == 0) {
    					this.chatData = res.data.data.records;
    				}
    			});
    		},
    		//详情弹窗
    		dialogView(data) {
    			this.searchData = data;
    			this.dialogVisible = true;
    			this.dialogTitle = '质检详情';
    			if (data.ifComplain == '') {
    				this.selectValue = 0;
    			} else if (data.ifComplain > 1) {
    				this.selectValue = 1;
    			} else {
    				this.selectValue = data.ifComplain;
    			}
    			this.isEdit = true;
    			let amout3Key = [data.sensitiveContent, data.terminologyNorm, data.serviceTaboo, data.pluses, data.ifComplain];
    			let amout4key = [data.sensitiveDis, data.terminologyDis, data.serviceDis, data.plusesDis, data.complainDis];
    			this.dialogTableData = this.dialogTableList.map((i, index) => {
    				return {
    					...i,
    					inspectScore: amout3Key[index],
    					inspectAdvice: amout4key[index],
    				};
    			});
    			//调用聊天数据接口
    			let obj = {
    				chatDate: data.sessionDt,
    				wxUserId: data.wxUserId,
    				name: data.name,
    				wxExternalUserid: data.wxExternalUserid,
    				contactName: data.contactName,
    			};
    			getChatData(obj).then((res) => {
    				if (res.data.code == 0) {
    					this.chatData = res.data.data.records;
    				}
    			});
    		},
    		// 弹窗确定按钮
    		dialogConfim() {
    			this.dialogTableData[4].inspectScore = this.selectValue;
    			//否0   是1
    			if (this.dialogTableData[4].inspectScore == 0) {
    				if (this.dialogTableData[0].inspectScore == '' || this.dialogTableData[1].inspectScore == '' || this.dialogTableData[2].inspectScore == '') {
    					this.$message({
    						showClose: true,
    						message: '请对我的服务进行评分',
    						type: 'warning',
    					});
    				} else {
    					this.dialogVisible = false;
    				}
    			} else if (this.dialogTableData[4].inspectScore == 1) {
    				this.dialogVisible = false;
    				this.sumsScore = 0;
    			}
    			let obj = {
    				sessionDt: this.dialogHandleData.sessionDt,
    				wxUserId: this.dialogHandleData.wxUserId,
    				deptId: this.dialogHandleData.deptId,
    				name: this.dialogHandleData.name,
    				wxExternalUserid: this.dialogHandleData.wxExternalUserid,
    				contactName: this.dialogHandleData.contactName,
    				checkPeople: this.dialogHandleData.checkPeople,
    				checkDt: this.dialogHandleData.checkDt,
    				sq: this.dialogHandleData.sq,
    				sensitiveContent: this.dialogTableData[0].inspectScore,
    				sensitiveDis: this.dialogTableData[0].inspectAdvice,
    				terminologyNorm: this.dialogTableData[1].inspectScore,
    				terminologyDis: this.dialogTableData[1].inspectAdvice,
    				serviceTaboo: this.dialogTableData[2].inspectScore,
    				serviceDis: this.dialogTableData[2].inspectAdvice,
    				pluses: this.dialogTableData[3].inspectScore,
    				plusesDis: this.dialogTableData[3].inspectAdvice,
    				ifComplain: this.dialogTableData[4].inspectScore,
    				complainDis: this.dialogTableData[4].inspectAdvice,
    				score: this.sumsScore,
    			};
    			inspectionCinfirmList(obj).then((res) => {
    				if (res.data.code == 0) {
    					let obj = {
    						date: this.dialogHandleData.sessionDt,
    					};
    					getCalenderList(obj).then((res) => {
    						if (res.data.code == 0) {
    							this.resDate = res.data.data;
    							console.log(res.data.data, 'youbing');
    							this.tableList = [];
    							this.detailTable = [];
    							// 调用左边表格的接口
    							let obj = {
    								date: this.resDate[0].dt,
    								type: this.resDate[0].type,
    							};
    							getInspectionList(obj).then((res) => {
    								if (res.data.code == 0) {
    									this.tableList = res.data.data;
    									// this.page.total = res.data.data.page.total;
    									// this.page.current = res.data.data.page.current;
    									// this.page.size = res.data.data.page.size;
    								}
    							});
    						}
    					});
    				}
    			});
    		},
    		handleCancel() {
    			this.dialogVisible = false;
    		},
    	},
    	watch: {
    		selectDate: {
    			handler(val, old) {
    				let date = new Date(val);
    				let date1 = new Date(old);
    				let yy = date.getFullYear();
    				let yy1 = date1.getFullYear();
    				let mm = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
    				let mm1 = date1.getMonth() + 1 < 10 ? '0' + (date1.getMonth() + 1) : date1.getMonth() + 1;
    				let mm2 = date.getMonth() + 1;
    				//如果新值和旧值所在的月份相同，则不触发方法。
    				if (yy + '-' + mm != yy1 + '-' + mm1) {
    					this.$emit('watchChild', yy + '-' + mm, mm2);
    				}
    			},
    			deep: true,
    		},
    	},
    };
    </script>
    <style lang="scss" scoped>
    
    </style>

[82f0d7a8fff24d5eb02d3666f81a8b0e.png]: https://img-blog.csdnimg.cn/82f0d7a8fff24d5eb02d3666f81a8b0e.png
[cfc18eae5d234afe8e295cfb8eb5f36e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/69acf287ce8f4cefbdb44d8916534c39.png