sishitongtang-crm/src/views/order/component/addOrder.vue

<template>
  <div>
    <xy-dialog
      ref="dialog"
      :form="form"
      :is-show.sync="isShow"
      :rules="rules"
      :title="type === 'add' ? '新增订单' : '编辑订单'"
      type="form"
      @submit="submit">
      <template v-slot:customer_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
              v-model="form.customer_id"
              v-load-more="customLoad"
              placeholder="请选择客户"
              style="width: 300px">
              <el-option v-for="item in customers" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </template>

      <template v-slot:product_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
              v-model="form.product_id"
              v-load-more="productLoad"
              placeholder="请选择客户"
              style="width: 300px">
              <el-option v-for="item in products" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </template>

      <template v-slot:product_type_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
              v-model="form.product_type_id"
              placeholder="请选择业务板块"
              style="width: 300px">
              <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id"></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
              v-model="form.date"
              end-placeholder="结束时间"
              start-placeholder="开始时间"
              style="width: 300px;"
              type="daterange"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"></el-date-picker>
          </div>
        </div>
      </template>

      <template v-slot:service_times>
        <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 v-model="form.service_times" :controls="false" :precision="0" clearable
                             placeholder="请输入服务次数" style="width: 300px;"/>
          </div>
        </div>
      </template>

      <template v-slot:unit_price>
        <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 v-model="form.unit_price" :controls="false" :precision="2" clearable
                             placeholder="请输入单次单价" style="width: 300px;"/>
          </div>
        </div>
      </template>

      <template v-slot:total_time>
        <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.total_time" clearable
                      placeholder="请输入总计时长" style="width: 300px;"/>
          </div>
        </div>
      </template>

      <template v-slot:total_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 v-model="form.total_money" clearable
                      placeholder="请输入总计金额" style="width: 300px;"/>
          </div>
        </div>
      </template>

      <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
              v-model="form.account_id"
              v-load-more="productLoad"
              placeholder="请选择结算对象"
              style="width: 300px">
              <el-option v-for="item in accounts" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </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">
            <div style="width: 300px;display: flex;">
              <el-radio v-model="form.status" :label="0">未开始</el-radio>
              <el-radio v-model="form.status" :label="1">进行中</el-radio>
              <el-radio v-model="form.status" :label="2">已完成</el-radio>
            </div>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import {getList as customList} from '@/api/customer'
import {getList as productList} from '@/api/product'
import {save,getForm} from '@/api/order'
export default {
  props:{
    accounts:{
      type:Array,
      default:()=>[]
    },
    types:{
      type:Array,
      default:()=>[]
    }
  },
  data() {
    return {
      id: '',
      type: '',
      isShow: false,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(start.getTime() + 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        },{
          text: '最近一年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(start.getTime() + 3600 * 1000 * 24 * 365);
            picker.$emit('pick', [start, end]);
          }
        }]
      },

      customers: [],
      customSelect: {
        page: 1,
        page_size: 10
      },
      products: [],
      productSelect: {
        page: 1,
        page_size: 10
      },

      form: {
        customer_id: '',
        product_id: '',
        product_type_id:'',
        date: '',
        service_times: '',
        unit_price: '',
        total_time: '',
        total_money: '',
        account_id:'',
        status: '',
      },
      rules: {
        customer_id:[
          {required: true, message: '请选择客户'}
        ],
        product_id:[
          {required: true, message: '请选择产品'}
        ],
        date:[
          {required: true, message: '请选择开始结束时间'}
        ],
        service_times:[
          {required: true, message: '请填写服务次数'}
        ],
        unit_price:[
          {required: true, message: '请填写单次单价'}
        ],
        total_time:[
          {required: true, message: '请填写总计时长'}
        ],
        total_money:[
          {required: true, message: '请填写总计金额'}
        ],
        status:[
          {required: true, message: '请选择状态'}
        ],
        account_id:[
          {required: true, message: '请选择结算对象'}
        ]
      }
    }
  },
  methods: {
    initForm(){
      this.form = {
        customer_id: '',
        product_id: '',
        product_type_id:'',
        date: '',
        service_times: '',
        unit_price: '',
        total_time: '',
        total_money: '',
        account_id: '',
        status: '',
      }
    },

    customLoad() {
      this.customSelect.page++
      this.getCustomers()
    },
    async getCustomers() {
      const res = await customList(this.customSelect, false)
      if (res.data.data.length === 0) {
        this.customSelect.page--
        this.$message({
          type: 'warning',
          message: '没有跟多客户了'
        })
        return
      }
      this.customers.push(...res.data.data)
    },

    productLoad() {
      this.productSelect.page++
      this.getProducts()
    },
    async getProducts() {
      const res = await productList(this.productSelect, false)
      if (res.data.length === 0) {
        this.productSelect.page--
        this.$message({
          type: 'warning',
          message: '没有跟多产品了'
        })
        return
      }
      this.products.push(...res.data)
    },

    async getDetail(){
      const res = await getForm(this.id)
      this.$integrateData(this.form,res)
      this.form.date = [res.start_date,res.end_date]
    },

    submit() {
      console.log(this.form)
      Object.defineProperty(this.form,'start_date',{
        value:this.form.date[0],
        enumerable:true,
        writable:true,
        configurable:true
      })
      Object.defineProperty(this.form,'end_date',{
        value:this.form.date[1],
        enumerable:true,
        writable:true,
        configurable:true
      })
      delete this.form.date
      if(this.type === 'editor'){
        Object.defineProperty(this.form,'id',{
          value:this.id,
          enumerable:true,
          writable:true,
          configurable:true
        })
      }
      save(this.form).then(res => {
        this.$successMessage(this.type,'订单')
        this.isShow = false
        this.$emit('refresh')
      })
    }
  },
  watch: {
    isShow(val) {
      if (val) {
        this.getCustomers()
        this.getProducts()

        if(this.type === 'editor'){
          this.getDetail()
        }
      } else {
        this.customers = []
        this.products = []
        this.id = ''
        this.type = ''
        this.$refs['dialog'].reset()
        this.initForm()
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.xy-table-item-label {
  width: 160px;
}

::v-deep .el-input__inner {
  text-align: left;
}
</style>