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:pay_name>
        <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-input v-model="form.pay_name" clearable placeholder="请输入付款方" style="width: 300px;"></el-input>
          </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">
            <el-input-number :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">
            <div class="xy-table-item-content-schedule" @click="$refs['scheduleList'].isShow = true">
              <template v-if="form.schedule_links.length > 0">

              </template>
              <template v-else>
                请选择排班
              </template>
            </div>
          </div>
        </div>
      </template>
    </xy-dialog>

    <scheduleList ref="scheduleList"></scheduleList>
  </div>
</template>

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

import scheduleList from "@/views/finance/component/scheduleList";
export default {
  components:{
    scheduleList
  },
  data() {
    return {
      isShow:false,
      id:'',
      type:'',

      form:{
        pay_name:'',
        money:'',
        invoice_type:'',
        date:'',
        status:'',
        schedule_links:[],
      },
      rules:{
        pay_name:[
          {required:true,message:'请填写付款方'}
        ]
      }
    }
  },
  methods: {

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

    submit(){
      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;
}
.xy-table-item-content-schedule{
  color: #C0C4CC;;
  width: 300px;
  height: 40px;
  line-height: 40px;
  background-color: #FFFFFF;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  padding: 0 15px;
  &:hover{
    border: 1px solid #C0C4CC;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
}
</style>