Commit db7d573e authored by “lixuyan”'s avatar “lixuyan”

临时工时分配流程中编辑列表

parent 956387c6
export default {
layoutConfigData: [
{
title: '高级组件配置',
data: [
{
key: 'readOnly',
title: '只读',
component: {
name: 'el-checkbox'
}
},
{
key: 'isProcess',
title: '是否在流程中',
component: {
name: 'el-checkbox'
}
}
]
}
],
data() {
return {
}
},
created() {
},
computed: {
},
methods: {
}
}
<template>
<div class="TempWorkAllocationEditList">
<dee-tools v-if="enableEdit" slot="header" :tools="tools" mode="normal" :collapse="false" />
<div class="dee-table dee-table-dis-border" @click.stop>
<el-table
ref="table"
:data="tableData"
max-height="700px"
@cell-click="cellClick"
@selection-change="handleSelectionChange"
>
<el-table-column
v-if="enableEdit"
type="selection"
width="55"
/>
<el-table-column prop="dxUserInfoId" label="操作者">
<template slot-scope="scope">
<el-select
v-if="!scope.row.id"
v-model="scope.row.dxUserInfoId"
size="small"
filterable
remote
:remote-method="remoteMethod"
:loading="loading"
@change="changeHandle(scope.row)"
>
<el-option
v-for="i in UserData"
:key="i.id"
:disabled="disabledOptions.includes(i.id||i.name)"
:label="i.name"
:value="i.id"
/>
</el-select>
<span v-else>{{ scope.row.dxUserInfo.name }}</span>
</template>
</el-table-column>
<el-table-column prop="workHour" label="工时分配(h)">
<template slot-scope="scope">
<span>{{ (scope.row.workHour / 60).toFixed(3) }}
</span>
</template>
</el-table-column>
<el-table-column prop="workHourOPercent" label="工时占比(%)">
<template slot-scope="scope">
<el-input-number
v-if="scope.row.id === tabClickIndex&&enableEdit"
ref="inputNumber"
v-model="scope.row.workHourOPercent"
:precision="0"
type="number"
:min="0"
:max="scope.row.maxPercent"
controls-position="right"
@change="changeHandle(scope.row)"
/>
<span v-else>{{ scope.row.workHourOPercent }}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import { post } from '@/utils/http'
import { getUsersByAccount } from '@/api/user'
import config from './config'
export default {
name: 'TempWorkAllocationProcessEditList',
componentName: '临时工时分配流程中编辑列表',
mixins: [config],
props: {
basicData: {
type: Object,
default: () => {}
},
itemObj: {
type: Object,
default: null
},
form: {
type: Object,
default: () => {}
}
},
data() {
return {
loading: false,
tableData: [],
tabClickIndex: '',
disabledOptions: [],
UserData: [],
tools: [{
name: '新增',
icon: '/icons/c-add.png',
handler: {
click: () => {
this.handleAdd()
}
}
},
{
name: '删除',
icon: '/icons/c-creatbackups.png',
handler: {
click: () => {
this.handleRemove()
}
}
}],
removedLists: [],
currentSelection: [],
maxPercent: 100
}
},
computed: {
enableEdit() {
return this.basicData.state === 'TF_Reviewing'
}
},
watch: {
'basicData.id': {
immediate: true,
deep: true,
handler(val) {
if (val) {
this.$nextTick(() => {
this.getTableData()
})
}
}
},
tableData: {
immediate: true,
deep: true,
handler(val) {
if (val && val.length) {
this.disabledOptions = val.map(item => {
return item.dxUserInfoId
}) || []
}
}
}
},
created() {
},
mounted() {
},
methods: {
remoteMethod(query) {
if (query) {
const params = { userAccount: query, containInnerUser: false }
this.loading = true
getUsersByAccount(params)
.then(res => {
this.UserData = res.items ? res.items : []
})
.finally(() => {
this.loading = false
})
}
},
getTableData() {
const params = {
'searchItems': {
'children': [{
items: [{
'fieldName': 'tempWorkHourId',
'operator': 'EQ',
'value': this.basicData.id
}],
operator: 'AND'
}],
'items': [],
'operator': 'AND'
},
'sortItem': [
{
'fieldName': 'modifyTime',
'sortOrder': 'desc'
}
],
'openProps': [
]
}
this.loading = true
this.$api.searchApi('TempWorkHourAssign', params).then(res => {
this.tableData = res.items.content.map(item => {
item.operator = 'NO_CHANGE'
item.maxPercent = 100
item.workHourOPercent = this.oPercent(item.workHour, this.basicData.workHours)
return item
})
this.loading = false
}).catch(() => {
this.loading = false
})
},
oPercent(num, total) {
return (Math.round(num / total * 10000) / 100.00)// 小数点后两位百分比
},
cellClick(row, column, event, cell) {
if (column.label === '工时占比(%)' && this.enableEdit) {
this.tabClickIndex = row.id
} else {
this.tabClickIndex = null
}
},
changeHandle(row) {
if (!row.dxUserInfoId) return this.$utils.showMessageWarning('请先选择操作者!')
if (row.workHourOPercent === null) {
row.workHour = null
} else {
const allPercent = this.$utils.sumArray(this.tableData, 'workHourOPercent')
const residue = (100 - (allPercent - row.workHourOPercent))
row.maxPercent = residue >= 0 ? residue : 0
if (allPercent <= 100) {
row.workHour = (row.workHourOPercent * this.basicData.workHours / 100).toFixed(2)
row.operator = 'MODIFY'
} else {
row.workHour = (row.maxPercent * this.basicData.workHours / 100).toFixed(2)
row.operator = 'MODIFY'
this.$utils.showMessageWarning('工时总占比不能超过百分之百!')
}
this.submit()
}
},
handleAdd() {
const flag = this.tableData.find(item => !item.dxUserInfoId || !item.workHour)
if (flag) return this.$utils.showMessageWarning('请完成列表内数据!')
const allPercent = this.$utils.sumArray(this.tableData, 'workHourOPercent')
if (allPercent >= 100) return this.$utils.showMessageWarning('工时总占比不能超过百分之百,请修改后添加!')
this.tableData.push({
tempId: parseInt(Math.random() * 100000000000000, 10),
dxUserInfoId: '',
tempWorkHourId: this.basicData.id,
workHour: 0,
operator: 'ADD',
workHourOPercent: 0
})
},
handleSelectionChange(val) {
this.currentSelection = val
},
handleRemove() {
if (this.currentSelection.length === 0) {
this.$utils.showMessageWarning('请至少选择一条记录!')
} else {
this.tableData = this.tableData.filter(x => this.currentSelection.every(y => x.id !== y.id || x.tempId !== y.tempId))
this.currentSelection.map(item => {
if (item.id) {
this.removedLists.push({
...item,
operator: 'REMOVE'
})
}
})
this.submit()
}
},
submit() {
const flag = this.tableData.find(item => !item.dxUserInfoId || !item.workHour)
if (flag) return this.$utils.showMessageWarning('请完成列表内数据的填写!')
const params = [
...this.tableData,
...this.removedLists
]
post(`/TempWorkHourAssign/recursions`, params)
.then((res) => {
this.$message({
message: res.message,
type: 'success'
})
this.loading = false
this.handleClose()
})
.catch((res) => {
this.loading = false
})
},
handleClose() {
this.$emit('cancel')
}
}
}
</script>
<style lang="scss">
.TempWorkAllocationEditList{
.btns{
margin-top: 20px;
display: flex;
justify-content: center;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment