<!--录音质检，录音复核-->
<template>
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="1200px" append-to-body>
<div>
<el-form ref="dataForm" :model="form" :rules="rules" label-width="80px" size="mini">
<el-row :gutter="20">
<el-col v-if="needPlayer" :span="12">
<audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
</el-col>
<el-col :span="12">
<el-form-item label="质检评语" prop="checkComment">
<el-input v-model="form.checkComment" :disabled="dialogStatus=='info'" type="textarea" rows="3"/>
</el-form-item>
</el-col>
</el-row>
<div>
<div v-if="dialogStatus=='first'" style="margin-top:10px;">
<el-form-item label="质检模块" prop="checkModular">
<el-select v-model="form.checkModular" placeholder="请选择质检模块" style="width:250px;">
<el-option v-for="item of modularList" :key="item.id" :label="item.modularName" :value="item.id"/>
</el-select>
</el-form-item>
</div>
<el-row v-show="scoreData.length>0">
<el-col>
<el-table :data="scoreData" :span-method="objectSpanMethod" size="mini" style="width: 100%" cell-class-name="slim-row" border>
<el-table-column prop="firstIndexName" label="一级指标"/>
<el-table-column prop="secondIndexName" label="二级指标"/>
<el-table-column prop="indexDetail" label="质检考核标准解析"/>
<el-table-column prop="indexTypeName" label="考核标准类型"/>
<el-table-column prop="date" label="质检考核">
<template slot-scope="scope">
<!--分值型-->
<el-input-number v-if="scope.row.indexType=='1'" :min="0" :max="scope.row.maxScore" :step="0.1" :precision="1" v-model="scope.row.score" :disabled="dialogStatus=='info'" type="number" size="mini" style="width: 100px" class="inputClass"/>
<span v-if="scope.row.indexType=='1'" class="tips">总分：{{ scope.row.maxScore }}</span>
<!--是否-->
<el-radio-group v-if="scope.row.indexType=='2'" v-model="scope.row.score" :disabled="dialogStatus=='info'">
<el-radio label="1">是</el-radio>
<el-radio label="0">否</el-radio>
</el-radio-group>
<!--文本型-->
<el-input v-if="scope.row.indexType=='3'" v-model="scope.row.score" :disabled="dialogStatus=='info'" maxlength="20" size="mini" style="width: 150px" class="inputClass"/>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
</div>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button v-if="dialogStatus!='info'" :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
<el-button @click="cancel">取消</el-button>
</div>
</el-dialog>
</template>
<script>
import AudioPlayer from '../../../components/AudioPlayer/AudioPlayer'
import { getQIndexList, getQModulerList, firstCheck, secondCheck, getQualityCheckDetail } from '@/api/qualityCheck'
export default {
name: 'QualityCheck',
components: { AudioPlayer },
props: {
needPlayer: {
type: Boolean,
default: true
}
},
data() {
return {
dialogFormVisible: false, // 对话框是否显示
dialogStatus: '', // 对话框类型：create,update
form: {
callid: '',
checkComment: '',
checkModular: '',
scoreSituation: ''
}, // 表单
scoreData: [],
modularList: [], // 质检模块列表
textMap: {
first: '质检',
twice: '质检复核'
}, // 表头显示标题
rules: {
checkModular: [{ required: true, message: '质检模块必选', trigger: ['blur', 'change'] }],
checkComment: [{ required: true, message: '质检评语不能为空', trigger: ['blur', 'change'] }]
}, // 前端校验规则
rowAndColumn: [],
pos: 0,
posT: 0,
disabled: false,
sound: {
url: '',
controlList: 'noDownload noSpeed onlyOnePlaying'
},
btnLoading: false // 保存按钮的加载中状态
}
},
watch: {
'form.checkModular': function(val) {
if (val) {
if (this.dialogStatus === 'first') {
this.fetchQIndex(val, 'first')
}
}
}
},
created() {
this.fetchModularList()
},
methods: {
// 初始化对话框
initDialog(dialogStatus, dialogFormVisible, row = null) {
this.dialogStatus = dialogStatus
this.dialogFormVisible = dialogFormVisible
this.btnLoading = false
this.sound.url = row.recordName
if (dialogStatus === 'first') { // 如果是新增，清除验证
this.disabled = false
this.resetForm()
this.form.callid = row.callid
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
})
} else if (dialogStatus === 'twice') { // 如果是修改，将row中数据填写到输入框中
this.form.callid = row.callid
this.form.checkModular = row.checkModular
this.fetchQIndex(this.form.checkModular, dialogStatus)
this.disabled = false
} else if (dialogStatus === 'info') {
this.form.callid = row.callid
this.form.checkModular = row.checkModular
this.fetchQIndex(this.form.checkModular, dialogStatus)
this.disabled = true
}
},
// 获取质检模块列表
fetchModularList() {
getQModulerList().then(response => {
this.modularList = response.data
})
},
// 获取指标列表
fetchQIndex(modularId, type) {
this.scoreData = []
getQIndexList(modularId).then(response => {
if (response.code === 200) {
const data = response.data
const self = this
self.rowAndColumn = []
for (const i in data) {
if (i === '0') {
self.rowAndColumn.push(1)
self.pos = 0
} else {
if (data[i].firstIndexName === data[i - 1].firstIndexName) {
// 如果firstIndexName相等就累加，并且push0
self.rowAndColumn[self.pos] += 1
self.rowAndColumn.push(0)
} else {
self.rowAndColumn.push(1)
self.pos = i
}
}
const item = data[i]
const row = {
id: item.secondIndex,
firstIndexName: item.firstIndexName,
secondIndexName: item.secondIndexName,
indexDetail: item.indexDetail,
indexType: item.indexType,
indexTypeName: item.indexTypeName,
maxScore: parseFloat(item.score),
score: item.score ? item.score : '1'
}
this.scoreData.push(row)
}
this.listLoading = false
if (type !== 'first') {
this.fetchCheckDetail()
}
}
})
},
// 获取质检详情
fetchCheckDetail() {
getQualityCheckDetail(this.form.callid).then(response => {
if (response.code === 200) {
// 遍历scoreSituation,得到得分
this.form.checkModular = response.data[0].checkModular
this.form.checkComment = response.data[0].checkComment
this.form.scoreSituation = response.data[0].scoreSituation
const scoreList = this.form.scoreSituation.split(',')
for (const i in scoreList) {
const item = scoreList[i]
const itemList = item.split(':')
this.scoreData[i].score = itemList[1]
}
}
})
},
// 重置表单
resetForm() {
this.form = {
callid: '',
checkComment: '',
checkModular: '',
scoreSituation: ''
}
},
// 保存数据
saveData: function() {
if (this.dialogStatus === 'first') {
this.qualityCheck()
} else if (this.dialogStatus === 'twice') {
this.qualityTwiceCheck()
}
},
checkData() {
for (const item of this.scoreData) {
if (item.score === '') {
return false
}
}
return true
},
formatData() {
const resultList = []
let res = ''
for (const item of this.scoreData) {
const line = item.id + ':' + item.score
resultList.push(line)
}
res = resultList.join(',')
return res
},
// 质检
qualityCheck: function() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
if (this.checkData()) {
const form = {
callid: this.form.callid,
checkComment: this.form.checkComment,
checkModular: this.form.checkModular,
scoreSituation: this.formatData()
}
this.btnLoading = true
firstCheck(form).then(response => {
if (response.code === 200) {
this.$message.success('质检成功')
this.$emit('refresh')
this.dialogFormVisible = false
}
}).catch(_ => { // 异常情况，loading置为false
this.btnLoading = false
})
}
}
})
},
// 质检复核
qualityTwiceCheck: function() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
if (this.checkData()) {
const form = {
callid: this.form.callid,
checkComment: this.form.checkComment,
checkModular: this.form.checkModular,
scoreSituation: this.formatData()
}
this.btnLoading = true
secondCheck(form).then(response => {
if (response.code === 200) {
this.$message.success('质检复核成功')
this.$emit('refresh')
this.dialogFormVisible = false
}
}).catch(_ => { // 异常情况，loading置为false
this.btnLoading = false
})
}
}
})
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
const self = this
if (columnIndex === 0) {
if (self.rowAndColumn[rowIndex]) {
const rowNum = self.rowAndColumn[rowIndex]
return {
rowspan: rowNum,
colspan: rowNum > 0 ? 1 : 0
}
}
return {
rowspan: 0,
colspan: 0
}
}
},
cancel: function() {
this.dialogFormVisible = false
this.$emit('watchChild')
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-dialog{
width:700px
}
.el-select{
width: 100%;
}
.slim-row{
padding: 4px 0px;
.tips{
margin-left: 10px;
color: red;
}
}
</style>
