cd-work-flow-web/src/views/oa/modules/IncidentTicketModal.vue

<template>
  <a-modal
    title="编辑"
    width="85%"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    destroyOnClose
    >
    <a-spin :spinning="confirmLoading">
      <!-- 主表单区域 -->
      <div class="table-page-search-wrapper">
        <div >
        <a-form-model layout="inline" ref="form" :model="formState" :rules="validatorRules" labelAlign="right">
          <a-row :gutter="24">
          <a-col :span="8" >
            <a-form-model-item label="日期" prop="accidentData" >
              <a-input v-model="formState.accidentData"    placeholder="请输入" readOnly></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="质量事故单主题" prop="accidentTheme">
              <a-input v-model="formState.accidentTheme"   placeholder="请输入" readOnly></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="质量事故单号" prop="accidentNumber">
              <a-input v-model="formState.accidentNumber"   placeholder="请输入" readOnly></a-input>
            </a-form-model-item>
          </a-col>
          </a-row>
          <a-row :gutter="24">
          <a-col :span="8" >
            <a-form-model-item label="客户" prop="customer" >
              <a-input v-model="formState.customer"    placeholder="请输入" readOnly></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="工厂(事故发生地)" prop="factory">
              <a-input v-model="formState.factory"   placeholder="请输入" readOnly></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="责任单位" prop="responsibilityCompany">
              <a-input v-model="formState.responsibilityCompany"   placeholder="请输入" readOnly></a-input>
            </a-form-model-item>
          </a-col>
          
          </a-row>
          <a-divider />
          <a-row :gutter="24">
            <a-col :span="6" >
            <a-form-model-item label="责任人1" prop="responsibilityPerson1" >
              <j-search-select-tag v-model="formState.responsibilityPerson1" placeholder="" 
                   dict="sys_user,realname,username" @search="searchName" :disabled="true"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="6" >
            <a-form-model-item label="责任人2" prop="responsibilityPerson2" >
              <j-search-select-tag v-model="formState.responsibilityPerson2" placeholder="" 
                   dict="sys_user,realname,username" @search="searchName"  :disabled="true"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="6" >
            <a-form-model-item label="责任人3" prop="responsibilityPerson3">
              <j-search-select-tag v-model="formState.responsibilityPerson3" placeholder="" 
                   dict="sys_user,realname,username" @search="searchName" :disabled="true"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="6" >
            <a-form-model-item label="责任人4" prop="responsibilityPerson4">
              <j-search-select-tag v-model="formState.responsibilityPerson4" placeholder="" 
                   dict="sys_user,realname,username" @search="searchName" :disabled="true"/>
            </a-form-model-item>
          </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="6" >
            <a-form-model-item label="金额1" prop="sum1" >
              <a-input v-model="formState.sum1"   placeholder="请输入" readOnly></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="6" >
            <a-form-model-item label="金额2" prop="sum2" >
              <a-input v-model="formState.sum2"    placeholder="请输入" readOnly></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="6" >
            <a-form-model-item label="金额3" prop="sum3">
              <a-input v-model="formState.sum3"   placeholder="请输入" readOnly></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="6" >
            <a-form-model-item label="金额4" prop="sum4">
              <a-input v-model="formState.sum4"   placeholder="请输入" readOnly></a-input>
            </a-form-model-item>
          </a-col>
          </a-row>
          <a-divider />
          <a-row :gutter="24">         
          <!-- <a-col :span="8" >
            <a-form-model-item label="币种" prop="moneyType">
              <a-input v-model="formState.moneyType"   placeholder="请输入" readOnly></a-input>
            </a-form-model-item>
          </a-col> -->
          <a-col :span="8" >
            <a-form-model-item label="总金额" prop="totalMoney" >
              <a-input v-model="formState.totalMoney"    placeholder="请输入" readOnly></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="业务类型" prop="businessType">
              <a-input v-model="formState.businessType"   placeholder="请输入" readOnly></a-input>
            </a-form-model-item>
          </a-col>
          
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8" >
            <a-form-model-item label="成衣销售订单号" prop="garmentSalesOrder">
              <a-input v-model="formState.garmentSalesOrder"   placeholder="请输入" readOnly></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="款号" prop="styleNumber" >
              <a-input v-model="formState.styleNumber"    placeholder="请输入" readOnly></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="物料" prop="material">
              <a-input v-model="formState.material"   placeholder="请输入" readOnly></a-input>
            </a-form-model-item>
          </a-col>
         
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8" >
            <a-form-model-item label="计划员" prop="planPersonnel">
              <a-input v-model="formState.planPersonnel"   placeholder="请输入" readOnly></a-input>
            </a-form-model-item>
          </a-col>
          
          <a-col :span="8" >
            <a-form-model-item label="业务员" prop="businessPeople" >
              <j-search-select-tag v-model="formState.businessPeople" placeholder="" 
                   dict="sys_user,realname,username" @search="searchName" :disabled="true"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="QC" prop="qualityControl">
              <j-search-select-tag v-model="formState.qualityControl" placeholder="" 
                   dict="sys_user,realname,username" @search="searchName" :disabled="true"/>
            </a-form-model-item>
          </a-col>
          </a-row>
          <a-row :gutter="24">
          <a-col :span="24" style="height: 290px;">
            <a-form-model-item label="情况说明" prop="presentationCondition" class="fff">
              <a-input v-model="formState.presentationCondition"  type="textarea"  placeholder="请输入" readOnly></a-input>
            </a-form-model-item>
          </a-col>
          
          </a-row>
          
         </a-form-model>
         </div>
      <!-- 子表单区域 -->
          <!-- <a-button type="primary"  @click="addList" style="margin-bottom: 1%;">增行</a-button> -->
          <a-table
           bordered
          :columns="incidentTicketChildrenTable.columns"
          :data-source="incidentTicketChildrenTable.dataSource"
         :loading="incidentTicketChildrenTable.loading"
         :scroll="{x: 1200,y:300 }"
          :pagination="false"
            >
             <!-- 自定义表头 -->
             <!-- <span slot="zhanghaoIdTitle" class="form-table-heard">
             账套号
            </span> -->
            <span slot="exchangeRateTitle" class="form-table-heard">
             汇率
            </span>
            <span slot="practicalSumTitle" class="form-table-heard">
            实际事故金额
            </span>
            
          <!-- 汇率 -->
          <span slot="exchangeRate" slot-scope="text, record, index">
                  <a-input placeholder="请输入" v-model="record.exchangeRate" @change="changeExchangeRate(record,index)"/>
          </span>
           <!-- 实际事故金额 -->
           <span slot="practicalSum" slot-scope="text, record, index">
                  <a-input placeholder="请输入" v-model="record.practicalSum"  @blur="changepracticalSum(record)"/>
          </span>
          <!-- 币种 -->
          <span slot="moneyType" slot-scope="text, record, index">
            <j-dict-select-tag
            v-model="record.moneyType"
            placeholder="请选择币种"
            :triggerChange="true"
            dictCode="money-type"
          />
          </span>
           <!-- U8生成运费发票号 -->
           <span slot="u8Invoice" slot-scope="text, record, index">
                  <a-input placeholder="请输入" v-model="record.u8Invoice" disabled="true"/>
          </span>
          <!-- 账套号 -->
          <span slot="zhanghaoId" slot-scope="text, record, index">
            <a-select v-model="record.zhanghaoId" @change="handleChange(record,index)" style="width: 100%;">
            <a-select-option value="101">101</a-select-option>
            <a-select-option value="102">102</a-select-option>
            <a-select-option value="103">103</a-select-option>
          </a-select>
          </span>
           <!-- 备注 -->
           <span slot="remark" slot-scope="text, record, index">
                  <a-input placeholder="请输入" v-model="record.remark" />
          </span>
          </a-table>

          <a-form-model layout="inline" ref="form" :model="formState" :rules="validatorRules">
          <a-row :gutter="24">
            <a-col :span="12" >
            <a-form-model-item label="附件上传" prop="accessory" class="ff">
              <j-upload  v-model="accessory"  :disabled="true"></j-upload>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="工厂签章" prop="factorySignature" class="ff">
              <j-upload  v-model="factorySignature"  :disabled="true"></j-upload>
            </a-form-model-item>
          
          </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="24" style="height: 230px;">
            <a-form-model-item label="财务备注" prop="financeRemark" class="caiwu" >
              <a-input v-model="formState.financeRemark"  type="textarea"  placeholder="请输入"></a-input>
            </a-form-model-item>
          </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="10">
            <a-form-model-item label="财务添加附件" prop="accessory2" class="ff">
              <j-upload  v-model="accessory2"  ></j-upload>
              <!-- <a-input v-model="formState.accessory2"  placeholder="请输入"></a-input> -->
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="U8订单备注" prop="orderRemarks">
              <a-input maxlength="200" v-model="formState.orderRemarks"    placeholder="请输入" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="通知人" prop="Noticer">
              <a-input v-model="formState.Noticer"  placeholder="请输入"></a-input>
            </a-form-model-item>
          </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="10" >
            <a-form-model-item label="填报人" prop="informant">
              <a-input v-model="formState.informant"   placeholder="请输入" readOnly></a-input>
            </a-form-model-item>
            
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="部门" prop="department">
              <a-input v-model="formState.department"   placeholder="请输入" readOnly></a-input>
            </a-form-model-item>
          </a-col>
          
          </a-row>
         </a-form-model>
          <!-- <j-editable-table
            :ref="refKeys[0]"
            :loading="incidentTicketChildrenTable.loading"
            :columns="incidentTicketChildrenTable.columns"
            :dataSource="incidentTicketChildrenTable.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="true"/> -->
           <!-- <div class="table-page-search-wrapper">
              <a-form-model layout="inline" ref="form" :model="formState" :rules="validatorRules">
                <a-row :gutter="24">
              <a-col :md="24" :sm="8"> 
               <a-form-model-item label="财务备注"  class="nresume" style="height:100px !important">
                 <a-input type="textarea" placeholder="请输入" v-model="formState.demo"/>
               </a-form-model-item>
              </a-col>
            </a-row>
              </a-form-model>
            </div> -->
        <!-- </a-tab-pane> -->
        
    </div>
    </a-spin>
  </a-modal>
</template>

<script>

  import pick from 'lodash.pick'
  import { FormTypes,getRefPromise } from '@/utils/JEditableTableUtil'
  import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
  import { validateDuplicateValue } from '@/utils/util'
  import JDictSelectTag from "@/components/dict/JDictSelectTag"
  import JUpload from '@/components/jeecg/JUpload'
  import { putAction,getAction } from '@/api/manage'
  import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
  export default {
    name: 'IncidentTicketModal',
    mixins: [JEditableTableMixin],
    components: {
      JDictSelectTag,
      JUpload,
      JSearchSelectTag
    },
    data() {
      return {
        labelCol: {
          span: 8
        },
        wrapperCol: {
          span: 16
        },
        labelCol2: {
          span: 3
        },
        wrapperCol2: {
          span: 20
        },
        formState:{},
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 1,
        validatorRules: {
          financeRemark:[{required: true, message: '财务备注不能为空!'}],
        },
        refKeys: ['incidentTicketChildren', ],
        tableKeys:['incidentTicketChildren', ],
        activeKey: 'incidentTicketChildren',
        accessory2:[],
        accessory:[],
        factorySignature:[],
        // 森_工厂质量事故单-子表
        incidentTicketChildrenTable: {
          loading: false,
          dataSource: [],
          columns: [
          {
            title: '计划单号',
            align: "center",
            dataIndex: 'planNumber',
            width: '7%',
          },
          {
            title: '事故类型',
            align: "center",
            dataIndex: 'accidentType',
            width: '7%',
            // scopedSlots: { customRender: 'accidentType' },
          },
          {
            title: '币种',
            align: "center",
            dataIndex: 'moneyType',
            width: '8%',
            // scopedSlots: { customRender: 'moneyType' },
          },
          {
            title: '事故金额',
            align: "center",
            dataIndex: 'accidentSum',
            width: '7%',
            // scopedSlots: { customRender: 'accidentSum' },
          },
          {
            // title: '汇率',
            align: "center",
            dataIndex: 'exchangeRate',
            width: '10%',
            scopedSlots: { customRender: 'exchangeRate' },
            slots:{title:'exchangeRateTitle'},
          },
          {
            // title: '实际事故金额',
            align: "center",
            dataIndex: 'practicalSum',
            width: '7%',
            scopedSlots: { customRender: 'practicalSum' },
            slots:{title:'practicalSumTitle'},

          },
          {
            title: 'U8生成运费发票号',
            align: "center",
            dataIndex: 'u8Invoice',
            width: '9%',
            scopedSlots: { customRender: 'u8Invoice' },
          },
          {
            title: '账套号',
            align: "center",
            dataIndex: 'zhanghaoId',
            width: '9%',
            scopedSlots: { customRender: 'zhanghaoId' },
            // slots:{title:'zhanghaoIdTitle'},

          },
          
          {
            title: '备注',
            align: "center",
            dataIndex: 'remark',
            width: '20%',
            scopedSlots: { customRender: 'remark' },
          },

          ]
        },
        url: {
          add: "/oa/incidentTicket/add",
          edit: "/oa/incidentTicket/edit",
          incidentTicketChildren: {
            list: '/oa/incidentTicket/queryIncidentTicketChildrenByMainId'
          },
        }
      }
    },
    methods: {
      getHeaderList(id){
        getAction('/oa/incidentTicket/queryById', {id:id}).then((res) => {
          if(res.success){
            var zhuId = '' //主表id
             this.formState=res.result //详情
             this.accessory2 = this.formState.accessory2?JSON.parse(this.formState.accessory2):[]
             var accessory2Z =[]
             this.accessory2.map(item=>{
              accessory2Z.push(item.url)
             })
             this.accessory2 = accessory2Z


             this.accessory = this.formState.accessory?JSON.parse(this.formState.accessory):[]
             var accessoryZ=[]
             this.accessory.map(item =>{
              accessoryZ.push(item.url)
             })
             this.accessory =accessoryZ


             this.factorySignature = this.formState.factorySignature?JSON.parse(this.formState.factorySignature):[]
             var factorySignatureZ=[]
             this.factorySignature.map(item =>{
              factorySignatureZ.push(item.url)
             })
             this.factorySignature =factorySignatureZ


             zhuId = res.result.id
             this.getTable(zhuId)
             this.getNotifier(zhuId)
          }else{
            this.$message.warning(res.message)
          }
        })
      },
      getTable(id){
        getAction('/oa/incidentTicket/queryIncidentTicketChildrenByMainId', {id:id}).then((res) => {
          if(res.success){
            this.incidentTicketChildrenTable.dataSource = res.result
            this.incidentTicketChildrenTable.dataSource.map(item=>{
              if(item.practicalSum==''||!item.practicalSum){
                item.practicalSum = item.accidentSum
              }
              if(item.exchangeRate==''||!item.exchangeRate){
                item.exchangeRate = '1'
              }
              
            })
          }else{
            this.$message.warning(res.message)
          }
        })
      },
      getNotifier(id){
        getAction('/oa/incidentTicketMsg/queryByMainId', {id:id}).then((res) => {
          if(res.success){
            var noticeList =[]
            res.result.map(item=>{
              if(item.confirm != null && item.confirm != '' && item.confirm != '否'){
                noticeList.push(item.userName+'('+item.confirm+')')
              }else{
                noticeList.push(item.userName+'')
              }
            })
            this.formState.Noticer = noticeList.toString()
            console.log(this.formState.Noticer)
            this.$forceUpdate()
          }
        })
      },
      handleOk(){
          this.formState.accessory2 = (this.accessory2.length!==0&&this.accessory2)?[{"type":"file","name":this.accessory2,"status":"done","uid":1673507319016,"url":"http://220.191.168.86:18087/jeecg-boot/sys/common/static/"+this.accessory2}]:[]
          this.formState.accessory2 = JSON.stringify(this.formState.accessory2)
          var addData = 'yes'
          this.incidentTicketChildrenTable.dataSource.every(item=>{
            // if(item.zhanghaoId==''||!item.zhanghaoId){
            //   this.$message.warning('请选择账套号！')
            //    addData = 'no'
            //    return false;
            // }
            if(item.exchangeRate=='' || !item.exchangeRate){
              this.$message.warning('请填写汇率！')
               addData = 'no'
               return false;
            }
            if(item.practicalSum=='' || !item.practicalSum){
              this.$message.warning('请填写实际事故金额！')
               addData = 'no'
               return false;
            }
            return true
          })
      this.$refs.form.validate(valid => {
        if (valid) { 
          if(addData=='yes'){
            var obj = this.formState
            obj.incidentTicketChildrenList =  this.incidentTicketChildrenTable.dataSource 
                putAction('/oa/incidentTicket/edit', obj).then((res) => {
                   if(res.success){
                      this.$message.success('编辑成功')
                      this.handleCancel()
                      this.$emit('close')
                   }else{
                       this.$message.warning(res.message)
                     }
                 })
          } 
        }
      })
      },
      // 改变账套号
      handleChange(record,index){
        if(index==0){
        this.incidentTicketChildrenTable.dataSource.map(item=>{
          item.zhanghaoId = record.zhanghaoId
        })
      }
      },
      changepracticalSum(record){
        record.practicalSum = Number(record.practicalSum).toFixed(2)
        this.$forceUpdate()
      },
      changeExchangeRate(record,index){
        if(index == 0){
        this.incidentTicketChildrenTable.dataSource.map(item=>{
          item.exchangeRate = record.exchangeRate
        })
      }
      },
       //关闭
       handleCancel(){
        this.incidentTicketChildrenTable.dataSource =[]
        this.formState = {}
        this.visible = false
        this.$emit('close')
      },
      // getAllTable() {
      //   let values = this.tableKeys.map(key => getRefPromise(this, key))
      //   return Promise.all(values)
      // },
      /** 调用完edit()方法之后会自动调用此方法 */
      // editAfter() {
      //   let fieldval = pick(this.model,'accidentData','accidentTheme','accidentPersonLiable','supplier','personLiable','accidentNumber','customer','factory','responsibilityPerson1','responsibilityPerson2','responsibilityPerson3','responsibilityPerson4','responsibilityPerson5','sum1','sum2','sum3','sum4','sum5','responsibilityCompany','moneyType','totalMoney','businessType','garmentSalesOrder','styleNumber','material','planPersonnel','businessPeople','qualityControl','planNumber','accidentType','accidentSum','presentationCondition','accessory','informant','factorySignature','financeRemark','accessory2','isLeaders','incidentTicketId','tableNameChildren')
      //   this.$nextTick(() => {
      //     this.form.setFieldsValue(fieldval)
      //   })
      //   // 加载子表数据
      //   if (this.model.id) {
      //     let params = { id: this.model.id }
      //     this.requestSubTableData(this.url.incidentTicketChildren.list, params, this.incidentTicketChildrenTable)
      //   }
      // },
      /** 整理成formData */
      classifyIntoFormData(allValues) {
        let main = Object.assign(this.model, allValues.formValue)

        return {
          ...main, // 展开
          incidentTicketChildrenList: allValues.tablesValue[0].values,
        }
      },
      validateError(msg){
        this.$message.error(msg)
      },
     popupCallback(row){
       this.form.setFieldsValue(pick(row,'accidentData','accidentTheme','accidentPersonLiable','supplier','personLiable','accidentNumber','customer','factory','responsibilityPerson1','responsibilityPerson2','responsibilityPerson3','responsibilityPerson4','responsibilityPerson5','sum1','sum2','sum3','sum4','sum5','responsibilityCompany','moneyType','totalMoney','businessType','garmentSalesOrder','styleNumber','material','planPersonnel','businessPeople','qualityControl','planNumber','accidentType','accidentSum','presentationCondition','accessory','informant','factorySignature','financeRemark','accessory2','isLeaders','incidentTicketId','tableNameChildren'))
     },

    }
  }
</script>

<style lang="less" scoped>
/deep/ .ant-table-wrapper{
  margin-bottom: 2%;
}
/deep/ .nresume .ant-input{
  height: 100px !important;
}
/deep/ .ff .ant-form-item-control {
  display: contents;
}
/deep/  .ant-divider-horizontal{
  margin: 10px 0;
}

/deep/.table-page-search-wrapper .ant-form-inline .ant-form-item>.ant-form-item-label{
  width: 118px;
}
/deep/ .fff .ant-input{
  height: 280px !important;
}
/deep/ .caiwu .ant-input{
  height: 226px !important;
}
/deep/.ant-table td { white-space: nowrap; }
.form-table-heard:before {
      content: '*';
      color: red;
    }
/deep/ .ant-table td {
    white-space: break-spaces !important;
    word-break: break-word;
}
/deep/.ant-select{
  width: 100%;
}
/deep/.ant-select-selection--single{
  width: 100%;
}
</style>