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">
    <a-spin :spinning="confirmLoading">
      <!-- 主表单区域 -->
      <div class="table-page-search-wrapper">
        


      <!-- 子表单区域 -->
          <!-- <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: 2000,y:300 }"
          :pagination="false"
            >
          <!-- 汇率 -->
          <span slot="exchangeRate" slot-scope="text, record, index">
                  <a-input placeholder="请输入" v-model="record.exchangeRate" />
          </span>
           <!-- 实际事故金额 -->
           <span slot="practicalSum" slot-scope="text, record, index">
                  <a-input placeholder="请输入" v-model="record.practicalSum" />
          </span>
           <!-- U8生成运费发票号 -->
           <span slot="u8Invoice" slot-scope="text, record, index">
                  <a-input placeholder="请输入" v-model="record.u8Invoice" />
          </span>
          <!-- 账套号 -->
          <span slot="zhanghaoId" slot-scope="text, record, index">
                  <a-input placeholder="请输入" v-model="record.zhanghaoId" />
          </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="24" style="height: 110px;">
            <a-form-model-item label="财务备注" prop="financeRemark" class="nresume">
              <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="8">
            <a-form-model-item label="添加附件" prop="accessory2">
              <j-upload  v-model="formState.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="通知人" prop="Noticer">
              <a-input v-model="formState.Noticer"  placeholder="请输入"></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'
  export default {
    name: 'IncidentTicketModal',
    mixins: [JEditableTableMixin],
    components: {
      JDictSelectTag,
      JUpload
    },
    data() {
      return {
        labelCol: {
          span: 8
        },
        wrapperCol: {
          span: 16
        },
        labelCol2: {
          span: 3
        },
        wrapperCol2: {
          span: 20
        },
        formState:{},
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 1,
        validatorRules: {
          accidentData: {rules: [
          ]},
          accidentTheme: {rules: [
          ]},
          accidentPersonLiable: {rules: [
          ]},
          supplier: {rules: [
          ]},
          personLiable: {rules: [
          ]},
          accidentNumber: {rules: [
          ]},
          customer: {rules: [
          ]},
          factory: {rules: [
          ]},
          responsibilityPerson1: {rules: [
          ]},
          responsibilityPerson2: {rules: [
          ]},
          responsibilityPerson3: {rules: [
          ]},
          responsibilityPerson4: {rules: [
          ]},
          responsibilityPerson5: {rules: [
          ]},
          sum1: {rules: [
          ]},
          sum2: {rules: [
          ]},
          sum3: {rules: [
          ]},
          sum4: {rules: [
          ]},
          sum5: {rules: [
          ]},
          responsibilityCompany: {rules: [
          ]},
          moneyType: {rules: [
          ]},
          totalMoney: {rules: [
          ]},
          businessType: {rules: [
          ]},
          garmentSalesOrder: {rules: [
          ]},
          styleNumber: {rules: [
          ]},
          material: {rules: [
          ]},
          planPersonnel: {rules: [
          ]},
          businessPeople: {rules: [
          ]},
          qualityControl: {rules: [
          ]},
          planNumber: {rules: [
          ]},
          accidentType: {rules: [
          ]},
          accidentSum: {rules: [
          ]},
          presentationCondition: {rules: [
          ]},
          accessory: {rules: [
          ]},
          informant: {rules: [
          ]},
          factorySignature: {rules: [
          ]},
          financeRemark: {rules: [
          ]},
          accessory2: {rules: [
          ]},
          isLeaders: {rules: [
          ]},
          incidentTicketId: {rules: [
          ]},
          tableNameChildren: {rules: [
          ]},
        },
        refKeys: ['incidentTicketChildren', ],
        tableKeys:['incidentTicketChildren', ],
        activeKey: 'incidentTicketChildren',
        accessory2:'',
        // 森_工厂质量事故单-子表
        incidentTicketChildrenTable: {
          loading: false,
          dataSource: [],
          columns: [
          {
            title: '计划单号',
            align: "center",
            dataIndex: 'planNumber',
            width: 140,
            // scopedSlots: { customRender: 'planNumber' },
          },
          {
            title: '事故类型',
            align: "center",
            dataIndex: 'accidentType',
            width: 140,
            // scopedSlots: { customRender: 'accidentType' },
          },
          {
            title: '事故金额',
            align: "center",
            dataIndex: 'accidentSum',
            width: 140,
            // scopedSlots: { customRender: 'accidentSum' },
          },
          {
            title: '汇率',
            align: "center",
            dataIndex: 'exchangeRate',
            width: 140,
            scopedSlots: { customRender: 'exchangeRate' },
          },
          {
            title: '实际事故金额',
            align: "center",
            dataIndex: 'practicalSum',
            width: 140,
            scopedSlots: { customRender: 'practicalSum' },
          },
          {
            title: 'U8生成运费发票号',
            align: "center",
            dataIndex: 'u8Invoice',
            width: 140,
            scopedSlots: { customRender: 'u8Invoice' },
          },
          {
            title: '账套号',
            align: "center",
            dataIndex: 'zhanghaoId',
            width: 140,
            scopedSlots: { customRender: 'zhanghaoId' },
          },
          
          {
            title: '备注',
            align: "center",
            dataIndex: 'remark',
            width: 140,
            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.formState.accessory2 = JSON.parse(this.formState.accessory2)
             this.formState.accessory2=this.formState.accessory2[0].name
             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
          }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=>{
              noticeList.push(item.userName)
            })
            this.formState.Noticer = noticeList.toString()
            console.log(this.formState.Noticer)
            this.$forceUpdate()
          }
        })
      },
      handleOk(){
        this.$refs.form.validate(async valid => {
         if(valid){
          this.formState.accessory2 = [{"type":"file","name":this.formState.accessory2,"status":"done","uid":1673507319016,"url":"http://220.191.168.86:18087/jeecg-boot/sys/common/static/"+this.formState.accessory2}]
          this.formState.accessory2 = JSON.stringify(this.formState.accessory2)
            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)
                     }
                 })
            } 
         })
       
      },
       //关闭
       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;
}
</style>