备件请购功能

qushaowei

2025-05-29 48ea29772a71aafb7c687a62a5ba4ecc9b6635a8

备件请购功能

 src/views/eam/spare/modules/EamSparePartRequisition/EamSparePartRequisitionDetailModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,117 @@
<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">

        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="delFlag" label="删除标记">
          <a-input-number v-model="model.delFlag"/>
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="partId" label="备品备件ID">
          <a-input placeholder="请输入备品备件ID" v-model="model.partId" />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="requisitionNum" label="请购数量">
          <a-input placeholder="请输入请购数量" v-model="model.requisitionNum" />
        </a-form-model-item>

      </a-form-model>
    </a-spin>
  </j-modal>
</template>

<script>
  import { httpAction } from '@api/manage'
  import moment from "moment"

  export default {
    name: "EamSparePartRequisitionDetailModal",
    data () {
      return {
        title:"操作",
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },

        confirmLoading: false,
        validatorRules:{
        },
        url: {
          add: "/eam/eamSparePartRequisitionDetail/add",
          edit: "/eam/eamSparePartRequisitionDetail/edit",
        },
      }
    },
    created () {
    },
    methods: {
      add () {
        //初始化默认值
        this.edit({});
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      close () {
        this.$emit('close');
        this.visible = false;
        this.$refs.form.clearValidate();
      },
      handleOk () {
        const that = this;
        // è§¦å‘表单验证
         this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).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();
            })
          }else{
             return false;
          }
        })
      },
      handleCancel () {
        this.close()
      },


    }
  }
</script>

<style lang="less" scoped>

</style>

 src/views/eam/spare/modules/EamSparePartRequisition/EamSparePartRequisitionExamineModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,122 @@
<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    :cancel="close"
  >

    <a-spin :spinning="confirmLoading">
      <a-form-model
        ref="form"
        :model="model"
        :rules="validatorRules"
      >
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="requisitionCode"
          label="请购单编码"
        >
          <a-input
            placeholder="请购单编码自动生成"
            v-model="model.requisitionCode"
            :disabled="true"
          />
        </a-form-model-item>
      </a-form-model>
    </a-spin>

    <template slot='footer'>
      <a-popconfirm
        @confirm="handleReject"
        title="确认将当前备件请购单驳回？"
      >
        <a-button
          :loading='confirmLoading'
          :style="{marginRight: '8px'}"
        >驳回</a-button>
      </a-popconfirm>
      <a-popconfirm
        @confirm="handleOk"
        title="确认将当前备件请购单审核通过？"
      >
        <a-button
          type='primary'
          :loading='confirmLoading'
          :style="{marginRight: '8px'}"
        >通过</a-button>
      </a-popconfirm>
    </template>
  </j-modal>
</template>

<script>
import { postAction } from '@api/manage'

export default {
  name: "EamSparePartRequisitionExamineModal",
  data() {
    return {
      title: "审核",
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },

      confirmLoading: false,
      validatorRules: {
      },
      url: {
        examine: "eam/eamSparePartRequisition/examineSpareRequisition"
      },
    }
  },
  created() {
  },
  methods: {
    examine(record) {
      this.model = Object.assign({}, record);
      this.visible = true;
    },
    close() {
      this.$emit('close');
      this.visible = false;
    },
    handleOk() {
      this.handleSubmit("3");
    },
    handleReject() {
      this.handleSubmit("4");
    },
    handleSubmit(status) {
      const that = this;
      that.model.requisitionStatus = status;
      postAction(that.url.examine, that.model).then((res) => {
        if (res.success) {
          that.$message.success(res.message);
          that.$emit('ok');
        } else {
          that.$message.warning(res.message);
        }
      }).catch(() => {
        that.$message.error('操作失败，请稍后重试');
      }).finally(() => {
        that.confirmLoading = false;
        that.close();
      });
    }
  }
}
</script>

<style lang="less" scoped>
</style>

 src/views/eam/spare/modules/EamSparePartRequisition/EamSparePartRequisitionModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,145 @@
<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >

    <a-spin :spinning="confirmLoading">
      <a-form-model
        ref="form"
        :model="model"
        :rules="validatorRules"
      >
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="requisitionCode"
          label="请购单编码"
        >
          <a-input
            placeholder="请购单编码自动生成"
            v-model="model.requisitionCode"
            :disabled="true"
          />
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="remark"
          label="备注"
        >
          <a-textarea
            placeholder="请输入备注"
            v-model="model.remark"
          />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </j-modal>
</template>

<script>
import { httpAction, getAction } from '@api/manage'
import moment from "moment"

export default {
  name: "EamSparePartRequisitionModal",
  data() {
    return {
      title: "操作",
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },

      confirmLoading: false,
      validatorRules: {},
      url: {
        add: "/eam/eamSparePartRequisition/add",
        edit: "/eam/eamSparePartRequisition/edit",
        generateRequisitionCode: "sys/sysBusinessCodeRule/generateBusinessCodeSeq"
      },
    }
  },
  created() {
  },
  methods: {
    add() {
      const that = this
      let params = {
        businessCode: "SpareRequisitionCodeRule"
      }
      getAction(that.url.generateRequisitionCode, params).then((res) => {
        if (res.success) {
          this.model = {
            requisitionCode: res.result
          }
        } else {
          that.$message.warning(res.message);
        }
      })
      //初始化默认值
      that.edit(this.model);
    },
    edit(record) {
      this.model = Object.assign({}, record);
      this.visible = true;
    },
    close() {
      this.$emit('close');
      this.visible = false;
      this.$refs.form.clearValidate();
    },
    handleOk() {
      const that = this;
      // è§¦å‘表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true;
          let httpurl = '';
          let method = '';
          if (!this.model.id) {
            httpurl += this.url.add;
            method = 'post';
          } else {
            httpurl += this.url.edit;
            method = 'put';
          }
          httpAction(httpurl, this.model, method).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();
          })
        } else {
          return false;
        }
      })
    },
    handleCancel() {
      this.close()
    },

  }
}
</script>

<style lang="less" scoped>
</style>

 src/views/flowable/workflow/FlowTodo.vue

@@ -7,12 +7,23 @@
  <a-card :bordered='false'>
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div class='table-page-search-wrapper'>
      <a-form layout='inline' @keyup.enter.native='searchQuery'>
      <a-form
        layout='inline'
        @keyup.enter.native='searchQuery'
      >
        <a-row :gutter='24'>
          <a-col :lg='6' :md='8' :sm='24' :xl='4'>
          <a-col
            :lg='6'
            :md='8'
            :sm='24'
            :xl='4'
          >
            <a-form-item label='流程分类'>
              <j-dict-select-tag v-model='queryParam.category' dictCode='flow_type'
                                 placeholder='请选择流程分类'></j-dict-select-tag>
              <j-dict-select-tag
                v-model='queryParam.category'
                dictCode='flow_type'
                placeholder='请选择流程分类'
              ></j-dict-select-tag>
            </a-form-item>
          </a-col>
          <!--<a-col :xl="4" :lg="6" :md="8" :sm="24">-->
@@ -20,35 +31,83 @@
          <!--<a-input placeholder="请输入流程名称" v-model="queryParam.flowName"></a-input>-->
          <!--</a-form-item>-->
          <!--</a-col>-->
          <a-col :lg='6' :md='8' :sm='24' :xl='4'>
          <a-col
            :lg='6'
            :md='8'
            :sm='24'
            :xl='4'
          >
            <a-form-item label='当前节点'>
              <a-input v-model='queryParam.name' placeholder='请输入当前节点精确查询'></a-input>
              <a-input
                v-model='queryParam.name'
                placeholder='请输入当前节点精确查询'
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :lg='6' :md='8' :sm='24' :xl='4'>
          <a-col
            :lg='6'
            :md='8'
            :sm='24'
            :xl='4'
          >
            <a-form-item label='简要描述'>
              <a-input v-model='queryParam.title' placeholder='请输入简要描述'></a-input>
              <a-input
                v-model='queryParam.title'
                placeholder='请输入简要描述'
              ></a-input>
            </a-form-item>
          </a-col>
          <template v-if='toggleSearchStatus'>
            <a-col :lg='8' :md='12' :sm='24' :xl='8'>
            <a-col
              :lg='8'
              :md='12'
              :sm='24'
              :xl='8'
            >
              <a-form-item label='任务时间范围'>
                <j-date v-model='queryParam.startTime' :show-time='false' class='query-group-cust'
                <j-date
                  v-model='queryParam.startTime'
                  :show-time='false'
                  class='query-group-cust'
                        date-format='YYYY-MM-DD HH:mm:ss'
                        placeholder='请选择开始时间'></j-date>
                  placeholder='请选择开始时间'
                ></j-date>
                <span class='query-group-split-cust'></span>
                <j-date v-model='queryParam.endTime' :show-time='false' class='query-group-cust'
                <j-date
                  v-model='queryParam.endTime'
                  :show-time='false'
                  class='query-group-cust'
                        date-format='YYYY-MM-DD HH:mm:ss'
                        placeholder='请选择结束时间'></j-date>
                  placeholder='请选择结束时间'
                ></j-date>
              </a-form-item>
            </a-col>
          </template>

          <a-col :lg='6' :md='8' :sm='24' :xl='4'>
            <span class='table-page-search-submitButtons' style='float: left;overflow: hidden;'>
              <a-button icon='search' type='primary' @click='searchQuery'>查询</a-button>
              <a-button icon='reload' style='margin-left: 8px' @click='searchReset'>重置</a-button>
               <a style='margin-left: 8px' @click='handleToggleSearch'>
          <a-col
            :lg='6'
            :md='8'
            :sm='24'
            :xl='4'
          >
            <span
              class='table-page-search-submitButtons'
              style='float: left;overflow: hidden;'
            >
              <a-button
                icon='search'
                type='primary'
                @click='searchQuery'
              >查询</a-button>
              <a-button
                icon='reload'
                style='margin-left: 8px'
                @click='searchReset'
              >重置</a-button>
              <a
                style='margin-left: 8px'
                @click='handleToggleSearch'
              >
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
@@ -63,7 +122,10 @@
    <div class='table-operator'>
      <a-dropdown v-if='selectedRowKeys.length > 0 '>
        <a-menu slot='overlay'>
          <a-menu-item key='1' @click='batchHandle'>
          <a-menu-item
            key='1'
            @click='batchHandle'
          >
            <a-icon type='delete' />
            æ‰¹é‡å¤„理
          </a-menu-item>
@@ -76,10 +138,16 @@

    <!-- table区域-begin -->
    <div>
      <div class='ant-alert ant-alert-info' style='margin-bottom: 16px;'>
      <div
        class='ant-alert ant-alert-info'
        style='margin-bottom: 16px;'
      >
        <i class='anticon anticon-info-circle ant-alert-icon'></i>已选择&nbsp;<a style='font-weight: 600'>{{
          selectedRowKeys.length }}</a>项&nbsp;&nbsp;
        <a style='margin-left: 24px' @click='onClearSelected'>清空</a>
        <a
          style='margin-left: 24px'
          @click='onClearSelected'
        >清空</a>
      </div>

      <a-table
@@ -93,54 +161,115 @@
        bordered
        rowKey='id'
        size='middle'
        @change='handleTableChange'>
        @change='handleTableChange'
      >

        <span slot='action' slot-scope='text, record'>
        <span
          slot='action'
          slot-scope='text, record'
        >
            <a @click='handelDetail(record,text)'>执行/审批</a>
        </span>

      </a-table>
    </div>
    <AssignFileStreamHandle ref='modalFormApproval' :selectShenpiData='selectShenpiData'
                            @searchReset='searchReset'></AssignFileStreamHandle>
    <DispatchFileHandle ref='modalFormDispatchFileXq' :selectShenpiData='selectDispatchFileXqData'
                        @searchReset='searchReset'></DispatchFileHandle>
    <DispatchFileBachHandleStyle ref='modalFormDispatchFileBatch' @ok='modalFormOk'
                                 @searchReset='searchReset'></DispatchFileBachHandleStyle>
    <AssignFileStreamHandle
      ref='modalFormApproval'
      :selectShenpiData='selectShenpiData'
      @searchReset='searchReset'
    ></AssignFileStreamHandle>
    <DispatchFileHandle
      ref='modalFormDispatchFileXq'
      :selectShenpiData='selectDispatchFileXqData'
      @searchReset='searchReset'
    ></DispatchFileHandle>
    <DispatchFileBachHandleStyle
      ref='modalFormDispatchFileBatch'
      @ok='modalFormOk'
      @searchReset='searchReset'
    ></DispatchFileBachHandleStyle>
    <!--单个流程处理-->
    <InspectionOrderHandle ref='modalFormInspectionOrder' :selectShenpiData='selectInspectionOrderData'
                           @searchReset='searchReset'></InspectionOrderHandle>
    <week-maintenance-approval-modal ref='weekMaintenanceApprovalModal' :selectShenpiData='selectWeekMaintenanceData'
                                     @searchReset='searchReset'></week-maintenance-approval-modal>
    <repair-order-approval-modal ref='repairOrderApprovalModal' :selectShenpiData='selectRepairOrderData'
                                 @searchReset='searchReset'></repair-order-approval-modal>
    <out-bound-order-handle ref='outBoundOrderHandle' :selectShenpiData='selectOutBoundOrderData'
                            @searchReset='searchReset'></out-bound-order-handle>
    <stocktaking-bound-handle ref='stocktakingBoundHandle' :selectShenpiData='selectStocktakingBoundOrderData'
                              @searchReset='searchReset'></stocktaking-bound-handle>
    <InspectionOrderHandle
      ref='modalFormInspectionOrder'
      :selectShenpiData='selectInspectionOrderData'
      @searchReset='searchReset'
    ></InspectionOrderHandle>
    <week-maintenance-approval-modal
      ref='weekMaintenanceApprovalModal'
      :selectShenpiData='selectWeekMaintenanceData'
      @searchReset='searchReset'
    ></week-maintenance-approval-modal>
    <repair-order-approval-modal
      ref='repairOrderApprovalModal'
      :selectShenpiData='selectRepairOrderData'
      @searchReset='searchReset'
    ></repair-order-approval-modal>
    <out-bound-order-handle
      ref='outBoundOrderHandle'
      :selectShenpiData='selectOutBoundOrderData'
      @searchReset='searchReset'
    ></out-bound-order-handle>
    <stocktaking-bound-handle
      ref='stocktakingBoundHandle'
      :selectShenpiData='selectStocktakingBoundOrderData'
      @searchReset='searchReset'
    ></stocktaking-bound-handle>


    <loss-bound-handle ref='lossBoundHandle' :selectShenpiData='selectLossBoundOrderData'
                       @searchReset='searchReset'></loss-bound-handle>
    <loss-bound-handle
      ref='lossBoundHandle'
      :selectShenpiData='selectLossBoundOrderData'
      @searchReset='searchReset'
    ></loss-bound-handle>

    <!--批量处理-->
    <inspection-order-batch-handle ref='inspectionOrderBatchHandleRef' :taskList='selectionRows'
                                   @searchReset='searchReset' />
    <inspection-order-batch-handle
      ref='inspectionOrderBatchHandleRef'
      :taskList='selectionRows'
      @searchReset='searchReset'
    />

    <week-maintenance-batch-approval-modal ref='weenMaintenanceBatchApprovalModalRef' :taskList='selectionRows'
                                           @searchReset='searchReset' />
    <equipment-lean-out-approval-modal ref='equipmentLeanOutApprovalModelRef' @searchReset='searchReset' />
    <week-maintenance-batch-approval-modal
      ref='weenMaintenanceBatchApprovalModalRef'
      :taskList='selectionRows'
      @searchReset='searchReset'
    />
    <equipment-lean-out-approval-modal
      ref='equipmentLeanOutApprovalModelRef'
      @searchReset='searchReset'
    />

    <second-maintenance-approval-modal ref='secondMaintenanceApprovalModal'
    <second-maintenance-approval-modal
      ref='secondMaintenanceApprovalModal'
                                       :selectShenpiData='selectSecondMaintenanceData'
                                       @searchReset='searchReset'></second-maintenance-approval-modal>
    <third-maintenance-approval-modal ref='thirdMaintenanceApprovalModal' :selectShenpiData='selectThirdMaintenanceData'
                                      @searchReset='searchReset'></third-maintenance-approval-modal>
    <equipment-seal-up-approval-modal ref='equipmentSealUpApprovalModelRef' @searchReset='searchReset' />
    <inbound-order-handle ref='inboundOrderApprovalModal' :selectInboundOrderData='selectInboundOrderData'
                          @searchReset='searchReset'></inbound-order-handle>
    <equipment-transfer-approval-modal ref='equipmentTransferApprovalModelRef' @searchReset='searchReset' />
    <equipment-scrap-approval-modal ref='equipmentScrapApprovalModelRef' @searchReset='searchReset' />
      @searchReset='searchReset'
    ></second-maintenance-approval-modal>
    <third-maintenance-approval-modal
      ref='thirdMaintenanceApprovalModal'
      :selectShenpiData='selectThirdMaintenanceData'
      @searchReset='searchReset'
    ></third-maintenance-approval-modal>
    <equipment-seal-up-approval-modal
      ref='equipmentSealUpApprovalModelRef'
      @searchReset='searchReset'
    />
    <inbound-order-handle
      ref='inboundOrderApprovalModal'
      :selectInboundOrderData='selectInboundOrderData'
      @searchReset='searchReset'
    ></inbound-order-handle>
    <equipment-transfer-approval-modal
      ref='equipmentTransferApprovalModelRef'
      @searchReset='searchReset'
    />
    <equipment-scrap-approval-modal
      ref='equipmentScrapApprovalModelRef'
      @searchReset='searchReset'
    />
    <spare-part-apply-handle
      ref='sparePartApplyModal'
      :selectSparePartApplyData='selectSparePartApplyData'
      @searchReset='searchReset'
    ></spare-part-apply-handle>
  </a-card>
</template>

@@ -171,6 +300,7 @@
import stocktakingBoundHandle from '@views/flowable/workflow/stocktakingBound/stocktakingBoundHandle.vue'
import lossBoundHandle from '@views/flowable/workflow/lossBound/lossBoundHandle.vue'
import InboundOrderHandle from '@views/flowable/workflow/inboundOrder/InboundOrderHandle.vue'
import SparePartApplyHandle from '@views/flowable/workflow/sparePartApply/SparePartApplyHandle.vue'

export default {
  name: 'NcDeviceCharactersList',
@@ -194,7 +324,8 @@
    EquipmentSealUpApprovalModal,
    InboundOrderHandle,
    EquipmentTransferApprovalModal,
    EquipmentScrapApprovalModal
    EquipmentScrapApprovalModal,
    SparePartApplyHandle
  },
  data() {
    return {
@@ -280,6 +411,7 @@
      selectLossBoundOrderData: {},
      selectStocktakingBoundOrderData: {},
      selectInboundOrderData: {},
      selectSparePartApplyData: {},
      //业务信息ID
      dataId: undefined
    }
@@ -380,6 +512,9 @@
          break
        case 'equipment_scrap':
          this.handleEquipmentScrap(item)
          break
        case 'spare_part_apply':
          this.handleSparePartApplyApproval(item)
          break
        default:
          alert('没找到该流程')
@@ -536,7 +671,15 @@
      this.$refs.equipmentScrapApprovalModelRef.title = item.name
      this.$refs.equipmentScrapApprovalModelRef.handleDetail(item)
      this.$refs.equipmentScrapApprovalModelRef.disableSubmit = false
    },
    handleSparePartApplyApproval(item) {
      if (item && item.dataId) {
        this.selectSparePartApplyData = Object.assign({}, item)
        this.$refs.sparePartApplyModal.auditVisible = true
        this.$refs.sparePartApplyModal.clearTableSource()
        this.$refs.sparePartApplyModal.getAllApproveData(item)
    }
    },
  }
}
</script>

 src/views/flowable/workflow/sparePartApply/SparePartApplyHandle.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,503 @@
<!--
 Description: å·¥ä½œæµ-出库申请单审批处理页面 List
 Author: ä½œè€… liuyh
 Date:   2025-02-27
-->
<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    :footer="null"
    @cancel="handCancel"
  >
    <a-card :bordered="false">
      <div>
        <b>{{ selectSparePartApplyData.description }}</b>
        <br>
        <br>
        <a-tag color="blue">
          å¤„理人 {{ selectSparePartApplyData.assignee_dictText }}
        </a-tag>
        <a-tag color="blue">
          åˆ›å»ºæ—¶é—´ {{ selectSparePartApplyData.createTime }}
        </a-tag>
        <br>
        <br>
        <button
          @click="fetchAndShowBmp"
          class="btn-custom"
        >打开流程图</button>
        <div v-if="imageSrc">
          <img
            :src="imageSrc"
            alt="Fetched Image"
          />
        </div>
        <hr class="shallow-hr">
      </div>
      <div>
        <b>申请详情</b>
        <br>
        <a-form :form='form'>
          <a-spin :spinning="spinning">
            <a-tabs
              default-active-key='1'
              @change='callback'
            >
              <a-tab-pane
                key='2'
                tab='申请明细信息'
              >
                <a-row>
                  <a-col :span='span'>
                    <a-form-model-item
                      label='备件请购单编号'
                      :labelCol='labelCol'
                      :wrapperCol='wrapperCol'
                      prop='requisitionCode'
                    >
                      <a-input
                        :disabled='coldisabled'
                        v-model='tableRowRecord.requisitionCode'
                      ></a-input>
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-table
                  ref="table"
                  size="middle"
                  bordered
                  rowKey="id"
                  :scroll="{x:'max-content'}"
                  :columns="columns"
                  :dataSource="dataSource"
                  :pagination="ipagination"
                  :loading="loading"
                  :rowSelection="null"
                >
                </a-table>
              </a-tab-pane>
              <a-tab-pane
                key='3'
                tab='流程节点'
              >
                <a-timeline>
                  <a-timeline-item
                    v-for="(item,index) in hitaskDataSource"
                    :key="index"
                  >
                    <div>
                      <h3 style="font-weight: bold;">{{item.taskName}}</h3>
                      <div>处理人：{{item.assignee_dictText}}</div>
                      <div v-if="index !==0">处理时长：{{item.duration}}</div>
                      <div v-if="item.name !== '提交申请'">处理类型：{{item.sequenceFlowName}}</div>
                      <div v-if="item.description">处理意见：{{item.description}}</div>
                    </div>
                  </a-timeline-item>
                </a-timeline>
              </a-tab-pane>
            </a-tabs>
          </a-spin>
        </a-form>
      </div>
      <div v-if="auditVisible">
        <hr class="shallow-hr">
        <br>
        <b>审批详情</b>
        <br>
        <a-form-model
          ref="form"
          :model="approveData"
          :rules="validatorRules"
          slot="detail"
        >
          <a-row>
            <a-col ::span='span'>
              <a-form-model-item
                label="申请人"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop='reportUser'
              >
                <a-input
                  :disabled='coldisabled'
                  v-model='tableRowRecord.reportUser'
                ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col ::span='span'>
              <a-form-model-item
                label="申请时间"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="createTime"
              >
                <a-input
                  :disabled='coldisabled'
                  v-model='tableRowRecord.createTime'
                ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col
              :span="24"
              class="btxx"
            >
              <a-form-item
                label="审批状态"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <a-select
                  v-model='assignFileStream.status'
                  placeholder="请选择审批结果"
                >
                  <a-select-option value="1">通过</a-select-option>
                  <a-select-option value="2">驳回</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col
              :span="24"
              class="btxx"
            >
              <a-form-model-item
                label="审批意见"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <a-textarea
                  v-model="assignFileStream.approvalOpinion"
                  rows="4"
                  placeholder="请输入审批意见"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
          <div
            class="table-operator"
            style="text-align: right;"
          >
            <a-button
              @click="handleQueXiaoTask"
              type="primary"
              icon="close"
            >取消</a-button>
            <a-button @click="submitForm">提交</a-button>
          </div>
        </a-form-model>
      </div>
    </a-card>

  </a-modal>
</template>

<script>

import '@assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { getAction, deleteAction, postAction, downFile, httpAction } from '@api/manage'
export default {
  name: 'FlowShenPi',
  mixins: [mixinDevice],
  props: {
    selectSparePartApplyData: {
      type: Object,
      required: true
    }
  },

  data() {
    return {
      form: this.$form.createForm(this),
      span: 12,
      span1: 8,
      coldisabled: true,
      spinning: false,
      tableRowRecord: {},
      assignFileStream: {},
      tableDataSource: [],
      usageDataSource: [],
      hitaskDataSource: [],
      dataSource: [],
      bomForm: {},
      imageSrc: null,
      drawerVisible: true,
      auditVisible: true,
      loading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 30 },
        sm: { span: 16 }
      },
      /* åˆ†é¡µå‚æ•° */
      ipagination: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['5', '10', '50'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " å…±" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '备件分类',
          align: "left",
          dataIndex: 'partCategory'
        },
        {
          title: '备件编码',
          align: "left",
          dataIndex: 'partCode'
        },
        {
          title: '备件名称',
          align: "center",
          dataIndex: 'partName'
        },
        {
          title: '备件规格',
          align: "center",
          dataIndex: 'partModel'
        },
        {
          title: '型号',
          align: "center",
          dataIndex: 'partSpecification'
        },

        {
          title: '申请数量',
          align: "center",
          dataIndex: 'quantity'
        },
      ],
      validatorRules: {
        status: {
          rules: [
            { required: true, message: '请选择审批状态!' },
          ]
        },
      },
      approveData: {},
      flowData: {},
      title: '审批页面',
      width: 1200,
      visible: false,
      // è¡¨å¤´
      url: {
        getSparePartRequisitionList: '/eam/eamSparePartRequisition/getSparePartRequisitionList',
        diagramView: '/assign/flow/diagramView',
        queryHisTaskList: '/assign/flow/queryHisTaskList',
        approve: "/eam/eamSparePartRequisition/approval",
      },
      dictOptions: {},
      superFieldList: [],
      workflowSource: []
    }
  },
  created() {
  },
  computed: {},
  methods: {
    callback() {
    },
    handCancel() {
      this.assignFileStream = {}
      this.visible = false
    },
    clearTableSource() {
      this.tableDataSource = []
      this.usageDataSource = []
    },
    fetchAndShowBmp() {
      console.log('flowData----->', this.flowData)
      try {
        let parm = {
          processDefinitionId: this.flowData.processDefinitionId,
          processInstanceId: this.flowData.processInstanceId,
          TaskDefinitionKey: this.flowData.processDefinitionKey
        }
        downFile(this.url.diagramView, parm, 'get').then((res => {
          console.log('Pica------>', res)
          const urlObject = window.URL.createObjectURL(new Blob([res]))
          this.imageSrc = urlObject
        }))
      } catch (error) {
        console.error('Error fetching image blob:', error)
        alert('无法加载图片，请稍后再试。')
      }
    },
    handleQueXiaoTask() {
      this.visible = false
      this.routeReload()
    },
    submitForm() {
      const that = this;
      if (!that.assignFileStream.status == null || that.assignFileStream.status === undefined) {
        this.$message.warning('请选择审批状态！')
        return false;
      }
      if (!that.assignFileStream.approvalOpinion == null || that.assignFileStream.approvalOpinion === undefined) {
        this.$message.warning('请输入审批意见！')
        return false;
      }
      // è§¦å‘表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let url = this.url.approve
          let method = 'post';
          let EamSparePartRequisitionRequest = {}
          EamSparePartRequisitionRequest.id = this.flowData.dataId
          EamSparePartRequisitionRequest.status = that.assignFileStream.status;
          EamSparePartRequisitionRequest.approvalOpinion = that.assignFileStream.approvalOpinion;
          EamSparePartRequisitionRequest.comment = that.assignFileStream.approvalOpinion;
          EamSparePartRequisitionRequest.dataId = this.selectSparePartApplyData.dataId
          EamSparePartRequisitionRequest.taskId = this.selectSparePartApplyData.id
          EamSparePartRequisitionRequest.userId = this.selectSparePartApplyData.assignee
          EamSparePartRequisitionRequest.instanceId = this.selectSparePartApplyData.procInstId
          EamSparePartRequisitionRequest.targetKey = this.selectSparePartApplyData.taskDefKey
          EamSparePartRequisitionRequest.values = this.selectSparePartApplyData.variables
          EamSparePartRequisitionRequest.assignee = this.selectSparePartApplyData.assignee
          httpAction(url, EamSparePartRequisitionRequest, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              this.handCancel()
              //刷新表格
              that.$emit('searchReset')
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
          })
        }

      })
    },


    getAllApproveData(item) {
      this.tableRowRecord = {}
      this.assignFileStream = {}
      this.visible = true
      this.loading = true
      console.log('selectSparePartApplyData----->', this.selectSparePartApplyData)
      this.flowData = item
      getAction(this.url.queryHisTaskList, { procInstId: item.procInstId }).then(res => {
        if (res.success) {
          this.hitaskDataSource = res.result
        }
      })
      getAction(this.url.getSparePartRequisitionList, { id: item.dataId }).then(res => {
        if (res.success) {
          this.tableRowRecord.requisitionCode = res.result.records[0].requisitionCode
          this.tableRowRecord.reportUser = res.result.records[0].reportUser
          this.tableRowRecord.createTime = res.result.records[0].createTime
          this.dataSource = res.result.records[0].sparePartRequisitionDetailList
          if (res.result.total) {
            this.ipagination.total = res.result.total
          } else {
            this.ipagination.total = 0
          }
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style scoped>
.shallow-hr {
  border: 0;
  height: 1px; /* åˆ†ç•Œçº¿çš„高度 */
  background-color: rgba(0, 0, 0, 0.1); /* ä½¿ç”¨ RGBA é¢œè‰²ï¼Œå¹¶è®¾ç½®è¾ƒä½Žçš„透明度 */
  margin: 20px 0; /* åˆ†ç•Œçº¿ä¸Šä¸‹çš„外边距 */
}
.btn-custom {
  background-color: #4caf50; /* ç»¿è‰²èƒŒæ™¯ */
  color: white; /* ç™½è‰²æ–‡å­— */
  border: none; /* æ— è¾¹æ¡† */
  padding: 5px 15px; /* å†…边距 */
  text-align: center; /* æ–‡å­—居中 */
  text-decoration: none; /* æ— ä¸‹åˆ’线 */
  display: inline-block; /* è¡Œå†…块元素 */
  font-size: 12px; /* å­—体大小 */
  margin: 4px 2px; /* å¤–边距 */
  cursor: pointer; /* é¼ æ ‡æ‚¬åœæ—¶æ˜¾ç¤ºæ‰‹åž‹ */
  border-radius: 4px; /* åœ†è§’边框 */
}

.bold-large-label {
  font-weight: bold;
  font-size: 20px; /* æˆ–你需要的任何大小 */
}
.left_qiu {
  position: absolute;
  left: -74px;
  top: 0;
  width: 54px;
  border-radius: 50%;
  height: 54px;
  font-size: 13px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: #0099ff;
  transform: translate(0, 0);
}
/deep/ .ant-timeline-item-tail {
  left: -29px !important;
}
.left_qiu span {
  width: 3em;
  display: block;
  color: #fff;
  text-align: center;
}
.img {
  width: 75%;
}

.wrap {
  clear: both;
  width: 100%;
  display: flex;
  height: 50px;
  border: 1px solid #ccc;
  /* background-color: aqua; */
}
.box {
  width: 21%;
  height: 50px;
  border-right: 1px solid #ccc;
  line-height: 50px;
  /* background: red; */
  text-align: center;
  margin: auto;
}

@import '~@assets/less/common.less';
</style>