factory_web/src/views/ofm/vehicleForm.vue

<template>
    <el-container>
      <el-main>
        <el-form
          :model="addForm"
          :rules="rules"
          ref="addForm"
          label-width="100px"
          label-position="left"
        > 
          <el-form-item label="用车事由" prop="reason">
            <el-input v-model="addForm.reason" clearable :disabled="localMode ==='view'"></el-input>
          </el-form-item>
        <el-form-item label="用车范围" prop="is_city">
          <el-select v-model="addForm.is_city" placeholder="请选择" :disabled="localMode ==='view'">
            <el-option
            v-for="item in vehicle_scope"
            :key="item.is_city"
            :label="item.name"
            :value="item.is_city"
            />
          </el-select>
        </el-form-item>
          <el-form-item label="出发地点" prop="location">
            <el-input v-model="addForm.location" clearable :disabled="localMode ==='view'"></el-input>
          </el-form-item>
          <el-form-item label="途经地点" prop="via">
            <el-input v-model="addForm.via" clearable :disabled="localMode ==='view'"></el-input>
          </el-form-item>
          <el-form-item label="到达地点" prop="destination">
            <el-input v-model="addForm.destination" clearable :disabled="localMode ==='view'"></el-input>
          </el-form-item>
            <el-form-item label="出发公里数" prop="start_km">
              <el-input-number v-model="addForm.start_km" clearable :disabled="localMode ==='view'"></el-input-number>
            </el-form-item>
            <el-form-item label="归还公里数" prop="end_km" v-if="addForm.ticket_?.state_?.name=='用车中'">
              <el-input-number v-model="addForm.end_km" clearable>
                <template #append>km</template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="出车时间">
              <el-date-picker
                v-model="addForm.start_time"
                type="date"
                align="right"
                value-format="YYYY-MM-DD"
                unlink-panels
                placeholder="选择日期"
                :disabled="mode==='view'"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="还车时间" v-if="addForm.ticket_?.state_?.name=='用车中'">
              <el-date-picker
                v-model="addForm.end_time"
                type="date"
                align="right"
                value-format="YYYY-MM-DD"
                unlink-panels
                placeholder="选择日期"
                >
                </el-date-picker>
            </el-form-item>
       </el-form>
        <el-footer v-show="mode!=='show'">
            <ticketd_b
            :workflow_key="'vehicle'"
            :title="ticketTitle"
            :t_id="addForm.id"
            :ticket_="addForm.ticket_"
            :submit_b_func="submit_b_func"
            :ticket_data="ticket_data"
            ref="ticketd_b"
            @success="$emit('success')"
            @colsed="$emit('closed')"
            />
        </el-footer>
      </el-main>
        <el-aside v-if="addForm.ticket_">
           <ticketd
            :ticket_="addForm.ticket_"
            :ticket_data="ticket_data"
            @success="$emit('success')"
            style="margin-top: 20px;"
        />
    </el-aside>
    </el-container>
</template>

<script>
import ticketd_b from "@/views/wf/ticketd_b.vue";
import ticketd from '@/views/wf/ticketd.vue'
export default {
    props: {
        mode: { type: String, default: "view" }, // add / edit / view
        modelValue: { type: Object, default: () => ({}) },
        transitions: { type: Array, default: () => [] },
        t_id: {
          type: String,
          default: null
		          },
        },
    components: {ticketd, ticketd_b},
    emits: ["update:modelValue", "submit", "cancel"],
  data() {
    return {
      addForm: { 
        ticket_: {
        state_: { type: '' }
          },
        ...this.modelValue },

      ticketTitle: "用车申请",
      ticket_data: {},
      localMode : this.mode,
      rules:{
        filename: [{ required: true, message: "请输入文件名称", trigger: "blur" }],
      },
      workflow_key: "vehicle_in",
      vehicle_scope:[{name: '市内', is_city: true},{name: '市外', is_city: false}],
        }
    },
    mounted() {
      if (this.addForm.ticket_?.state_.type===1){
          this.localMode = 'edit'
      };
      this.ticket_data = {
            ...this.ticket_data,
            is_city: this.addForm.is_city,
      };
      this.getTid();
      
    },
    watch: {
                // 父组件数据变动 -> 同步到本地
        modelValue: {
            handler(val) {
                this.addForm = { ...val };
            },
            deep: true,
            },
            // 本地数据变动 -> 同步回父组件
        addForm: {
            handler(val) {
                this.$emit("update:modelValue", val);
            },
            deep: true,
        },
        addForm: {
          handler(val) {
            Object.assign(this.ticket_data, {
              end_km: val.end_km,
              end_time: val.end_time,
              // 其他需要同步的字段...
            });
          },
          deep: true,
        }
    },
  
    methods: {
        async submit_b_func() {
		    let that = this;
        if (this.addForm.is_city === true){
          that.workflow_key = "vehicle"
          }else{
            that.workflow_key = "vehicle_out"
        }
            this.ticketTitle = `${this.addForm.reason}-用车申请`
                if(that.localMode == "add") {
                    let res = await that.$API.ofm.vehicle.create.req(that.addForm);
                    that.addForm.id = res.id;
                } else if (that.localMode == "edit") {
                    await that.$API.ofm.vehicle.update.req(that.addForm.id, that.addForm);
                }
            }, 
        getTid (){
          var that = this;
            if (that.t_id) {
            that.$API.ofm.vehicle.item.req(that.t_id).then(res=>{
              that.addForm = res;
              if(res.ticket_.state_.type == 1 && res.create_by == that.$TOOL.data.get("USER_INFO").id ) {
                that.localMode = "edit";
              }else{
                that.localMode = "show";
              }
            })
          }
		},
    },
};


</script>