|
|
@@ -0,0 +1,780 @@
|
|
|
+<template>
|
|
|
+ <div class="vehicleModelPanel">
|
|
|
+ <model-list
|
|
|
+ ref="modelList"
|
|
|
+ class="modelList"
|
|
|
+ @showInfo="showInfo"
|
|
|
+ @addOne="addOne"
|
|
|
+ @delOne="delOne"
|
|
|
+ :getListApi="getListApi"
|
|
|
+ :showName="showName"
|
|
|
+ :curOne="curOne"
|
|
|
+ ></model-list>
|
|
|
+
|
|
|
+ <div class="contentPanel">
|
|
|
+ <el-form
|
|
|
+ ref="form"
|
|
|
+ :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="160px"
|
|
|
+ >
|
|
|
+ <div class="inputBox flexBox">
|
|
|
+ <span class="label">车辆ID</span>
|
|
|
+ <div>{{ form.vehicleCode }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flexBox">
|
|
|
+ <el-form-item label="车辆名称:" prop="vehicleName">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ maxlength="60"
|
|
|
+ v-autoTrim="{ obj: form, key: 'vehicleName' }"
|
|
|
+ v-model="form.vehicleName"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="车辆描述:" prop="description">
|
|
|
+ <el-input
|
|
|
+ v-autoTrim="{ obj: form, key: 'description' }"
|
|
|
+ v-model="form.description"
|
|
|
+ placeholder="请输入"
|
|
|
+ maxlength="200"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="车辆模型:" prop="vehicleType">
|
|
|
+ <el-cascader
|
|
|
+ ref="cascader"
|
|
|
+ v-model="form.vehicleType"
|
|
|
+ :options="modelLabelList"
|
|
|
+ :props="props"
|
|
|
+ @change="modelLabelChange"
|
|
|
+ ></el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="车辆模型标识:" prop="modelLabel">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ v-autoTrim="{ obj: form, key: 'modelLabel' }"
|
|
|
+ v-model="form.modelLabel"
|
|
|
+ disabled
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="titlePanel">
|
|
|
+ <div class="titlePanelBor">控制参数</div>
|
|
|
+ </div>
|
|
|
+ <div class="flexBox">
|
|
|
+ <el-form-item label="最大速度(km/h):" prop="maxSpeed">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ maxlength="12"
|
|
|
+ v-autoTrim="{ obj: form, key: 'maxSpeed' }"
|
|
|
+ v-model="form.maxSpeed"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="发动机功率(kW):" prop="enginePower">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ maxlength="12"
|
|
|
+ v-autoTrim="{ obj: form, key: 'enginePower' }"
|
|
|
+ v-model="form.enginePower"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="最大减速度(m/s²):"
|
|
|
+ prop="maxDeceleration"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ maxlength="12"
|
|
|
+ v-autoTrim="{ obj: form, key: 'maxDeceleration' }"
|
|
|
+ v-model="form.maxDeceleration"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="最大转向角度(rad):"
|
|
|
+ prop="maxSteeringAngle"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ maxlength="12"
|
|
|
+ v-autoTrim="{ obj: form, key: 'maxSteeringAngle' }"
|
|
|
+ v-model="form.maxSteeringAngle"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="驱动方式:" prop="wheelDrive">
|
|
|
+ <el-select v-model="form.wheelDrive">
|
|
|
+ <el-option
|
|
|
+ v-for="item in wheelDriveList"
|
|
|
+ :label="item.caption"
|
|
|
+ :value="item.code"
|
|
|
+ :key="item.code"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="titlePanel">
|
|
|
+ <div class="titlePanelBor">效率参数</div>
|
|
|
+ </div>
|
|
|
+ <div class="flexBox">
|
|
|
+ <el-form-item label="总效率:" prop="overallEfficiency">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ maxlength="9"
|
|
|
+ v-autoTrim="{ obj: form, key: 'overallEfficiency' }"
|
|
|
+ v-model="form.overallEfficiency"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="前表面有效面积(㎡):"
|
|
|
+ prop="frontSurfaceEffective"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ maxlength="12"
|
|
|
+ v-autoTrim="{
|
|
|
+ obj: form,
|
|
|
+ key: 'frontSurfaceEffective',
|
|
|
+ }"
|
|
|
+ v-model="form.frontSurfaceEffective"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="空气阻力系数:"
|
|
|
+ prop="airDragCoefficient"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ maxlength="9"
|
|
|
+ v-autoTrim="{
|
|
|
+ obj: form,
|
|
|
+ key: 'airDragCoefficient',
|
|
|
+ }"
|
|
|
+ v-model="form.airDragCoefficient"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="滚动阻力系数:"
|
|
|
+ prop="rollingResistanceCoefficient"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ maxlength="9"
|
|
|
+ v-autoTrim="{
|
|
|
+ obj: form,
|
|
|
+ key: 'rollingResistanceCoefficient',
|
|
|
+ }"
|
|
|
+ v-model="form.rollingResistanceCoefficient"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="titlePanel">
|
|
|
+ <div class="titlePanelBor">几何参数</div>
|
|
|
+ </div>
|
|
|
+ <div class="flexBox">
|
|
|
+ <el-form-item label="车轮直径(m):" prop="wheelDiameter">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ maxlength="12"
|
|
|
+ v-autoTrim="{ obj: form, key: 'wheelDiameter' }"
|
|
|
+ v-model="form.wheelDiameter"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="车前距(m):" prop="frontDistance">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ maxlength="12"
|
|
|
+ v-autoTrim="{ obj: form, key: 'frontDistance' }"
|
|
|
+ v-model="form.frontDistance"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="车后距(m):" prop="rearDistance">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ maxlength="12"
|
|
|
+ v-autoTrim="{ obj: form, key: 'rearDistance' }"
|
|
|
+ v-model="form.rearDistance"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="车左距(m):" prop="leftDistance">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ maxlength="12"
|
|
|
+ v-autoTrim="{ obj: form, key: 'leftDistance' }"
|
|
|
+ v-model="form.leftDistance"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="车右距(m):" prop="rightDistance">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ maxlength="12"
|
|
|
+ v-autoTrim="{ obj: form, key: 'rightDistance' }"
|
|
|
+ v-model="form.rightDistance"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="车高(m):" prop="heightDistance">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ maxlength="12"
|
|
|
+ v-autoTrim="{ obj: form, key: 'heightDistance' }"
|
|
|
+ v-model="form.heightDistance"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="轴距(m):" prop="wheelbase">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ maxlength="12"
|
|
|
+ v-autoTrim="{ obj: form, key: 'wheelbase' }"
|
|
|
+ v-model="form.wheelbase"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="质量(kg):" prop="mass">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ maxlength="12"
|
|
|
+ v-autoTrim="{ obj: form, key: 'mass' }"
|
|
|
+ v-model="form.mass"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="titlePanel">
|
|
|
+ <div class="titlePanelBor">3D视图</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="modelBox">
|
|
|
+ <!-- <img v-show="modelImgSrc" :src="modelImgSrc" width="100%" /> -->
|
|
|
+ <three-show
|
|
|
+ ref="threeShow"
|
|
|
+ :carModel="carModel"
|
|
|
+ ></three-show>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <div class="btns">
|
|
|
+ <!-- 新增和私有才能修改和保存 -->
|
|
|
+ <!-- 私有才能分享 -->
|
|
|
+ <!-- share有值 才能另存为 -->
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ v-show="form.share === '0' || form.share === ''"
|
|
|
+ @click="save(false)"
|
|
|
+ >保存</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ v-if="roleCode === '0' || roleCode === '1'"
|
|
|
+ v-show="form.share === '0'"
|
|
|
+ @click="share"
|
|
|
+ >分享</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ v-show="form.share === '0' || form.share === '1'"
|
|
|
+ @click="save(true)"
|
|
|
+ >另存为</el-button
|
|
|
+ >
|
|
|
+ <el-button type="primary" plain @click="cancel">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import modelList from "./components/modelList.vue";
|
|
|
+import { mapState } from "vuex";
|
|
|
+import threeShow from "./components/threeVehicleModel.vue";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "vehicleModel", // 车辆模型
|
|
|
+ components: { modelList, threeShow },
|
|
|
+ data() {
|
|
|
+ // 校验非负且最多4位小数
|
|
|
+ let validateNum = (rule, value, callback) => {
|
|
|
+ !/^(0|[1-9][0-9]*)(\.\d{1,4})?$/.test(value) &&
|
|
|
+ callback(new Error(rule.message));
|
|
|
+ callback();
|
|
|
+ };
|
|
|
+ // 校验不大于1
|
|
|
+ let validateNoMore1 = (rule, value, callback) => {
|
|
|
+ if (value > 1) {
|
|
|
+ callback(new Error(rule.message));
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ callback();
|
|
|
+ };
|
|
|
+
|
|
|
+ return {
|
|
|
+ getListApi: this.$api.modelLibrary.getVehicleList, // 获取列表api
|
|
|
+ showName: "vehicleName",
|
|
|
+ typeList: [],
|
|
|
+ // imgSrc: require("@/assets/common/image/car.png"),
|
|
|
+ form: {
|
|
|
+ vehicleCode: "", // 车辆ID
|
|
|
+ vehicleName: "", // 车辆名称
|
|
|
+ description: "", // 车辆描述
|
|
|
+ // vehicleType: "", // 车辆类型
|
|
|
+ // vehicleModel: "", // 车辆型号
|
|
|
+ // vehicleColour: "", // 车辆颜色
|
|
|
+ vehicleType: [], // 车辆模型
|
|
|
+ modelLabel: "", // 车辆模型标识
|
|
|
+ maxSpeed: "", // 最大速度
|
|
|
+ enginePower: "", // 发动机功率
|
|
|
+ maxDeceleration: "", // 最大减速度
|
|
|
+ maxSteeringAngle: "", // 最大转角
|
|
|
+ wheelDrive: "", // 驱动方式
|
|
|
+ overallEfficiency: "", // 总效率
|
|
|
+ frontSurfaceEffective: "", // 前表面有效面积
|
|
|
+ airDragCoefficient: "", // 空气阻力系数
|
|
|
+ rollingResistanceCoefficient: "", // 滚动阻力系数
|
|
|
+ wheelDiameter: "", // 车轮直径
|
|
|
+ frontDistance: "", // 车前距
|
|
|
+ rearDistance: "", // 车后距
|
|
|
+ leftDistance: "", // 车左距
|
|
|
+ rightDistance: "", // 车右距
|
|
|
+ heightDistance: "", // 车高
|
|
|
+ wheelbase: "", // 轴距
|
|
|
+ mass: "", // 质量
|
|
|
+ share: "", // 分享
|
|
|
+ // vehicleImage: "", // 对应的图片相对地址
|
|
|
+ id: "",
|
|
|
+ vehicleFrontView: "", // 对应的图片相对地址
|
|
|
+ vehicleTopView: "", // 对应的图片相对地址
|
|
|
+ },
|
|
|
+ vehicleTypeList: [],
|
|
|
+ vehicleModelList: [],
|
|
|
+ vehicleColourList: [],
|
|
|
+ wheelDriveList: [],
|
|
|
+ rules: {
|
|
|
+ vehicleName: [
|
|
|
+ { required: true, message: "请输入", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ description: [
|
|
|
+ { required: true, message: "请输入", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ // vehicleModel: [
|
|
|
+ // { required: true, message: "请输入", trigger: "blur" },
|
|
|
+ // ],
|
|
|
+ // vehicleColour: [
|
|
|
+ // { required: true, message: "请输入", trigger: "blur" },
|
|
|
+ // ],
|
|
|
+ modelLabel: [
|
|
|
+ { required: true, message: "请输入", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ maxSpeed: [
|
|
|
+ { required: true, message: "请输入", trigger: "blur" },
|
|
|
+ {
|
|
|
+ validator: validateNum,
|
|
|
+ message: "请输入最多带有4位小数的非负数",
|
|
|
+ trigger: ["blur"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ enginePower: [
|
|
|
+ { required: true, message: "请输入", trigger: "blur" },
|
|
|
+ {
|
|
|
+ validator: validateNum,
|
|
|
+ message: "请输入最多带有4位小数的非负数",
|
|
|
+ trigger: ["blur"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ maxDeceleration: [
|
|
|
+ { required: true, message: "请输入", trigger: "blur" },
|
|
|
+ {
|
|
|
+ validator: validateNum,
|
|
|
+ message: "请输入最多带有4位小数的非负数",
|
|
|
+ trigger: ["blur"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ maxSteeringAngle: [
|
|
|
+ { required: true, message: "请输入", trigger: "blur" },
|
|
|
+ {
|
|
|
+ validator: validateNum,
|
|
|
+ message: "请输入最多带有4位小数的非负数",
|
|
|
+ trigger: ["blur"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ overallEfficiency: [
|
|
|
+ { required: true, message: "请输入", trigger: "blur" },
|
|
|
+ {
|
|
|
+ validator: validateNoMore1,
|
|
|
+ message: "请输入不大于1的非负数",
|
|
|
+ trigger: ["blur"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ validator: validateNum,
|
|
|
+ message: "请输入最多带有4位小数的非负数",
|
|
|
+ trigger: ["blur"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ frontSurfaceEffective: [
|
|
|
+ { required: true, message: "请输入", trigger: "blur" },
|
|
|
+ {
|
|
|
+ validator: validateNum,
|
|
|
+ message: "请输入最多带有4位小数的非负数",
|
|
|
+ trigger: ["blur"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ airDragCoefficient: [
|
|
|
+ { required: true, message: "请输入", trigger: "blur" },
|
|
|
+ {
|
|
|
+ validator: validateNoMore1,
|
|
|
+ message: "请输入不大于1的非负数",
|
|
|
+ trigger: ["blur"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ validator: validateNum,
|
|
|
+ message: "请输入最多带有4位小数的非负数",
|
|
|
+ trigger: ["blur"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ rollingResistanceCoefficient: [
|
|
|
+ { required: true, message: "请输入", trigger: "blur" },
|
|
|
+ {
|
|
|
+ validator: validateNoMore1,
|
|
|
+ message: "请输入不大于1的非负数",
|
|
|
+ trigger: ["blur"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ validator: validateNum,
|
|
|
+ message: "请输入最多带有4位小数的非负数",
|
|
|
+ trigger: ["blur"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ wheelDiameter: [
|
|
|
+ { required: true, message: "请输入", trigger: "blur" },
|
|
|
+ {
|
|
|
+ validator: validateNum,
|
|
|
+ message: "请输入最多带有4位小数的非负数",
|
|
|
+ trigger: ["blur"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ frontDistance: [
|
|
|
+ { required: true, message: "请输入", trigger: "blur" },
|
|
|
+ {
|
|
|
+ validator: validateNum,
|
|
|
+ message: "请输入最多带有4位小数的非负数",
|
|
|
+ trigger: ["blur"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ rearDistance: [
|
|
|
+ { required: true, message: "请输入", trigger: "blur" },
|
|
|
+ {
|
|
|
+ validator: validateNum,
|
|
|
+ message: "请输入最多带有4位小数的非负数",
|
|
|
+ trigger: ["blur"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ leftDistance: [
|
|
|
+ { required: true, message: "请输入", trigger: "blur" },
|
|
|
+ {
|
|
|
+ validator: validateNum,
|
|
|
+ message: "请输入最多带有4位小数的非负数",
|
|
|
+ trigger: ["blur"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ rightDistance: [
|
|
|
+ { required: true, message: "请输入", trigger: "blur" },
|
|
|
+ {
|
|
|
+ validator: validateNum,
|
|
|
+ message: "请输入最多带有4位小数的非负数",
|
|
|
+ trigger: ["blur"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ heightDistance: [
|
|
|
+ { required: true, message: "请输入", trigger: "blur" },
|
|
|
+ {
|
|
|
+ validator: validateNum,
|
|
|
+ message: "请输入最多带有4位小数的非负数",
|
|
|
+ trigger: ["blur"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ wheelbase: [
|
|
|
+ { required: true, message: "请输入", trigger: "blur" },
|
|
|
+ {
|
|
|
+ validator: validateNum,
|
|
|
+ message: "请输入最多带有4位小数的非负数",
|
|
|
+ trigger: ["blur"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ mass: [
|
|
|
+ { required: true, message: "请输入", trigger: "blur" },
|
|
|
+ {
|
|
|
+ validator: validateNum,
|
|
|
+ message: "请输入最多带有4位小数的非负数",
|
|
|
+ trigger: ["blur"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ wheelDrive: [
|
|
|
+ { required: true, message: "请选择", trigger: "change" },
|
|
|
+ ],
|
|
|
+ vehicleType: [
|
|
|
+ { required: true, message: "请选择", trigger: "change" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ multiple: false,
|
|
|
+ label: "name",
|
|
|
+ value: "code",
|
|
|
+ },
|
|
|
+ modelLabelList: [],
|
|
|
+ modelImgSrc: "",
|
|
|
+ // 用于当前选中项的展示
|
|
|
+ curOne: {
|
|
|
+ share: "",
|
|
|
+ id: "",
|
|
|
+ },
|
|
|
+ carModel: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {
|
|
|
+ ...mapState(["fileHost", "fileUrl", "roleCode"]),
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ showInfo(id) {
|
|
|
+ this.$axios({
|
|
|
+ method: "post",
|
|
|
+ url: this.$api.modelLibrary.getVehicleInfo,
|
|
|
+ data: {
|
|
|
+ id,
|
|
|
+ },
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code == 200 && res.info) {
|
|
|
+ this.$refs.form.clearValidate();
|
|
|
+ this.form = res.info;
|
|
|
+ if (res.info.vehicleFrontView) {
|
|
|
+ // this.modelImgSrc = this.getImgUrl(
|
|
|
+ // res.info.vehicleFrontView
|
|
|
+ // );
|
|
|
+ this.carModel = this.getImgUrl(
|
|
|
+ res.info.vehicleFrontView
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ // if (this.form.vehicleType[1]) {
|
|
|
+ // this.carModel = this.form.vehicleType[1];
|
|
|
+ // }
|
|
|
+
|
|
|
+ this.curOne = {
|
|
|
+ share: res.info.share,
|
|
|
+ id: res.info.id,
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message || "获取失败");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ save(isAdd) {
|
|
|
+ this.$refs.form.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ // 判断是否新增
|
|
|
+ if (isAdd || this.form.share === "") {
|
|
|
+ this.form.id = "";
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$axios({
|
|
|
+ method: "post",
|
|
|
+ url: this.$api.modelLibrary.saveVehicle,
|
|
|
+ data: {
|
|
|
+ ...this.form,
|
|
|
+ },
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code == 200 && res.info) {
|
|
|
+ this.form.id = res.info.id;
|
|
|
+ this.form.share = res.info.share;
|
|
|
+ this.form.vehicleCode = res.info.vehicleCode;
|
|
|
+ this.$message.success("保存成功");
|
|
|
+ this.$refs.modelList.getList();
|
|
|
+
|
|
|
+ this.curOne = {
|
|
|
+ share: res.info.share,
|
|
|
+ id: res.info.id,
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message || "保存失败");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addOne() {
|
|
|
+ this.$refs.form.resetFields();
|
|
|
+ this.form.vehicleCode = "";
|
|
|
+ this.form.vehicleFrontView = "";
|
|
|
+ this.form.vehicleTopView = "";
|
|
|
+ this.form.share = "";
|
|
|
+ this.form.id = "";
|
|
|
+ this.modelImgSrc = "";
|
|
|
+ this.carModel = "";
|
|
|
+
|
|
|
+ this.curOne = {
|
|
|
+ share: "",
|
|
|
+ id: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ delOne(id) {
|
|
|
+ this.$axios({
|
|
|
+ method: "post",
|
|
|
+ url: this.$api.modelLibrary.delVehicleById,
|
|
|
+ data: {
|
|
|
+ id,
|
|
|
+ },
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message.success("删除成功");
|
|
|
+ this.$refs.modelList.getList();
|
|
|
+ if (this.form.id && id === this.form.id) {
|
|
|
+ this.addOne();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (id === this.curOne.id) {
|
|
|
+ this.curOne = {
|
|
|
+ share: "",
|
|
|
+ id: "",
|
|
|
+ };
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message || "删除失败");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ share() {
|
|
|
+ this.$axios({
|
|
|
+ method: "post",
|
|
|
+ url: this.$api.modelLibrary.shareVehicle,
|
|
|
+ data: {
|
|
|
+ ...this.form,
|
|
|
+ },
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message.success("分享成功");
|
|
|
+ this.$refs.modelList.getList();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message || "分享失败");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ cancel() {
|
|
|
+ if (this.form.id) {
|
|
|
+ // 取消时有id则重新请求表单
|
|
|
+ this.showInfo(this.form.id);
|
|
|
+ } else {
|
|
|
+ // 清空
|
|
|
+ this.addOne();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getImgUrl(addr) {
|
|
|
+ let url = "";
|
|
|
+ if (process.env.VUE_APP_IS_DEV == "true") {
|
|
|
+ url = this.fileHost + this.fileUrl;
|
|
|
+ } else {
|
|
|
+ url = this.fileUrl;
|
|
|
+ }
|
|
|
+
|
|
|
+ let token = localStorage.getItem("Authorization").split(" ")[1];
|
|
|
+ let src = `${url}?objectName=${addr}&access_token=${token}`;
|
|
|
+ return src;
|
|
|
+ },
|
|
|
+ modelLabelChange() {
|
|
|
+ Object.assign(
|
|
|
+ this.form,
|
|
|
+ this.$refs.cascader.getCheckedNodes(true)[0].data.vo
|
|
|
+ );
|
|
|
+
|
|
|
+ console.log(this.form);
|
|
|
+ console.log(this.form.vehicleFrontView);
|
|
|
+
|
|
|
+ // this.carModel = this.form.vehicleType[1];
|
|
|
+
|
|
|
+ // this.modelImgSrc = this.getImgUrl(this.form.vehicleFrontView);
|
|
|
+ this.carModel = this.getImgUrl(this.form.vehicleFrontView);
|
|
|
+ },
|
|
|
+ async getModelLabelList() {
|
|
|
+ await this.$axios({
|
|
|
+ method: "post",
|
|
|
+ url: this.$api.modelLibrary.getVehicleTempTree,
|
|
|
+ data: {},
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code == 200 && res.info) {
|
|
|
+ this.modelLabelList = res.info;
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message || "获取车辆模型列表失败");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ async mounted() {
|
|
|
+ await this.$dicsListsInit({
|
|
|
+ vehicleTypeList: "vehicleType",
|
|
|
+ wheelDriveList: "driveType",
|
|
|
+ });
|
|
|
+
|
|
|
+ this.getModelLabelList();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang='less' scoped>
|
|
|
+.vehicleModelPanel {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ padding: 15px 30px 10px;
|
|
|
+
|
|
|
+ .modelList /deep/ .listPanel {
|
|
|
+ min-height: 400px;
|
|
|
+ height: calc(100vh - 120px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .contentPanel {
|
|
|
+ flex: 1;
|
|
|
+ padding-left: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .inputBox.flexBox {
|
|
|
+ margin-bottom: 22px;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ width: 138px;
|
|
|
+ }
|
|
|
+
|
|
|
+ div {
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .titlePanel {
|
|
|
+ padding: 22px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btns {
|
|
|
+ padding-top: 30px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modelBox {
|
|
|
+ // width: 60%;
|
|
|
+ min-width: 810px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
zhangliang2