zenglf
2023-09-18 92ff846fb659c62037a32b1d8c15eae9df9d9b54
src/views/eam/modules/predictiveWorkOrder/ActualWorkHoursEditTable.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,342 @@
<template>
  <a-card
    :bordered="false"
    :class="'cust-erp-sub-tab'"
  >
    <a-table
      ref="table"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      @change="handleTableChange"
    >
      <template
        v-for="col in columns"
        :slot="col.dataIndex"
        slot-scope='text, record, index'
      >
        <div :key="col.dataIndex">
          <a-input-search
            v-if="col.dataIndex == 'username'"
            enter-button
            @search="onSearchUser(index)"
            :value="text"
            :read-only="true"
            :disabled="orderStatus!='4'"
            @change="(e) => handleChange(e, record.key, col, index)"
          />
          <a-input-number
            :value="text"
            v-if="col.dataIndex == 'actualWorkingHourQuota'"
            :min="0"
            :max="99999"
            @change="(e)=>handleChange(e, record.key, col, index)"
            :disabled="record.disabled||orderStatus!='4'"
          />
        </div>
      </template>
      <span
        slot='action'
        slot-scope='text, record,index'
      >
        <a
          v-has="'specialtyMaintenanceOrder:actualWorkHoursDelete'"
          v-if="orderStatus=='4'"
          @click="handleDelete(index)"
        >删除</a>
      </span>
    </a-table>
    <a-button
      style="width: 100%; margin-top: 16px; margin-bottom: 8px"
      type="dashed"
      icon="plus"
      @click="addHour"
      :disabled="orderStatus!='4'"
    >添加实际工时
    </a-button>
    <div :style="{width: '100%',border: '1px solid #e9e9e9',padding: '10px 16px',background: '#fff',}">
      <a-row :style="{textAlign:'right'}">
        <a-button
          :style="{marginRight: '8px'}"
          @click="handleCancel"
        >
          å–消
        </a-button>
        <a-button
          @click="handleOk(1)"
          type="primary"
          :style="{marginRight: '8px'}"
          :disabled="orderStatus!='4'"
          v-has="'specialtyMaintenanceOrder:actualWorkHoursTS'"
        >暂存</a-button>
        <a-button
          @click="handleOk(0)"
          type="primary"
          :disabled="orderStatus!='4'"
          v-has="'specialtyMaintenanceOrder:actualWorkHoursSave'"
        >保存</a-button>
      </a-row>
      <!-- :disabled="false" -->
    </div>
    <actual-hour-user-select
      ref="actualUserSelect"
      @sendUserRecord="sendUserRecord"
    >
    </actual-hour-user-select>
  </a-card>
</template>
<script>
import { postAction, getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import pick from 'lodash.pick'
import JEllipsis from '@/components/jeecg/JEllipsis'
import ActualHourUserSelect from './select/ActualHourUserSelect.vue'
export default {
  name: 'ActualWorkHoursEditTable',
  mixins: [JeecgListMixin],
  components: {
    JEllipsis,
    ActualHourUserSelect
  },
  props: {
    orderId: {
      type: String,
      required: false,
      default: ''
    },
    orderStatus: {
      type: String,
      required: false,
      default: ''
    },
    equipmentId: {
      type: String,
      required: false,
      default: ''
    },
    teamId: {
      type: String,
      required: false,
      default: ''
    },
  },
  data() {
    return {
      title: "实际工时",
      flag: false,//主页面的标记位  ç”¨äºŽåŒºåˆ†æ˜¯å¦ç¡®è®¤è¿‡å·¥å•工艺 æ¥åŒºåˆ†table页展示 å·¥å•工序 è¿˜æ˜¯äº§å“å·¥åº
      visible: false,
      model: {},
      obj: {},
      maskClosable: true,
      confirmLoading: false,
      form: this.$form.createForm(this),
      /* åˆ†é¡µå‚æ•° */
      ipagination: {
        current: 1,
        pageSize: 99,
        pageSizeOptions: ['99', '199'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " å…±" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      validatorRules: {
        userId: {
          rules: [
            { required: true, message: '请选择人员!' },
          ]
        },
        actual_hour: {
          rules: [
            { required: false, message: '请填写工时!' },
          ]
        },
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      drawerWidth: "100%",
      visible: false,
      disableSubmit: false,
      disableSelect: false,
      loading: false,
      dataSource: [],
      columns: [
        {
          title: '*人员编码',
          dataIndex: 'username',
          align: "center",
          scopedSlots: { customRender: 'username' },
          className: 'red',
          width: 250,
        },
        {
          title: '人员名称',
          dataIndex: 'realname',
          align: "center",
          width: 250,
        },
        {
          title: '*实际工时',
          dataIndex: 'actualWorkingHourQuota',
          align: "center",
          className: 'red',
          scopedSlots: { customRender: 'actualWorkingHourQuota' },
          width: 250,
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 250,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: "/eam/maintenanceOrderActualWorkingHour/getMaintenanceOrderActualWorkingHourList",
        confirmHour: "/eam/maintenanceOrderActualWorkingHour/add"
      },
      changeIndex: 0
    }
  },
  created() {
    this.queryParam['maintenanceOrderId'] = this.orderId;
    this.queryParam['equipmentId'] = this.equipmentId
    this.loadData(1);
  },
  watch: {
    orderId: {
      immediate: true,
      handler(val) {
        this.clearList();
        this.queryParam['maintenanceOrderId'] = val
        this.queryParam['equipmentId'] = this.equipmentId
        this.loadData(1);
      }
    },
  },
  methods: {
    addHour() {
      this.dataSource.push({ id: this.getUuiD(16), userId: '', maintenanceOrderId: this.dailyMaintenanceOrderId, actualWorkingHourQuota: 0, username: '', realname: '' })
    },
    handleCancel() {
      this.$bus.$emit('closeDrawer');
    },
    close() {
      this.$emit('close');
      this.dataSource = []
      this.disableSubmit = false;
      this.visible = false;
    },
    // handleDeleteFake(index) {
    //   this.dataSource.splice(index,1);
    // },
    handleDelete(text, record, index) {
      this.dataSource.splice(index, 1);
    },
    handleOk(saveStatus) {
      const that = this
      if (saveStatus == 0) {
        let workHoursDataSource = that.dataSource;
        for (let i = 0; i < workHoursDataSource.length; i++) {
          if (workHoursDataSource[i].userId == undefined || workHoursDataSource[i].userId == null || workHoursDataSource[i].userId == '') {
            that.$message.warning("请选择第" + (i + 1) + "行维修人员!");
            return false;
          }
          if (workHoursDataSource[i].actualWorkingHourQuota == undefined || workHoursDataSource[i].actualWorkingHourQuota == null || workHoursDataSource[i].actualWorkingHourQuota == '') {
            that.$message.warning("请填写第" + (i + 1) + "行实际工时!");
            return false;
          }
        }
      }
      if (that.dataSource.length === 0) {
        that.$message.warning("请选择人员!")
        return
      }
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let formData = {}
          formData.maintenanceOrderId = that.orderId;
          formData.maintenanceOrderActualWorkingHourList = that.dataSource;
          formData.equipmentId = that.equipmentId;
          let obj = obj = postAction(this.url.confirmHour, formData)
          obj.then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
            that.close()
            that.loadData(1);
          })
        }
      })
    },
    handleChange(value, key, column, index) {
      let that = this;
      const temp = [...that.dataSource];
      const target = temp[index];
      if (target) {
        target[column.dataIndex] = value;
        if ('userId' == column.dataIndex) {
          target['userId'] = value;
        }
        if ('actualWorkingHourQuota' == column.dataIndex) {
          target['actualWorkingHourQuota'] = value;
        }
        that.dataSource = temp;
      }
    },
    onSearchUser(index) {
      this.recordIndex = index
      this.$refs.actualUserSelect.list(this.teamId)
      this.$refs.actualUserSelect.title = '人员选择'
    },
    sendUserRecord(data, val) {
      let record = data.record
      const temp = [...this.dataSource]
      const target = temp[this.recordIndex]
      if (target) {
        console.log(record)
        target.userId = record.id;
        target.username = record.username;
        target.realname = record.realname;
        this.dataSource = temp
      }
    },
    clearList() {
      this.dataSource = [];
      this.ipagination.current = 1
    },
    getUuiD(randomLength) {
      return Number(
        Math.random()
          .toString()
          .substr(2, randomLength) + Date.now()
      ).toString(36)
    },
  },
}
</script>
<style scoped>
/deep/ .red {
  color: red;
}
</style>