个人车辆列表编辑选择用户名9.14

src/views/system/vehicleManagement/personalVehicle/vehiclesList/index.vue

@@ -92,6 +92,7 @@
           <dict-tag :type="DICT_TYPE.CARTYPE" :value="scope.row.vehicleType" />
         </template>
       </el-table-column>
+      <el-table-column label="用户名" align="center" prop="possessor" />
       <el-table-column label="车牌号" align="center" prop="vehicleNo" />
       <!-- <el-table-column label="车辆VIN码" align="center" prop="vehicleVin" /> -->
       <!-- <el-table-column label="mac地址" align="center" prop="mac" width="90"/>
@@ -268,8 +269,10 @@ const resetQuery = () => {
 
 /** 添加/修改操作 */
 const formRef = ref()
-const openForm = (type: string, id?: number) => {
+const openForm = (type: string, row?: any) => {
-  formRef.value.open(type, id)
+  formRef.value.open(type, row)
+// const openForm = (type: string, id?: number) => {
+//   formRef.value.open(type, id)
 }
 
 /** 删除按钮操作 */

src/views/system/vehicleManagement/personalVehicle/vehiclesList/vehiclesListForm.vue

@@ -8,37 +8,7 @@
       v-loading="formLoading"
        label-position="top"
     >
-      <!--
-        <el-table-column label="所有人" align="center" prop="producer" />
-        <el-table-column label="车辆性质" align="center" prop="vehicleProperty" >
-          <template #default="scope">
-          <span v-if="scope.row.vehicleProperty==1">私人车辆</span>
-          <span v-if="scope.row.vehicleProperty==2">车队车辆 </span>
-        
-        </template>
-        </el-table-column>
-        <el-table-column label="车辆外观	" align="center" prop="vehicleApc" />
-        <el-table-column label="营业结束时间" align="center" prop="startTime" width="150"/>
-        <el-table-column label="营业结束时间" align="center" prop="endTime" width="150"/>
-        <el-table-column label="是否允许离线换电" align="center" prop="canOffline" width="180">
-          <template #default="scope">
-          <span v-if="scope.row.canOffline==1">允许</span>
-          <span v-if="scope.row.canOffline==0">不允许 </span>
-        
-        </template>
-        </el-table-column>
-        <el-table-column label="创建时间" align="center" prop="createTime"  :formatter="dateFormatter"
-        width="180px" />
-        <el-table-column label="状态" align="center" prop="status" >
-          <template #default="scope">
-            <span v-if="scope.row.status==0">禁用</span>
-          <span v-if="scope.row.status==1">启用 </span>
-          <span v-if="scope.row.status==2">黑名单 </span>
-          <span v-if="scope.row.status==3">白名单</span>
    
-        </template>
-         
-        </el-table-column>-->
    <el-row :gutter="24">
         <el-col  :span="12">
           <el-form-item label="车辆型号" prop="vehicleType">
@@ -57,38 +27,26 @@
         </el-select>
           </el-form-item>
         </el-col>
+        <!-- <el-button type="primary" :disabled="formLoading"        @click="dialogVisible_binding = true" >选择用户</el-button> -->
+        <el-col  :span="12" v-if="formType === 'create'">
+        
+          <el-form-item label="用户名" prop="possessor">
+            <el-input v-model="formData.possessor" readonly  @click="openUser" />
+       
+          </el-form-item>
+        </el-col>
         <el-col  :span="12">
           <el-form-item label="车牌号" prop="vehicleNo">
             <el-input v-model="formData.vehicleNo" placeholder="请输入车牌号" />
           </el-form-item>
         </el-col>
-      </el-row>
+
-      <el-row :gutter="24">
         <el-col  :span="12">
           <el-form-item label="车辆VIN码" prop="vehicleVin">
             <el-input v-model="formData.vehicleVin" placeholder="请输入车辆VIN码" />
           </el-form-item>
         </el-col>
-        <!-- <el-col  :span="12">
+
-          <el-form-item label="mac地址" prop="mac">
-            <el-input v-model="formData.mac" placeholder="请输入mac地址" />
-          </el-form-item>
-        </el-col>
-        <el-col  :span="12">
-          <el-form-item label="rfid" prop="rfid">
-            <el-input v-model="formData.rfid" placeholder="请输入rfid" />
-          </el-form-item>
-        </el-col> -->
-        <!-- <el-col  :span="12">
-          <el-form-item label="品牌" prop="brand">
-            <el-input v-model="formData.brand" placeholder="请输入品牌" />
-          </el-form-item>
-        </el-col> -->
-        <!-- <el-col  :span="12">
-          <el-form-item label="车辆外观" prop="vehicleApc">
-            <el-input v-model="formData.vehicleApc" placeholder="请输入车辆外观" />
-          </el-form-item>
-        </el-col> -->
         <el-col  :span="12">
           <el-form-item label="车辆性质" prop="vehicleProperty">
             <el-select v-model="formData.vehicleProperty" clearable placeholder="请选择状态" style="width: 100%;">
@@ -101,46 +59,6 @@
             </el-select>
           </el-form-item>
         </el-col>
-      </el-row>
-      <!-- <el-col  :span="12">
-          <el-form-item label="底盘号码" prop="chassisNumber">
-            <el-input v-model="formData.chassisNumber" placeholder="请输入底盘号码" />
-          </el-form-item>
-        </el-col> -->
-      <!-- <el-col  :span="12">
-          <el-form-item label="电动机号码" prop="engineNumber">
-            <el-input v-model="formData.engineNumber" placeholder="请输入电动机号码" />
-          </el-form-item>
-        </el-col> -->
-      <!-- <el-col  :span="12">
-          <el-form-item label="购车日期" prop="purchaseDate">
-            <el-input v-model="formData.purchaseDate" placeholder="请输入购车日期" />
-          </el-form-item>
-        </el-col>
-        <el-col  :span="12">
-          <el-form-item label="车辆厂家" prop="producer">
-            <el-input v-model="formData.producer" placeholder="请输入车辆厂家" />
-          </el-form-item>
-        </el-col>
-        <el-col  :span="12">
-          <el-form-item label="所有人" prop="possessor">
-            <el-input v-model="formData.possessor" placeholder="请输入所有人" />
-          </el-form-item>
-        </el-col> -->
-      <el-row :gutter="24">
-       
-
-        <!-- 
-        <el-col  :span="12">
-          <el-form-item label="营业开始时间" prop="vehiclestartTimeApc">
-            <el-input v-model="formData.startTime" placeholder="请输入营业开始时间" />
-          </el-form-item>
-        </el-col>
-        <el-col  :span="12">
-          <el-form-item label="营业结束时间" prop="endTime">
-            <el-input v-model="formData.endTime" placeholder="请输入营业结束时间" />
-          </el-form-item>
-        </el-col> -->
         <el-col  :span="12">
           <el-form-item label="是否允许离线换电" prop="canOffline">
             <el-select v-model="formData.canOffline" clearable placeholder="请选择状态"  style="width: 100%;">
@@ -165,18 +83,12 @@
             </el-select>
           </el-form-item>
         </el-col>
-       
-      </el-row>
-      
-      <el-row type="flex" justify="center">
-       
         <el-col  :span="12">
           <el-form-item label="车辆外观" prop="vehicleApc">
   <UploadImgs v-model:modelValue="formData.vehicleApc" />
    
       </el-form-item>
         </el-col>
-     
       </el-row>
     </el-form>
     <template #footer>
@@ -184,20 +96,99 @@
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
+  <!-- 用户选择 -->
+  <el-dialog v-model="dialogVisible_binding" title="用户选择" width="1200">
+    <div style="display: flex; flex-direction: column; justify-content: space-between">
+      <el-form
+        class="-mb-15px"
+        :model="bind_queryParams"
+        ref="bind_queryFormRef"
+        :inline="true"
+        label-width="68px"
+      >
+        <el-form-item label="用户ID" prop="id">
+          <el-input
+            v-model="bind_queryParams.id"
+            placeholder="请输入"
+            clearable
+            @keyup.enter="get_team_list"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item label="用户昵称" prop="nickname">
+          <el-input
+            v-model="bind_queryParams.nickname"
+            placeholder="请输入"
+            clearable
+            @keyup.enter="get_team_list"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="get_team_list"
+            ><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button
+          >
+          <el-button @click="bind_resetQuery"
+            ><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button
+          >
+        </el-form-item>
+      </el-form>
+      <!--  -->
+      <el-table
+      ref="singleTableRef"
+
+        :data="userIdlist"
+        border
+        style="width: 100%; margin-top: 15px"
+        max-height="500"
+        highlight-current-row
+        @current-change="selectionChange"
+      >
+        <el-table-column label="用户ID" align="center" prop="id" />
+        <el-table-column label="用户昵称" align="center" prop="nickname" />
+        <el-table-column label="用户头像" align="center" prop="avatar" >
+          <template #default="scope">
+          <div style="display: flex; align-items: center; justify-content: center">
+            <el-image :src="scope.row.avatar" style="width: 160px; height: 90px" />
+          </div>
+        </template>
+        </el-table-column>
+  
+      </el-table>
+      <div>
+        <Pagination
+        :total="bind_total"
+          v-model:page="bind_queryParams.pageNo"
+          v-model:limit="bind_queryParams.pageSize"
+          @pagination="get_team_list"
+        />
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible_binding = false">取消</el-button>
+        <el-button type="primary" @click="submit_bind"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
   <script setup lang="ts">
 import * as vehiclesListApi from '@/api/system/vehicleManagement/personalVehicle/vehiclesList'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-
+import { UserApi, UserVO } from '@/api/member/driver'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-
+const dialogVisible_binding = ref(false) // 绑定车队的弹窗
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const userIdlist=ref([])
+const bind_total = ref(0)
+const selectUser=ref({})
 const formData = ref({
   id: undefined,
+  userId:undefined,
   vehicleType: undefined,
   vehicleNo: undefined,
   vehicleVin: undefined,
@@ -216,14 +207,59 @@ const formData = ref({
   canOffline: undefined,
   status: undefined
 })
+const singleTableRef=ref()
+const submit_bind=()=>{
+  formData.value={...formData.value,userId:selectUser.value.id,possessor:selectUser.value.nickname}
+  dialogVisible_binding.value= false
+}
+const bind_queryParams = reactive({
+  // pageNo: 1,
+  // pageSize: 10,
+  // id:undefined,
+  // nickname:undefined,
+  // avatar:undefined,
+  Type:2,
+})
 const formRules = reactive({
   vehicleVin: [{ required: true, message: '车辆VIN码不能为空', trigger: 'blur' }],
   status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 
+const openUser=()=>{
+  dialogVisible_binding.value=true
+
+  get_team_list()
+}
+const get_team_list = async () => {
+  try {
+    const data2 = await UserApi.getUserPage(bind_queryParams)
+ 
+ userIdlist.value=data2.list
+ if(formData.value.userId){
+  userIdlist.value.forEach(item=>{
+    if(item.id==formData.value.userId){
+      singleTableRef.value!.setCurrentRow(item)
+
+    }
+  })
+ }
+ bind_total.value = data2.total
+  } finally {
+  }
+}
+// he
+const currentRow_id = ref([])
+const selectionChange = (rows: UserVO[]) => {
+  selectUser.value=rows
+  // let array = []
+  // array = rows.map((item) => item.id)
+  // // console.log(array, 'array')
+  // currentRow_id.value = array
+}
 /** 打开弹窗 */
-const open = async (type: string, id?: number) => {
+// const open = async (type: string, id?: number) => {
+const open = async (type: string, id?:any) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
@@ -265,7 +301,12 @@ const submitForm = async () => {
     formLoading.value = false
   }
 }
-
+const bind_queryFormRef = ref() // 搜索的表单
+// 用户选择列表重置
+const bind_resetQuery = () => {
+  bind_queryFormRef.value.resetFields()
+  get_team_list()
+}
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
@@ -290,5 +331,15 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
+ 
+/** 选中行操作 */
+const currentRow = ref({}) // 选中行
+const handleCurrentChange = (row) => {
+  currentRow.value = row
+}
+// onMounted(() => {
+//   // getList()
+//   get_team_list()
+// })
 </script>