<template>
|
<div>
|
<el-dialog v-loading="diaLoading" :close-on-click-modal="false"
|
:close-on-press-escape="false"
|
:visible.sync="formDia"
|
title="不符合项的分布"
|
width="90%" @close="closeDia">
|
<table border="1" cellspacing="10" class="table">
|
<tr>
|
<td>章节号</td>
|
<th class="div-with-line">
|
<span style="float: left;">要素</span>
|
<span style="float: right;">部门</span>
|
</th>
|
<th>主任</th>
|
<th>技术负责人</th>
|
<th>质量负责人</th>
|
<th>综合室</th>
|
<th>试验室</th>
|
<th>合计</th>
|
<th>占%</th>
|
</tr>
|
<tr v-for="(item, index) in distributionDetailList" :key="item.value">
|
<td>{{item.chapterNumber}}</td>
|
<th>{{item.essentials}}</th>
|
<th>
|
<el-input-number v-model="item.director" :precision="0" clearable size="small"></el-input-number>
|
</th>
|
<th>
|
<el-input-number v-model="item.technology" :precision="0" clearable size="small"></el-input-number>
|
</th>
|
<th>
|
<el-input-number v-model="item.quality" :precision="0" clearable size="small"></el-input-number>
|
</th>
|
<th>
|
<el-input-number v-model="item.comprehensive" :precision="0" clearable size="small"></el-input-number>
|
</th>
|
<th>
|
<el-input-number v-model="item.testing" :precision="0" clearable size="small"></el-input-number>
|
</th>
|
<th>
|
{{item.total}}
|
</th>
|
<th>
|
{{(item.proportion?item.proportion:0) + '%'}}
|
</th>
|
</tr>
|
<tr>
|
<td> </td>
|
<th>
|
占比
|
</th>
|
<th>
|
{{(distributionProportion.director?distributionProportion.director:0) + '%'}}
|
</th>
|
<th>
|
{{(distributionProportion.technology?distributionProportion.technology:0) + '%'}}
|
</th>
|
<th>
|
{{(distributionProportion.quality?distributionProportion.quality:0) + '%'}}
|
</th>
|
<th>
|
{{(distributionProportion.comprehensive?distributionProportion.comprehensive:0) + '%'}}
|
</th>
|
<th>
|
{{(distributionProportion.testing?distributionProportion.testing:0) + '%'}}
|
</th>
|
<th>
|
{{distributionProportion.total?distributionProportion.total:0}}
|
</th>
|
<th> </th>
|
</tr>
|
</table>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="closeDia">取 消</el-button>
|
<el-button :loading="loading" type="primary" @click="handleEdit">提 交</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'formDia',
|
// import 引入的组件需要注入到对象中才能使用
|
components: {},
|
data() {
|
// 这里存放数据
|
return {
|
formDia: false,
|
diaLoading: false,
|
loading: false,
|
distributionDetailList: [],
|
form: {
|
|
},
|
distributionProportion: {}
|
};
|
},
|
mounted() {
|
|
},
|
// 方法集合
|
methods: {
|
// 打开弹框
|
openDia (type, row) {
|
this.formDia = true
|
this.operationType = type
|
if (type !== 'add') {
|
this.searchInfo(row)
|
} else {
|
this.selectEnumByCategory()
|
}
|
},
|
// 查询详情
|
searchInfo (row) {
|
this.diaLoading = true
|
this.$axios(this.$api.inconsistentDistribution.getInconsistentDistributionOne + '?distributionId=' + row.distributionId).then(res => {
|
this.diaLoading = false
|
if (res.code === 201) return
|
this.form = res.data
|
this.distributionDetailList = this.form.distributionDetailList
|
this.distributionProportion = this.form.distributionProportion
|
}).catch(err => {
|
console.log(err)
|
this.diaLoading = false
|
})
|
},
|
// 提交弹框数据
|
handleEdit () {
|
const date = new Date();
|
const year = date.getFullYear();
|
this.loading = true
|
const internalPlan = this.HaveJson(this.form)
|
internalPlan.distributionYear = year
|
internalPlan.distributionDetailList = this.HaveJson(this.distributionDetailList)
|
if (this.operationType === 'add') {
|
this.$axios.post(this.$api.inconsistentDistribution.addInconsistentDistribution, internalPlan, {
|
headers: {
|
"Content-Type": "application/json"
|
},
|
noQs: true
|
}).then(res => {
|
this.loading = false
|
if (res.code === 201) return
|
this.$message.success('操作成功')
|
this.closeDia()
|
}).catch(err => {
|
console.log('err---', err);
|
this.loading = false
|
})
|
} else if (this.operationType === 'edit') {
|
this.$axios.post(this.$api.inconsistentDistribution.updateInconsistentDistribution, internalPlan, {
|
headers: {
|
"Content-Type": "application/json"
|
},
|
noQs: true
|
}).then(res => {
|
this.loading = false
|
if (res.code === 201) return
|
this.$message.success('操作成功')
|
this.closeDia()
|
}).catch(err => {
|
console.log('err---', err);
|
this.loading = false
|
})
|
}
|
},
|
closeDia () {
|
this.formDia = false
|
this.$emit('closeDia')
|
},
|
selectEnumByCategory() {
|
this.distributionDetailList = []
|
this.$axios.post(this.$api.enums.selectEnumByCategory, {
|
category: "要素"
|
}).then(res => {
|
res.data.map((item) => {
|
const obj = Object.assign({
|
essentials: item.label,
|
chapterNumber: item.value,
|
})
|
this.distributionDetailList.push(obj)
|
})
|
})
|
},
|
}
|
};
|
</script>
|
|
<style scoped>
|
>>>.el-dialog {
|
margin: 6vh auto 50px !important;
|
}
|
>>> .el-dialog__body {
|
max-height: 68vh;
|
overflow-y: auto;
|
}
|
>>> .is-required {
|
margin-bottom: 6px;
|
}
|
.table {
|
width: 100%;
|
margin-top: 20px;
|
}
|
.table td {
|
width: 30px;
|
text-align: center;
|
}
|
.table th {
|
width: 70px;
|
height: 70px;
|
text-align: center;
|
}
|
.div-with-line {
|
width: 70px;
|
height: 70px;
|
position: relative;
|
/*overflow: hidden; /* 隐藏溢出内容 */
|
}
|
.div-with-line::after {
|
content: '';
|
position: absolute;
|
bottom: 0;
|
height: 1px;
|
background-color: #000000;
|
left: 50%;
|
transform: translateX(-50%) rotate(45deg);
|
transform-origin: center 50%;
|
top: 50%;
|
width: 100px;
|
}
|
</style>
|
