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

<template>
<div class="reply" ref = "replyModal">
  <a-modal
    :title="(defultMethods == 'add')?'新增':'编辑'"
    width="85%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :getContainer ='()=>$refs.replyModal'
    @cancel="handleCancel"
    destroyOnClose
   >
    <template #footer>
      <a-upload  name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader"   @change="handleImportExcel" :customRequest="implementImport" >
        <a-button  type="primary">导入</a-button>
      </a-upload>
        <a-button  @click="handleCancel" style="margin-left: 8px;">取消</a-button>
        <a-button  type="primary"  @click="handleOk">保存</a-button>
      </template>
    <div class="table-page-search-wrapper">
      <a-form-model layout="inline" ref="form" :model="formState" :rules="validatorRules">
          <a-row :gutter="24">
            <!-- <a-col :md="8" :sm="8">
              <a-form-model-item label="编号" prop="code">
                <a-input   placeholder="请输入"  v-model="formState.code" />
              </a-form-model-item>
            </a-col> -->
            <a-col :md="8" :sm="8">
              <a-form-model-item label="名称"  prop="name">
                <a-input placeholder="请输入名称" v-model="formState.name"/>
              </a-form-model-item>
           </a-col>
            <a-col :md="8" :sm="8">
              <a-form-model-item label="合计"  prop="totalNum">
                 <a-input placeholder="" v-model="formState.totalNum" disabled="false"/>
               </a-form-model-item>
            </a-col>
          </a-row>
          <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>
      <!-- 主表单区域 -->
      <!-- <a-form :model="form">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="编号">
              <a-input placeholder="请输入编号" v-decorator="['code', {}]"/>
            </a-form-item>
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="名称">
              <a-input placeholder="请输入名称" v-decorator="['name', {}]"/>
            </a-form-item>
            <a-form-item label="合计" :labelCol="labelCol"  :wrapperCol="wrapperCol" >
                 <a-input placeholder="请输入" v-decorator="['total_num', {}] "/>
            </a-form-item>
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              class="nresume" style="height:100px !important"
              label="备注">
              <a-input type="textarea" placeholder="请输入备注" v-decorator="['demo', {}]"/>
            </a-form-item>
      </a-form> -->

      <!-- 子表单区域 -->
      <a-tabs v-model="activeKey" @change="handleChangeTabs">
        <a-tab-pane tab="搬运工对账单" :key="refKeys[0]" :forceRender="true">
          <a-button type="primary"  @click="addList" style="margin-bottom: 1%;">增行</a-button>
        <a-table
        bordered
        :columns="syCarryBTable.columns"
        :data-source="syCarryBTable.dataSource"
        :loading="syCarryBTable.loading"
        :scroll="{x: 2500,y:300 }"
        :pagination="false"
      >
         <!-- 表头--日期 -->
          <span slot="orderDateTitle" class="form-table-heard">
             日期
          </span>

           <!-- 表头--集装箱号 -->
          <span slot="containerNoTitle" class="form-table-heard">
             集装箱号
          </span>
           <!-- 表头--单价 -->
          <span slot="priceTitle" class="form-table-heard">
            单价
          </span>
           <!-- 表头--计划员 -->
          <span slot="jhyByDataTitle" class="form-table-heard">
             计划员
          </span>
           <!-- 表头--总价 -->
          <span slot="totalPriceTitle" class="form-table-heard">
             总价
          </span>
        <!-- 日期 -->
         <span slot="orderDate" slot-scope="text, record,index">
                <a-date-picker
                    placeholder="请选择"
                    v-model="record.orderDate"
                    format="YYYY-MM-DD"
                    show-time
                  />
          </span>
          <!-- 总件数 -->
          <span slot="allNum" slot-scope="text, record, index">
                  <a-input placeholder="请输入" v-model="record.allNum" />
          </span>
          <!-- 柜子数量 -->
          <span slot="cabinets" slot-scope="text, record, index">
                  <a-input placeholder="请输入" v-model="record.cabinets" />
          </span>
          <!-- 明细 -->
           <span slot="detailedNum" slot-scope="text, record, index">
                  <a-input placeholder="请输入" v-model="record.detailedNum" @blur="handleChangePrice(record)"/>
          </span>
          <!-- 衣架/吨数 -->
          <span slot="coatHanger" slot-scope="text, record, index">
                  <a-input placeholder="请输入" v-model="record.coatHanger" @blur="handleChangePrice(record)"/>
          </span>
          <!-- 集装箱号 -->
           <span slot="containerNo" slot-scope="text, record, index">
                  <a-input placeholder="请输入" v-model="record.containerNo" />
          </span>
          <!-- 入库单号/发票号 -->
           <span slot="invoiceNo" slot-scope="text, record, index">
                  <a-input placeholder="请输入" v-model="record.invoiceNo" />
          </span>
          <!-- 价格 -->
          <span slot="price" slot-scope="text, record, index">
              <a-input placeholder="请输入" v-model="record.price"  @blur="handleChangePrice(record)"/>
          </span>
          <!-- 总价 -->
          <span slot="totalPrice" slot-scope="text, record, index">
              <a-input placeholder="请输入" v-model="record.totalPrice" disabled="false"/>
          </span>
          <!-- 计划员 -->
           <span slot="jhyByData" slot-scope="text, record, index">
                 <a-select  v-model="record.jhyByData" style="width:100%" mode="multiple"
                  show-search :filterOption="filterOption" @change="handleChange(record)"> 
                      <a-select-option
                     v-for="(item,index) in jhyNameOption"
                     :key="index"
                     :value="item.value"
                      >
                     {{item.label}}
                     </a-select-option>
                   </a-select>
          </span>
          <!-- 原因 -->
          <span slot="reason" slot-scope="text, record, index">
                  <a-input placeholder="请输入" v-model="record.reason" />
          </span>
          <!-- 备注 -->
          <span slot="demo" slot-scope="text, record, index">
                  <a-input placeholder="请输入" v-model="record.demo" />
          </span>
          <span slot="option" slot-scope="text, record, index">
                <a @click="copyRow(record)">复制</a>
                 <a-divider type="vertical" />
                <a @click="deleteRow(record,index)" style="color:red">删行</a>

          </span>
        </a-table>
          <!-- <j-editable-table
            :ref="refKeys[0]"
            :loading="syCarryBTable.loading"
            :columns="syCarryBTable.columns"
            :dataSource="syCarryBTable.dataSource"
            :maxHeight="300"
            :minWidth="2000"
            :rowNumber="false"
            :rowSelection="true"
            :actionButton="true">
           <template v-slot:action="props">
            <a @click="handleAutograph(props)">签名</a>
           </template> -->
           <!-- <template v-slot:jhyName="props">
            <a-select @change='changeJhy(props)' >
                  <a-select-option
                     v-for="(item,index) in jhyNameOption"
                     :key="index"
                     :value="item.value">
                     {{item.label}}
                  </a-select-option>
                   </a-select>
           </template> -->
          <!-- </j-editable-table> -->

        </a-tab-pane>
      </a-tabs>

    </div>
  </a-modal>
</div>
</template>
<script>

  import moment from 'moment'
  import pick from 'lodash.pick'
  import { FormTypes } from '@/utils/JEditableTableUtil'
  import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
  import {personList,subimtList} from '@api/oa/cd-personnel-files'
  import {fileDetail} from '@api/oa/cd-sy-carry'
   import { putAction,getAction } from '@/api/manage'

  export default {
    name: 'SyCarryModal',
    mixins: [JEditableTableMixin],
    components: {
        moment,
    },
    data() {
      return {
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 1,
        validatorRules: {
        },
        formState:{},
        refKeys: ['syCarryB', ],
        activeKey: 'syCarryB',
        jhyNameOption:[],
        dateFormat: 'YYYY-MM-DD',
        passVerification:'yes',
         validatorRules: {
              name:[{required: true, message: '名称不能为空!'}],
              code:[{required: true, message: '编号不能为空!'}],
        },
        // 搬运装卸费用-搬运工对账单-子表
        syCarryBTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
            // title: '日期',
            align: "center",
            dataIndex: 'orderDate',
            width: '10%',
            ellipsis: true,
            scopedSlots: { customRender: 'orderDate' },
            slots:{title:'orderDateTitle'}
          },
          {
            title: '入库单号/发票号',
            align: "center",
            dataIndex: 'invoiceNo',
            width: '6%',
            ellipsis: true,
            scopedSlots: { customRender: 'invoiceNo' },
          },
           {
            title: '总件数',
            dataIndex: 'allNum',
            width:  '5%',
            ellipsis: true,
             scopedSlots: { customRender: 'allNum' },
             className: 'replacecolor',
            // slots:{title:'allNumTitle'}
           },
           {
            title: '柜子数量',
            dataIndex: 'cabinets',
             width:  '5%',
             ellipsis: true,
             scopedSlots: { customRender: 'cabinets' },
             className: 'replacecolor'
           },
           {
            title: '明细',
            dataIndex: 'detailedNum',
             width:  '5%',
             ellipsis: true,
             scopedSlots: { customRender: 'detailedNum' },
             className: 'replacecolor',
            //  slots:{title:'detailedNumTitle'}
           },
           {
            title: '衣架/吨数',
            dataIndex: 'coatHanger',
           width:'6%',
             ellipsis: true,
             scopedSlots: { customRender: 'coatHanger' },
             className: 'replacecolor'
           },
           {
            // title: '集装箱号',
            dataIndex: 'containerNo',
             width: '15%',
             ellipsis: true,
             scopedSlots: { customRender: 'containerNo' },
             className: 'replacecolor',
            slots:{title:'containerNoTitle'}
           },
          //  {
          //   // title: '发票号',
          //   dataIndex: 'invoiceNo',
          //   width: '9%',
          //    ellipsis: true,
          //    scopedSlots: { customRender: 'invoiceNo' },
          //    className: 'replacecolor',
          //   slots:{title:'invoiceNoTitle'}
          //  },
           {
            //  title: '单价',
             dataIndex: 'price',
             width: '5%',
             ellipsis: true,
             scopedSlots: { customRender: 'price' },
             className: 'replacecolor',
             slots:{title:'priceTitle'}
           },
             {
            // title: '总价',
            dataIndex: 'totalPrice',
            width: '5%',
             ellipsis: true,
            //  scopedSlots: { customRender: 'totalPrice' },
             className: 'replacecolor',
             slots:{title:'totalPriceTitle'}
           },
           {
            // title: '计划员',
            dataIndex: 'jhyByData',
             width: '7%',
             ellipsis: true,
             scopedSlots: { customRender: 'jhyByData' },
             className: 'replacecolor',
            slots:{title:'jhyByDataTitle'}
           },
           {
            title: '签名',
            dataIndex: 'jhyName',
            width: '5',
             ellipsis: true,
             className: 'replacecolor'
           },
           {
            title: '原因',
            dataIndex: 'reason',
            width: '10%',
             ellipsis: true,
             scopedSlots: { customRender: 'reason' },
             className: 'replacecolor',
            //  slots:{title:'reasonTitle'}
           },
           {
            title: '备注',
            dataIndex: 'demo',
             width: '12%',
             ellipsis: true,
             scopedSlots: { customRender: 'demo' },
             className: 'replacecolor'
           } ,
           {
            title: '操作',
            dataIndex: 'option',
             width: 120,
             ellipsis: true,
             scopedSlots: { customRender: 'option' },
             className: 'replacecolor'
           }                   
          ]
        },
        defultMethods:'add',
        url: {
          add: "/oa/syCarry/add",
          edit: "/oa/syCarry/edit",
          syCarryB: {
            list: '/oa/syCarry/querySyCarryBByMainId'
          },
        }
      }
    },
    created(){
      this.getOption()
      this.getRemarks()
    },
    methods: {
      // 获取表头信息
      getHeaderList(id){
        getAction('/oa/syCarry/queryById', {id:id}).then((res) => {
          if(res.success){
            var zhuId = '' //主表id
             this.formState=res.result //详情
             zhuId = res.result.id
             this.getTable(zhuId)
          }else{
            this.$message.warning(res.message)
          }
        })
      },
      getTable(id){
        getAction('/oa/syCarry/querySyCarryBByMainId', {id:id}).then((res) => {
          if(res.success){
              res.result.map(item =>{
              if(item.jhyByData !==''&& item.jhyByData){
                item.jhyByData = item.jhyByData.split(",")
              }
              if(item.orderDate !==''&& item.orderDate){
                item.orderDate = moment(item.orderDate)
              }
            })
            this.syCarryBTable.dataSource = res.result
          }else{
            this.$message.warning(res.message)
          }
        })
      },
      getRemarks(){
          getAction('/sys/dict/getByCodeDict', {table:'sys_dict',text:'description',code:'dict_code',key:'remarks'}).then((res) => {
            var arr = res.split(' ')
            var c = ''
            arr.map((item,index)=>{
              if(index !== arr.length-1){
                c += item+'\n'
              }else{
                c+=item
              }
            })
            this.formState.demo = c
        })
      },
    // 计划员模糊查询
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      )},
      //增行
      addList(){
        this.syCarryBTable.dataSource.push({
          orderDate:'',
          allNum:'',
          detailedNum:'',
          coatHanger:'',
          containerNo:'',
          cabinets:'',
          invoiceNo:'',
          price:'',
          jhyName:'',
          jhyNameData:'',
          demo:'',
          name:''
        })
      },
      //获取计划员
      getOption(){
        personList({pageSize:'9999'}).then(res => {
                    if (res.success) {
                      res.result.records.map(item =>{
                        this.jhyNameOption.push({label:item.realname,value:item.username})
                      })
                    }else{
                       this.$message.error(res.message);
                    }
                })
      },
      //改变计划员
      handleChange(record){
         this.jhyNameOption.map(item=>{
           if(item.value == record.jhyByData){
             record.jhyNameData = item.label
           }
         })
      },

      // 复制行
      copyRow(record){
        var newObj = {...record}
       this.syCarryBTable.dataSource.push(newObj)
       this.formState.totalNum =(Number(this.formState.totalNum) +Number(record.totalPrice)).toFixed(2)
       this.$forceUpdate()
      },

      //删行
      deleteRow(record,index){
        this.syCarryBTable.dataSource.splice(index,1)
        this.formState.totalNum =(Number(this.formState.totalNum) -Number(record.totalPrice)).toFixed(2)
      },
 
      /** 调用完edit()方法之后会自动调用此方法 */
      // editAfter() {
      //   this.$nextTick(() => {
      //     this.form.setFieldsValue(pick(this.model, 'name', 'code', 'demo','total_num'))
      //     console.log(this.model)

      //     // 时间格式化
      //     // this.form.setFieldsValue({ ckTime: this.model.ckTime ? moment(this.model.ckTime) : null })
      //     // this.form.setFieldsValue({ rsxzTime: this.model.rsxzTime ? moment(this.model.rsxzTime) : null })
      //     // this.form.setFieldsValue({ cwjlTime: this.model.cwjlTime ? moment(this.model.cwjlTime) : null })
      //   })
      //   // 加载子表数据
      //   if (this.model.id) {
      //     let params = { id: this.model.id }
      //     this.requestSubTableData(this.url.syCarryB.list, params, this.syCarryBTable)
      //   }
      // },
      // handleAutograph(props){
      //   var code = '',
      //   text=''
      //   this.syCarryBTable.columns[7].options.map(item=>{
      //     if(item.text ==this.$store.getters.nickname ){
      //        code = item.value
      //        text = item.text
      //     }
      //   })      
      //   if(code == this.syCarryBTable.dataSource[props.index].jhyName){
      //     this.syCarryBTable.dataSource[props.index].jhyNameData = text
      //   })
      // },
      changeJhy(props){
        console.log(this.syCarryBTable.columns[7].options)

      },
 
      /** 整理成formData */
      classifyIntoFormData(allValues) {
        let main = Object.assign(this.model, allValues.formValue)
        //时间格式化
        // main.ckTime = main.ckTime ? main.ckTime.format('YYYY-MM-DD HH:mm:ss') : null;
        // main.rsxzTime = main.rsxzTime ? main.rsxzTime.format('YYYY-MM-DD HH:mm:ss') : null;
        // main.cwjlTime = main.cwjlTime ? main.cwjlTime.format('YYYY-MM-DD HH:mm:ss') : null;
        return {
          ...main, // 展开
          syCarryBList: allValues.tablesValue[0].values,
        }
      },
      //保存
      handleOk(){
         this.$refs.form.validate(async valid => {
         if(valid){
            var obj = this.formState
            this.syCarryBTable.dataSource.map(item=>{
             
            //  console.log('ssssssssssss',item.jhyByData.toString());
              if(item.jhyByData!=''&&item.jhyByData){
                
                 // item.jhyByData.forEach(t => {
                 //    console.log('ssssssssssss',t);
                 // })
                item.jhyByData = item.jhyByData.toString();
              }
              if(item.orderDate!==''&&item.orderDate){
                item.orderDate = moment(item.orderDate).format('YYYY-MM-DD HH:mm:ss');
              }
            })
            obj.syCarryBList = this.syCarryBTable.dataSource
            await this.judageTablez(obj.syCarryBList)
            if(this.defultMethods == 'add' && this.passVerification == 'yes'){
                subimtList(obj).then(res => {
                     if (res.success) {
                      this.$message.success('新增成功')
                      this.handleCancel()
                      this.$emit('close')
                    }else{
                       this.$message.error(res.message);
                    }
                })
            }else if(this.passVerification == 'yes'){
                putAction('/oa/syCarry/edit', obj).then((res) => {
                   if(res.success){
                      this.$message.success('编辑成功')
                      this.handleCancel()
                      this.$emit('close')
                   }else{
                       this.$message.warning(res.message)
                     }
                 })
            } 
         }
         })
       
        
      },
      judageTablez(data){
        this.passVerification = 'yes'
        if(data.length == 0){
          this.$message.error('请添加子表数据!');
          this.passVerification = 'no'
        }else{
          for (var i=0; i<data.length;i++){
             var tableRow = data[i];
             var required = [
              {key:'orderDate',value:'日期'},
              {key:'price',value:'单价'},
              {key:'containerNo',value:'集装箱号'},
              {key:'totalPrice',value:'总价'},
              {key:'jhyByData',value:'计划员'},
              ]
             for(var j=0 ; j<required.length;j++){
                if(tableRow[required[j].key] == null || tableRow[required[j].key] == "" || tableRow[required[j].key] == undefined){
                  this.$message.error('第'+(i+1)+'行'+required[j].value+'无值，无法保存');
                  this.passVerification = 'no'
                  return
                }
             }
          }
        }
      },
      // 导入
    implementImport(file) {
      const formData = new FormData()
      formData.append('file', file.file)
      fileDetail(formData).then(res => {
        // this.loading = false
        if (res.success) {
         this.formState = res.result
         this.syCarryBTable.dataSource = res.result.syCarryBList
         this.syCarryBTable.dataSource.map(item=>{
          item.orderDate = moment(item.orderDate)
         })
        //  this.handleChangePrice()
          this.$message.success('导入成功')
          // this.
        }else{
          this.$message.error(res.message);
        }
      })
      },
      //关闭
      handleCancel(){
        this.syCarryBTable.dataSource=[]
        this.formState = {}
        this.visible = false
        this.defultMethods='add'
        this.getRemarks()
        this.$emit('close')
      },
      // 价格改变
      handleChangePrice(record){
        if(record.price && record.coatHanger){
          record.totalPrice = Number(record.coatHanger)* Number(record.price)+ Number((record.detailedNum?record.detailedNum:0))
          this.$forceUpdate()
        }else{
           record.totalPrice = record.detailedNum
        }
        var Hj = 0
       this.syCarryBTable.dataSource.map(item=>{
         item.coatHanger = Number(item.coatHanger).toFixed(4)
         item.totalPrice = Number(item.totalPrice).toFixed(2)
         item.price = Number(item.price).toFixed(2)
         item.allNum = Number(item.allNum).toFixed(0)
         item.cabinets = Number(item.cabinets).toFixed(0)
         item.detailedNum = Number(item.detailedNum).toFixed(0)
        //  if(item.price=='8'&&item.totalPrice>500){
        //    item.coatHanger = ''
        //    item.detailedNum = ''
        //    item.price = ''
        //    item.totalPrice = ''
        //    this.$message.error('单价为8的行总价不能超过500，请重新输入单价，衣架/吨数，明细！！');
        //  }
         Hj+= Number(item.totalPrice)
       })
       this.formState.totalNum = Hj.toFixed(2)
       this.$forceUpdate()
      }
      
    }
  }
</script>

<style scoped lang="less">
/deep/ .nresume .ant-input{
  height: 100px !important;
}
/deep/ .td{
  text-align:center;
}
// /deep/.ant-form-item{
//     width: 31%;
// }
// /deep/.ant-form-horizontal{
//     display: flex;
//     width: 100%;
//     flex-wrap: wrap;
// }
// .nresume{
//   width: 100% !important;
// }
// /deep/ .nresume .ant-form-item-label{
//   width: 3% !important;
// }
// /deep/ .nresume .ant-form-item-control-wrapper{
//   width: 85% !important;
// }
// /deep/ .nresume .ant-input{
//   height: 100px !important;
// }
// /deep/ .ant-col-sm-6{
//   width: 10%;
// }
/deep/ .ant-select{
  width: 100%;
}
/deep/ .input-table .thead .td{
  text-align: center;
}
/deep/ .input-table .tbody .td{
  text-align: center;
}
/deep/ .ant-table-thead > tr > th {
  text-align: center;
  // font-weight: 700;
}
/deep/ .ant-table-tbody {
  text-align: center;
}
.form-table-heard:before {
      content: '*';
      color: red;
}
// /deep/.ant-table-fixed-header .ant-table-scroll .ant-table-header{

//    width: calc(100% - 8px);//减去滚动条的宽度

// }
</style>