sishitongtang-crm/src/views/schedule/component/addSchedule.vue

<template>
  <div v-if="detail">
    <xy-dialog
      :width='84'
      :form="form"
      :is-show.sync="isShow"
      title="排班"
      type="form"
      @submit="submit">
      <template v-slot:extraFormTop>
        <div :style="{
          'display':'flex',
          'align-items':'center',
          'flex-wrap':'wrap',
          'min-width':'380px'
        }">
          <el-form-item>
            <div class="xy-table-item" >
              <div class="xy-table-item-label">
                性别：
              </div>
              <div class="xy-table-item-content">
                <el-input v-model="detail.sex" style="width: 300px;" readonly></el-input>
              </div>
            </div>
          </el-form-item>

          <el-form-item>
            <div class="xy-table-item">
              <div class="xy-table-item-label">
                年龄：
              </div>
              <div class="xy-table-item-content">
                <el-input :value="ageComputed" style="width: 300px;" readonly></el-input>
              </div>
            </div>
          </el-form-item>

          <el-form-item>
            <div class="xy-table-item" >
              <div class="xy-table-item-label">
                身份证号：
              </div>
              <div class="xy-table-item-content">
                <el-input :value="detail.idcard" style="width: 300px;" readonly></el-input>
              </div>
            </div>
          </el-form-item>

          <el-form-item>
            <div class="xy-table-item" >
              <div class="xy-table-item-label">
                失能等级：
              </div>
              <div class="xy-table-item-content">
                <el-select disabled placeholder="请选择失能等级" v-model="detail.level_id" style="width: 300px">
                  <el-option v-for="item in levels" :key="item.id" :value="item.id" :label="item.value"></el-option>
                </el-select>
              </div>
            </div>
          </el-form-item>

          <el-form-item>
            <div class="xy-table-item" >
              <div class="xy-table-item-label">
                备注：
              </div>
              <div class="xy-table-item-content">
                <el-input readonly v-model="detail.remark" type="textarea" :autosize="{minRows:2}" style="width: 300px;" placeholder="请输入备注"></el-input>
              </div>
            </div>
          </el-form-item>
        </div>
      </template>

      <template v-slot:customer_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            客户：
          </div>
          <div class="xy-table-item-content">
            <el-select disabled placeholder="请选择客户" v-model="form.customer_id" style="width: 300px">
              <el-option v-for="item in customers" :key="item.id" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </div>
        </div>
      </template>

      <template v-slot:product_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            产品：
          </div>
          <div class="xy-table-item-content">
            <el-select disabled placeholder="请选择产品" v-model="form.product_id" style="width: 300px">
              <el-option v-for="item in products" :key="item.id" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </div>
        </div>
      </template>

      <template v-slot:extraFormBottom>
        <el-calendar>
        </el-calendar>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import {customerDetail} from '@/api/schedule'

export default {
  props:{
    customers:{
      type:Array,
      default:()=>[]
    },
    products:{
      type:Array,
      default:()=>[]
    },
    nurses:{
      type:Array,
      default:()=>[]
    },
    levels:{
      type:Array,
      default:()=>[]
    }
  },
  data() {
    return {
      productId: '',
      customerId: '',
      isShow: false,

      detail:{

      },
      form: {
        customer_id:'',
        product_id:'',
        order_id:'',
        start_time:'',
        end_time:'',
        nurse_id:'',
      }
    }
  },
  methods: {
    async getCustomer() {
      const res = await customerDetail({
        product_id: this.form.product_id,
        id:this.form.customer_id,
      })
      console.log(res)
      this.detail = res.detail
    },

    submit() {

    }
  },
  computed:{
    ageComputed(){
      return new Date().getFullYear() - new Date(this.detail.birthday).getFullYear()
    }
  },
  watch: {
    isShow(val) {
      if (val) {
        this.getCustomer()
      } else {

      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>