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

<template>
  <a-modal
    title="详情"
    width="85%"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    destroyOnClose
    >
    <template #footer>
        <a-button  @click="handleCancel" style="margin-left: 8px;">取消</a-button>
        <a-button  type="primary"  @click="addNotice" style="margin-left: 8px;" :disabled="!(formState.state=='1')">通知</a-button>
        <a-popconfirm title="确定反馈通知吗?" ok-text="是" cancel-text="否" @confirm="feedbackNotice" @cancel="handleCancelPop('visibleFk')" :visible="visibleFk">
          <a-button  type="primary"   style="margin-left: 8px;" :disabled="!(formState.state=='2')" @click="()=>visibleFk = true">反馈通知</a-button>
        </a-popconfirm>
        <a-popconfirm title="确定推送吗?" ok-text="是" cancel-text="否" @confirm="push" @cancel="handleCancelPop('visibleTs')" :visible="visibleTs">
          <a-button  type="primary"   style="margin-left: 8px;" :disabled="!(formState.state=='3'&&!confirmLoading)" @click="()=>visibleTs = true">推送</a-button>
        </a-popconfirm>
        <a-popconfirm title="确定完结吗?" ok-text="是" cancel-text="否" @confirm="end"   @cancel="handleCancelPop('visibleWj')" :visible="visibleWj">
          <a-button  type="primary"   style="margin-left: 8px;" :disabled="!(formState.state=='3'|| formState.state=='4')" @click="()=>visibleWj = true">完结</a-button>
        </a-popconfirm>
      </template>
      <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-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: 1500,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: 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-row :gutter="24">
            <a-col :span="8" >
            <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="8" >
              <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="请输入" 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="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="通知人" 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="8" >
            <a-form-model-item label="填报人" prop="informant">
              <a-input v-model="formState.informant"   placeholder="请输入" readOnly></a-input>
            </a-form-model-item>
          </a-col>
          
          </a-row>
        </a-form-model>

      <j-select-biz-component   ref="JSelectBizComponent"    @send-notice="sendNotice" :multi="true" />
    </div>
    </a-spin>
  </a-modal>
</template>

<script>
  import JSelectBizComponent from './JSelectUserByDepModal'
  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 { putAction,getAction } from '@/api/manage'
  import JUpload from '@/components/jeecg/JUpload'
  import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
  import moment from 'moment'
 
  export default {
    name: 'IncidentTicketModalDetail',
    mixins: [JEditableTableMixin],
    components: {
      JDictSelectTag,
      JSelectBizComponent,
      JUpload,
      JSearchSelectTag,
      moment
    },
    data() {
      return {
        labelCol: {
          span: 8
        },
        wrapperCol: {
          span: 16
        },
        labelCol2: {
          span: 3
        },
        wrapperCol2: {
          span: 20
        },
        formState:{},
        confirmLoading:false,
        visibleFk:false,
        visibleTs:false,
        visibleWj:false,
        accessory2:[],
        accessory:[],
        factorySignature:[],
        columns: [
          { title: '姓名', align: 'center', width: '20%', widthRight: '70%', dataIndex: 'realname' },
          { title: '账号', align: 'center', width: '20%', dataIndex: 'username' },
          { title: '电话', align: 'center', width: '23%', dataIndex: 'phone' },
          { title: '出生日期', align: 'center', width: '23%', dataIndex: 'birthday' }
        ],
        multi:true,
        // 新增时子表默认添加几行空数据
        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',
        // 森_工厂质量事故单-子表
        incidentTicketChildrenTable: {
          loading: false,
          dataSource: [],
          columns: [
          {
            title: '计划单号',
            align: "center",
            dataIndex: 'planNumber',
            width: 140,
            width: '7%',
            // scopedSlots: { customRender: 'planNumber' },
          },
          {
            title: '事故类型',
            align: "center",
            dataIndex: 'accidentType',
            width: 140,
            width: '7%',
            // scopedSlots: { customRender: 'accidentType' },
          },
          {
            title: '事故金额',
            align: "center",
            dataIndex: 'accidentSum',
            width: 140,
            width: '7%',
            // scopedSlots: { customRender: 'accidentSum' },
          },
          {
            title: '汇率',
            align: "center",
            dataIndex: 'exchangeRate',
            width: 140,
            width: '9%',
            // scopedSlots: { customRender: 'exchangeRate' },
          },
          {
            title: '实际事故金额',
            align: "center",
            dataIndex: 'practicalSum',
            width: 140,
            width: '7%',
            // scopedSlots: { customRender: 'practicalSum' },
          },
          {
            title: 'U8生成运费发票号',
            align: "center",
            dataIndex: 'u8Invoice',
            width: '9%',
            // scopedSlots: { customRender: 'u8Invoice' },
          },
          {
            title: '账套号',
            align: "center",
            dataIndex: 'zhanghaoId',
            width: '9%',
            // scopedSlots: { customRender: 'zhanghaoId' },
          },
          
          {
            title: '备注',
            align: "center",
            dataIndex: 'remark',
            width: '20%',
            // scopedSlots: { customRender: 'remark' },
          },

          ]
        },
        url: {
          add: "/oa/incidentTicket/add",
          edit: "/oa/incidentTicket/edit",
          incidentTicketChildren: {
            list: '/oa/incidentTicket/queryIncidentTicketChildrenByMainId'
          },
          list:'/sys/user/list' 
        }
      }
    },
    methods: {
      addNotice(){   
        // this.$refs.JSelectBizComponent.visible = true
        this.$refs.JSelectBizComponent.showModal()
      },
      feedbackNotice(){
        this.visibleFk =false
        getAction('/oa/incidentTicket/noticeUserReturn', {headId:this.formState.id,title:this.formState.accidentTheme,code:this.formState.accidentNumber}).then((res) => {
          if(res.success){
            this.$message.success(res.message)
            this.getNotifier(this.formState.id)
            this.formState.state='3'
            this.$forceUpdate()
          }else{
            this.$message.warning(res.message)
          }
        })
      },
      push(){
        this.visibleTs = false
        var pushOk = 'yes'
        this.incidentTicketChildrenTable.dataSource.every(item=>{
          if(item.zhanghaoId==''||!item.zhanghaoId){
              this.$message.warning('请选择账套号！')
              pushOk = 'no'
               return false;
            }
            return true
        })
        if(pushOk=='yes'){
          this.confirmLoading = true
          getAction('/oa/incidentTicket/propelling', {headId:this.formState.id}).then((res) => {
          if(res.success){
            this.$message.success(res.message)
            this.handleCancel()
            this.confirmLoading = false
          }else{
            this.$message.warning(res.message)
            this.confirmLoading = false
          }
        })
        }
      },
      end(){
        this.visibleWj = false
        getAction('/oa/incidentTicket/endOrder', {headId:this.formState.id}).then((res) => {
          if(res.success){
            this.$message.success(res.message)
            this.handleCancel()
          }else{
            this.$message.warning(res.message)
          }
        })
      },
      sendNotice(ids){
        getAction('/oa/incidentTicket/noticeUser', {ids:ids,headId:this.formState.id,code:this.formState.accidentNumber,title:this.formState.accidentTheme}).then((res) => {
          if(res.success){
            this.$message.success(res.message)
            this.getNotifier(this.formState.id)
            this.formState.state='2'
            this.$forceUpdate()
          }else{
            this.$message.warning(res.message)
          }
        })
      },
      getHeaderList(id){
        getAction('/oa/incidentTicket/queryById', {id:id}).then((res) => {
          if(res.success){
            var zhuId = '' //主表id
             this.formState=res.result //详情
             this.formState=res.result //详情
             this.formState.accidentData =  moment( this.formState.accidentData).format('YYYY-MM-DD');
             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
          }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()
            this.$forceUpdate()
          }
        })
      },
       //关闭
       handleCancel(){
        this.incidentTicketChildrenTable.dataSource =[]
        this.formState = {}
        this.visible = false
        this.visibleWj = false
        this.visibleTs = false
        this.visibleFk = false
        this.$emit('close')
      },
      // 关闭提示框
      handleCancelPop(data){
        if(data=='visibleFk') this.visibleFk = false
        if(data=='visibleTs') this.visibleTs = false
        if(data=='visibleWj') this.visibleWj = false
      },
      // 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/ .fff .ant-input{
  height: 280px !important;
}
/deep/ .caiwu .ant-input{
  height: 226px !important;
}
/deep/ .ff .ant-form-item-control {
  display: table;
}

/deep/.table-page-search-wrapper .ant-form-inline .ant-form-item>.ant-form-item-label{
  width: 118px;
}
/deep/ .ant-table td {
    white-space: break-spaces !important;
    word-break: break-word;
}
</style>