sishitongtang-crm/src/views/finance/component/addcollectMoney.vue

<template>
  <div>
    <xy-dialog
      :width="74"
      ref="dialog"
      :is-show.sync="isShow"
      type="form"
      :title="type === 'add' ? '新增收款单' : '编辑收款单'"
      :form="form"
      :rules="rules"
      @submit="submit">
      <template v-slot:account_id >
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>付款方：
          </div>
          <div class="xy-table-item-content">
            <el-select disabled v-model="form.account_id" placeholder="请选择付款对象" style="width: 300px;">
              <el-option v-for="item in accounts" :value="item.id" :label="item.name" :key="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </template>

      <template v-slot:money>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>金额：
          </div>
          <div class="xy-table-item-content xy-table-item-price">
            <el-input-number disabled :controls="false" :precision="2" v-model="form.money" clearable placeholder="请输入金额" style="width: 300px;"></el-input-number>
          </div>
        </div>
      </template>

      <template v-slot:invoice_type>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>发票类型：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.invoice_type" style="width: 300px" placeholder="请选择发票类型">
              <el-option v-for="item in [{label:'无',value:0},{label:'服务类发票',value:1}]" :label="item.label" :value="item.value" :key="item.value"></el-option>
            </el-select>
          </div>
        </div>
      </template>

      <template v-slot:date >
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>收款单日期：
          </div>
          <div class="xy-table-item-content">
            <el-date-picker
              placeholder="请选择收款单日期"
              value-format="yyyy-MM-dd"
              v-model="form.date"
              style="width: 300px;"></el-date-picker>
          </div>
        </div>
      </template>

      <template v-slot:status >
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>付款状态：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.status " style="width: 300px" placeholder="请选择付款状态">
              <el-option v-for="item in [{label:'未付款',value:0},{label:'部分付款',value:1},{label:'已付清',value:2}]" :label="item.label" :value="item.value" :key="item.value"></el-option>
            </el-select>
          </div>
        </div>
      </template>

      <template v-slot:schedule_links >
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>结算排班：
          </div>
          <div class="xy-table-item-content">
            <template v-if="form.schedule_links.length > 0">
              <Button type="primary" style="margin-bottom: 10px;" @click="$refs['scheduleList'].form = form.schedule_links,$refs['scheduleList'].isShow = true">
                排班选择
              </Button>
              <div style="width: 500px">
                <xy-table :height="300" :is-page="false" :list="form.schedule_links" :table-item="scheduleTable">
                  <template v-slot:btns>
                    <el-table-column width="68" align="center" fixed="right">
                      <template v-slot:default="scope">
                        <Button size="small" type="primary" ghost @click="removeSchedule(scope)">移除</Button>
                      </template>
                    </el-table-column>
                  </template>
                </xy-table>
              </div>
            </template>
            <template v-else>
              <el-input readonly placeholder="请选择结算排班" style="width: 300px;" @focus="$refs['scheduleList'].form = form.schedule_links,$refs['scheduleList'].isShow = true"></el-input>
            </template>

          </div>
        </div>
      </template>
    </xy-dialog>

    <scheduleList :accounts="accounts" ref="scheduleList" @submit="setSchedule"></scheduleList>
  </div>
</template>

<script>
import {save,getForm} from '@/api/collectMoney'

import scheduleList from "@/views/finance/component/scheduleList";
import {parseTime} from "@/utils";
export default {
  props:{
    accounts:{
      type:Array,
      default:()=>[]
    }
  },
  components:{
    scheduleList
  },
  data() {
    let validatorSchedule = (rule, value, callback) => {
      if(value.length > 0){
        callback()
      }else{
        callback(new Error('请选择结算排班'))
      }
    }
    return {
      isShow:false,
      id:'',
      type:'',

      form:{
        account_id :'',
        money:0,
        invoice_type:'',
        date:'',
        status:'',
        schedule_links:[],
      },
      rules:{
        account_id:[
          {required:true,message:'请选择付款方'}
        ],
        money:[
          {required:true,message:'请填写金额'}
        ],
        invoice_type:[
          {required:true,message:'请选择发票类型'}
        ],
        date:[
          {required:true,message:'请选择收款单日期'}
        ],
        status:[
          {required:true,message:'请选择状态'}
        ],
        schedule_links:[
          {validator:validatorSchedule}
        ]
      },

      scheduleTable:[
        {
          label:'第三方结算对象',
          prop:'orders.account.name',
          minWidth: 160,
          sortable:false
        },
        {
          label:'护工',
          prop:'nurse.name',
          width: 160,
          sortable:false
        },
        {
          label:'服务日期',
          prop:'date',
          width: 200,
          sortable:false
        },
        {
          label:'时间段',
          width: 150,
          sortable:false,
          customFn:(row)=>{
            return (
              <div>{parseTime(row.start_time,'{h}:{i}')}~{parseTime(row.end_time,'{h}:{i}')}</div>
            )
          }
        },
        {
          label:'订单编号',
          prop:'orders.no',
          width: 220,
          sortable:false
        },
        {
          label:'服务对象',
          prop:'customer.name',
          width: 200,
          sortable:false
        },
        {
          label:'服务状态',
          prop:'status',
          width: 140,
          sortable:false,
          formatter:(cell,data,value) => {
            switch (value){
              case 0:
                return '已排班未服务'
                break;
              case 1:
                return '已排班未服务'
                break;
              case 2:
                return '已服务'
                break;
              default:
                return value
            }
          }
        }
      ]
    }
  },
  methods: {

    async getDetail(){
      const res = await getForm(this.id)
      this.$integrateData(this.form,res)
    },

    setSchedule(array){
      this.form.schedule_links = array
      this.form.account_id = Number(array[0]?.orders.account_id)
      array.forEach(item => {
        this.form.money += Number(item.orders.unit_price)
      })
    },
    removeSchedule(scope){
      this.form.schedule_links.splice(scope.$index,1)
    },

    submit(){
      this.form.schedule_links = this.form.schedule_links.map(item => {
        return {
          schedule_id:item.id,
          order_id:item.order_id
        }
      })
      if(this.type === 'editor'){
        Object.defineProperty(this.form,'id',{
          value:this.id,
          enumerable:true,
          configurable:true,
          writable:true
        })
      }
      save(this.form).then(res => {
        this.$successMessage(this.type,'')
        this.isShow = false
        this.$emit('refresh')
      })
    }
  },
  watch:{
    isShow(val){
      if(val){
        if(this.type === 'editor'){
          this.getDetail()
        }
      }else{
        this.id = ''
        this.type = ''
        this.$refs['dialog'].reset()
        delete this.form.id
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-input__inner{
  text-align: left;
}

</style>