emis-frontend/src/views/emis/emisTmsTransPlan/emisTmsTransPlanForm.vue

<template>
  <div >
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row :gutter="0" tyle="display: flex;flex-wrap: wrap;">
          <el-col :span="5" style="padding-right: 10px;">
            <el-row :gutter="0" style="display: flex;flex-wrap: wrap;">
              <el-col :span="24">
                <el-form-item label="承运名称" prop="planName">
                  <el-input v-model="form.planName" placeholder="承运名称" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="所属线路" prop="transLineType">
                  <TransLinePicker v-model="form.transLineType" isInitiated="true" ></TransLinePicker>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="24">
                  <el-form-item label="产品类型" prop="productType">
                    <TransProductPicker placeholder="产品类型" v-model="form.productType" :transLineCode="form.transLineType"></TransProductPicker>
                  </el-form-item>
                </el-col> -->

                <el-col :span="24">
                  <el-form-item label="启用状态" prop="status">
                    <el-radio-group v-model="form.status">
                      <el-radio :label="'1'">是</el-radio>
                      <el-radio :label="'0'">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              <!-- <el-col :span="24">
                  <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
                  </el-form-item>
              </el-col> -->
            </el-row>

          </el-col>
          <el-col :span="14">
            <!-- <el-divider content-position="left">运输节点</el-divider> -->
            <el-row>
              <el-col :span="24" :xs="24" style="padding: 10px;">
                <el-row>
                  <el-col :span="24">
                      <PlanDtlPanel :planId="form.id"  style="width:100%" v-model="form.stepList"></PlanDtlPanel>
                  </el-col>
                  <el-col :span="24">


                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="5" style="border-left: 1px solid #efefef;">
            <!-- <XdSteps
                  :currentStep="3"
                  :totalSteps="5"
                  :stepsLabel="stepsLabel"
                  :stepsDesc="stepsDesc"
                  :totalWidth="900"
                  :descMaxWidth="160"
                  @change="onStepChange" /> -->
                  <!-- direction="vertical" :active="1" -->
                  <div style="height: 300px;padding: 40px;">
                      <el-steps direction="vertical" :active="1" align-center finish-status="success">
                        <el-step v-for="item in form.stepList"   :key="item.stepName" :title="item.stepName" >
                          <div slot="description">
                                <!-- <span><dict-tag :options="dict.type.emis_biz_shipping_method" :value="item.transType"/></span> -->
                                <span> 【{{item.destSiteName}}】</span>
                                <span>{{ dict.type.emis_biz_shipping_method.find(obj=>obj.value==item.transType).label }}</span>
                                <span> {{item.estCostDay}}天</span>
                          </div>
                        </el-step>
                      </el-steps>
                    </div>
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align: center;margin-bottom: 10px;">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>

  </div>
</template>

<script>
import { listEmisTmsTransPlan, getEmisTmsTransPlan, delEmisTmsTransPlan, addEmisTmsTransPlan, updateEmisTmsTransPlan } from "@/api/emis/emisTmsTransPlan";
import TransLinePicker from '@/views/emis/EmisBaseTools/TransLinePicker.vue';
import PlanDtlPanel from '@/views/emis/emisTmsTransPlan/planDtlPanel.vue';
import CountryPickerStart from '@/views/emis/EmisBaseTools/CountryPicker.vue';
import CountryPickerDest from '@/views/emis/EmisBaseTools/CountryPicker.vue';
import TransProductPicker from '@/views/emis/EmisBaseTools/TransProductPicker.vue';
import XdSteps from '@/components/XdSteps'

export default {
  name: "emisTmsTransPlanForm",
  props:{
    id:{
        type:Number
    }
  },
  components: {
    TransLinePicker,
    PlanDtlPanel,
    CountryPickerStart,
    CountryPickerDest,
    TransProductPicker,
    XdSteps
   },
  dicts: ['emis_biz_shipping_method'
  ],
  data() {
    return {
      emisTmsTransPlanOptions: [],
      // 遮罩层
      loading: true,
      // 表单参数
      form: {},
      stepsLabel:[],
      stepsDesc:[],
      // 表单校验
      rules: {
        id: [
          { required: true, message: "id不能为空", trigger: "blur" }
        ],
      }
    };
  },
   watch: {
      "id": {
        handler (newValue, oldValue) {
          this.id = newValue;
          this.initData();
        },
        deep: true
      }
  },
  created() {
    this.initData();
  },

  methods: {
    initData() {

        if(this.id !=null) {
          this.loading = true;
          getEmisTmsTransPlan(this.id).then(response => {
            this.form = response.data;
            this.loading = false;
          });
        }else{
            this.form.status="1";
            this.reset();
        }
    },
    onStepChange(){

    },
    // 取消按钮
    cancel() {
      this.reset();
      this.$emit("on-cancel");
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        planCode: null,
        planName: null,
        transLineType: null,
        productType: null,
        status: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        createSite: null,
        updateSite: null,
        stepList:[],
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateEmisTmsTransPlan(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.$emit("on-changed");
            });
          } else {
            addEmisTmsTransPlan(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.$emit("on-changed");
            });
          }
        }
      });
    },

  }
};
</script>

<style scoped>

::v-deep .el-step__head.is-success {
  color: rgb(52, 158, 250);
  border-color: rgb(52, 158, 250);
}
::v-deep .el-step__title.is-success {
    font-weight: bold;
    color: rgb(52, 158, 250);
}
::v-deep .el-step__description.is-success {
    color: rgb(52, 158, 250);
}
</style>