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

applications/dee-mes/src/privateComponents/components/TempWorkAllocationProcessEditList/config.js

+export default {
+  layoutConfigData: [
+    {
+      title: '高级组件配置',
+      data: [
+        {
+          key: 'readOnly',
+          title: '只读',
+          component: {
+            name: 'el-checkbox'
+          }
+        },
+        {
+          key: 'isProcess',
+          title: '是否在流程中',
+          component: {
+            name: 'el-checkbox'
+          }
+        }
+      ]
+    }
+  ],
+  data() {
+    return {
+    }
+  },
+  created() {
+  },
+  computed: {
+
+  },
+  methods: {
+
+  }
+}
+

applications/dee-mes/src/privateComponents/components/TempWorkAllocationProcessEditList/index.vue

+<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>