三方新增司机和车辆限制

src/components/SelectBox/SelectBox.vue

@@ -8,6 +8,7 @@
       @blur="handleBlur"
       @change="handleChange"
       :clearable="props.clearable !== false"
+      :disabled="props.disabled === true"
     ></el-input>
 
     <div
@@ -62,6 +63,8 @@ const props = defineProps([
   'minWidth',
   /** 是否清空 : 默认true */
   'clearable',
+  /** 是否禁用 : 默认false */
+  'disabled',
 ]);
 const $emit = defineEmits(['update:modelValue']);
 
@@ -131,7 +134,7 @@ defineExpose({ handleShow, handleClose });
     background: #fff;
     border-radius: 3px;
     box-shadow: 0px 0px 0.625vw rgba(0, 0, 0, 0.12);
-    animation: dow 0.5s ease-in-out;
+    animation: dow 0.3s ease-in-out;
 
     &::before {
       content: '';

src/components/edittablehead/index.vue

@@ -160,7 +160,7 @@ const initTable = async () => {
       for (let i = 0; i < _oldArr.length; i++) {
         const value = _oldArr[i];
 
-        if (item.prop !== value.prop) continue;
+        if (item.prop + item.label + item.type !== value.prop + value.label + value.type) continue;
         _setArr.push(item);
         _oldArr.splice(i, 1);
         break;
@@ -170,7 +170,7 @@ const initTable = async () => {
     _setArr.push(..._oldArr);
 
     console.log('_setArr :>> ', _setArr);
-    columnRef.value = _setArr;
+    columnRef.value = [..._setArr];
     handleClearTableQuery(_setArr);
     emit('update:modelValue', _setArr);
   } catch (error) {

src/views/distribution/artery/addTripartiteTransfer.vue

@@ -70,6 +70,16 @@
               class="m-2"
               placeholder="运费分摊方式"
               size="default"
+              @change="
+                val => {
+                  console.log('val :>> ', val);
+                  if (val + '' === '2') return;
+                  details.form.driverName = '';
+                  details.form.driverId = '';
+                  details.form.driverMobile = '';
+                  details.form.carNumber = '';
+                }
+              "
             >
               <el-option
                 v-for="item in details.pageInfo.deliveryType || []"
@@ -112,8 +122,28 @@
             </el-select>
           </el-form-item>
           <div style="display: flex">
-            <el-form-item label="送货司机" prop="driverName" class="flex1 mr10">
+            <el-form-item
+              label="送货司机"
+              prop="driverName"
+              class="flex1 mr10"
+              :rules="
+                details.form.deliveryType + '' === '2'
+                  ? [
+                      {
+                        required: true,
+                        message: '请选择送货司机',
+                        trigger: ['change', 'blur'],
+                      },
+                    ]
+                  : [
+                      {
+                        required: false,
+                      },
+                    ]
+              "
+            >
               <el-select
+                :disabled="details.form.deliveryType + '' !== '2'"
                 v-model="form.driverName"
                 filterable
                 :teleported="false"
@@ -137,40 +167,43 @@
           </div>
 
           <div style="display: flex">
-            <el-form-item label="送货车辆" prop="driverName" class="flex1 mr10">
-              <!-- <el-select
-                v-model="form.driverName"
-                filterable
-                :teleported="false"
-                remote
-                @change="handleNameChange"
-                reserve-keyword
-                placeholder="输入车牌"
-                :remote-method="remoteMethodDriver"
-                :loading="details.loadingObj.driverName"
-              >
-                <el-option
-                  v-for="val in details.driverListByName"
-                  :key="val.driverName"
-                  :label="val.driverName"
-                  :value="val.driverId"
-                />
-              </el-select> -->
+            <el-form-item
+              label="送货车辆"
+              prop="carNumber"
+              class="flex1 mr10"
+              :rules="
+                details.form.deliveryType + '' === '2'
+                  ? [
+                      {
+                        required: true,
+                        message: '请选择或输入车牌号',
+                        trigger: ['change', 'blur'],
+                      },
+                    ]
+                  : [
+                      {
+                        required: false,
+                      },
+                    ]
+              "
+            >
               <SelectBox
-                ref="goodsNameRef"
+                ref="carSelectRef"
                 className="goodsName"
                 :input="() => debounce(handleFindCar(form.carNumber), 1000)"
                 v-model="form.carNumber"
                 placeholder="请选择车辆"
+                :disabled="details.form.deliveryType + '' !== '2'"
               >
                 <div v-loading="details.loadingObj.loading">
-                  <template v-if="details.driverListByName > 0">
+                  <template v-if="details.carListByName.length > 0">
                     <div
-                      v-for="val in details.driverListByName"
-                      :key="val.driverName"
+                      v-for="val in details.carListByName"
+                      :key="val.carNumber"
+                      class="carRow"
                       @click="() => handleChooseCar(val)"
                     >
-                      {{ val.goodsName }}
+                      {{ val.carNumber }}
                     </div>
                   </template>
                   <template v-else>
@@ -486,7 +519,14 @@ import dayjs from 'dayjs';
 import { mapGetters } from 'vuex';
 /** 获取字典 */
 import { getDictionaryBiz } from '@/api/system/dict';
-import { downloadXls, computeNumber, setNodeHeight, debounce, deepClone } from '@/utils/util';
+import {
+  downloadXls,
+  computeNumber,
+  setNodeHeight,
+  debounce,
+  deepClone,
+  getObjType,
+} from '@/utils/util';
 import { columnList, newColumnList } from '@/option/distribution/addVehicleStowage';
 import {
   postloadFindLoadInitData,
@@ -495,7 +535,7 @@ import {
   postFindCarrierByName,
   postFindUseOrderList,
   postSelectEditDetailByLoadId,
-  postFindCarListByName
+  postFindCarListByName,
 } from '@/api/distribution/AddVehicleStowage';
 import {
   postSaveNewTripartiteTransfer,
@@ -520,6 +560,9 @@ const ruleFormRef = ref();
 const oldColumnListNode = ref();
 const newColumnListNode = ref();
 
+// 选择车辆
+const carSelectRef = ref();
+
 const details = reactive<any>({
   /** 是否开启搜索 */
   search: true,
@@ -584,6 +627,14 @@ const details = reactive<any>({
         trigger: ['change'],
       },
     ],
+    /** 送货方式 */
+    deliveryType: [
+      {
+        required: true,
+        message: '请选择送货方式',
+        trigger: ['change'],
+      },
+    ],
     /** 客户类型 */
     customerType: [
       {
@@ -671,6 +722,8 @@ const details = reactive<any>({
   customerType: [],
   /** 送货司机 */
   driverListByName: [],
+  /** 车辆 */
+  carListByName: [],
   /** 被选中在调度池的订单列表 */
   orderCodeList: [],
   /** 修改时, 已存在调度池中的运单数据 */
@@ -917,14 +970,19 @@ remoteMethodDriver('');
 
 /** 查询车辆 */
 const handleFindCar = async value => {
-   const res = await postFindCarListByName({ carNumber: value });
+  const res = await postFindCarListByName({ carNumber: value });
   const { code, data } = res.data;
   if (code !== 200) return;
+  console.log('data :>> ', data);
   details.carListByName = data;
 };
 
 /** 选择车辆 */
-const handleChooseCar = val => {};
+const handleChooseCar = val => {
+  details.form.carNumber = val.carNumber;
+  // 关闭下拉框
+  carSelectRef.value.handleClose();
+};
 
 /** 表格表头输入框搜索 */
 const inputsc = (index, row) => {
@@ -1071,6 +1129,9 @@ const handleNameChange = () => {
   form.value.driverName = _value.driverName;
   form.value.driverId = _value.driverId;
   form.value.driverMobile = _value.driverPhone;
+
+  if (getObjType(_value.carNumberList) !== 'array' || _value.carNumberList.length === 0) return;
+  form.value.carNumber = _value.carNumberList[0] || '';
 };
 
 /** 关闭页面 */
@@ -1378,4 +1439,13 @@ const handleSubmit = (formEl: FormInstance | undefined) => {
 .header_search > div {
   width: 40%;
 }
+
+.carRow {
+  padding: 8px 10px;
+  text-align: left;
+
+  &:hover {
+    background: #f5f7fa;
+  }
+}
 </style>