TMS-VUE/ant-design-vue-jeecg/src/views/tms/carinout/vehicleinout/modules/CarForm.vue

<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="车牌号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="carNum">
              <a-input v-model="model.carNum" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
          <a-form-model-item label="发货单" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-select placeholder="发货单" v-model="model.invoice" showSearch @change="changeInvoice">
              <a-select-option  v-for="item in invoiceList"
                :key="item" :value="item" :label="item">
                {{item}}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
    <table style="width: 20%;" align="center">
        <thead>
          <tr align="center">
            <th>选项</th>
            <th>发货单</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in deliveryDetailList" align="center" :key="index">
            <td><a-checkbox v-model="item.selected"></a-checkbox></td>
            <td>{{ item.invoice }}</td>
          </tr>
        </tbody>
      </table>
    <div align="center" style="margin-top: 20px;">
      <a-button @click="batchDel" type="danger" style="margin-left: 20px">删除选中</a-button>
    </div>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'CarForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
        },
        invoiceList: [],
        deliveryDetailList: [],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        url: {
          add: "/vehicleinoutcheck/vehicleInOutCheck/add",
          getShip: "/deliverydemand/deliveryDemand/getShip",
          confirm: "/vehicleinoutdetail/vehicleInOutDetail/confirm",
          getByVehicleInOutId: "/vehicleinoutdetail/vehicleInOutDetail/getByVehicleInOutId",
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      this.getShip();
    },
    methods: {
      batchDel(){
        this.deliveryDetailList = this.deliveryDetailList.filter(x => x.selected===false)
      },
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
        this.getByVehicleInOutId(this.model.id)
      },
      submitForm () {
        if (this.deliveryDetailList.length == 0) {
          this.$message.warning('列表不能为空！');
          return;
        }
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            this.model.deliveryDetailList = this.deliveryDetailList
            this.model.carNum = this.model.id
            httpAction(this.url.confirm,this.model,'post').then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
      getShip(){
        getAction(this.url.getShip).then(res => {
          if (res.success) {
            this.invoiceList = res.result
          }
        })
      },
      getByVehicleInOutId(vehicleInOutId){
        getAction(this.url.getByVehicleInOutId, {vehicleInOutId: vehicleInOutId}).then(res => {
          if (res.success) {
            this.deliveryDetailList = res.result
          }
        })
      },
      changeInvoice(){
        let hasEven = this.deliveryDetailList.some((item) => {
          return item.invoice == this.model.invoice;
        });
        if(hasEven){
          this.$message.warning("列表中已存在 "+this.model.invoice);
          return;
        }
        this.deliveryDetailList.push({invoice: this.model.invoice, selected:false})
      },
    }
  }
</script>