列表

web/src/view/parking/carOwner.vue

@@ -34,71 +34,155 @@
       </el-form-item>
     </el-form>
     <el-table :data="carOwnerList">
-      <el-table-column label="名字"></el-table-column>
-      <el-table-column label="姓氏"></el-table-column>
-      <el-table-column label="手机"></el-table-column>
-      <el-table-column label="邮箱"></el-table-column>
-      <el-table-column label="住址"></el-table-column>
-      <el-table-column label="备注"></el-table-column>
-      <el-table-column label="操作">
+      <el-table-column label="名字" align="center" width="180" prop="owner_name"></el-table-column>
+      <el-table-column label="姓氏" align="center" width="180" prop="owner_surname"></el-table-column>
+      <el-table-column label="手机" align="center" prop="owner_phone"></el-table-column>
+      <el-table-column label="邮箱" align="center"></el-table-column>
+      <el-table-column label="住址" align="center"></el-table-column>
+      <el-table-column label="操作" align="center">
         <template #default="scope">
-          <el-button @click="putCarOwner" icon="edit">编辑</el-button>
-          <el-button @click="deleteCarOwner" icon="delete">删除</el-button>
+<!--          <el-tooltip content="Bottom center" placement="bottom" effect="light">-->
+<!--            <el-button text type="primary" icon="MessageBox">备注</el-button>-->
+<!--          </el-tooltip>-->
+          <el-button text type="primary" icon="MessageBox">备注</el-button>
+          <el-button @click="openCarOwner('编辑车主', scope.row)" icon="edit" text type="primary">编辑</el-button>
+          <el-button @click="deleteCarOwner(scope.row)" icon="delete" text type="primary">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
-    <el-dialog v-model="carOwnerShow" :title="carOwnerTitle">
-      <el-form label-width="100">
+    <el-dialog v-model="carOwnerShow" :title="carOwnerTitle" width="650">
+      <el-form label-width="100" size="large">
         <el-form-item label="名称：">
-          <el-input/>
+          <el-input v-model="carOwnerData.owner_name"/>
         </el-form-item>
         <el-form-item label="姓氏：">
-          <el-input/>
+          <el-input v-model="carOwnerData.owner_surname"/>
         </el-form-item>
         <el-form-item label="手机：">
-          <el-input/>
-        </el-form-item>
-        <el-form-item label="邮箱：">
-          <el-input/>
+          <el-input v-model="carOwnerData.owner_phone"/>
         </el-form-item>
         <el-form-item label="vip：">
-          <el-input/>
+          <el-radio-group v-model="carOwnerData.is_vip" size="large" fill="#409eff">
+            <el-radio-button label="否" :value="false" />
+            <el-radio-button label="是" :value="true" />
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="vip过期时间：">
+          <el-date-picker
+              v-model="carOwnerData.vip_expire_time"
+              type="date"
+              placeholder="当前日期"
+          />
         </el-form-item>
       </el-form>
+      <template #footer>
+        <el-button @click="carOwnerShow = false" size="large">取消</el-button>
+        <el-button @click="carOwnerOperation" type="primary" size="large">确认</el-button>
+      </template>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { obtainCarOwnerList } from '@/api/carOwner'
+import { obtainCarOwnerList, addCarOwner, editCarOwner, removeCarOwner } from '@/api/carOwner'
 import { onMounted, reactive, ref } from 'vue'
-const carOwnerList = reactive([])
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {deleteGuardBooth} from "@/api/guardBooth";
+const carOwnerList = reactive([1])
 const carOwnerShow = ref(false)
 const carOwnerTitle = ref('')
+const carOwnerData = reactive({
+  id: 0,
+  owner_name: '',
+  owner_surname: '',
+  owner_phone: '',
+  is_vip: false,
+  vip_expire_time: ''
+})
 const getCarOwnerList = () => {
   obtainCarOwnerList().then(res => {
     if (res.code === 0) {
-      console.log(res.data)
       carOwnerList.length = 0
       carOwnerList.push(...res.data.list)
     }
   })
 }
 
-const deleteCarOwner = () => {
-
+const deleteCarOwner = (data) => {
+  ElMessageBox.confirm(
+      '确定要删除该车主信息吗?',
+      '提示',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+  )
+      .then(() => {
+       removeCarOwner(data.ID).then(res => {
+          if (res.code === 0) {
+            ElMessage({
+              type: 'success',
+              message: '删除成功',
+            })
+            getCarOwnerList()
+          } else {
+            ElMessage({
+              type: 'error',
+              message: '删除失败',
+            })
+          }
+        })
+      })
+      .catch(() => {
+        ElMessage({
+          type: 'info',
+          message: '取消删除',
+        })
+      })
 }
 
-const putCarOwner = () => {
-
+const openCarOwner = (head, data) => {
+  carOwnerShow.value = true
+  carOwnerTitle.value = head
+  if (head === '新增车主') {
+    carOwnerData.is_vip = false
+    carOwnerData.owner_surname = ''
+    carOwnerData.owner_name = ''
+    carOwnerData.owner_phone = ''
+    carOwnerData.vip_expire_time = ''
+  } else {
+    carOwnerData.id = data.ID
+    carOwnerData.is_vip = data.is_vip
+    carOwnerData.owner_surname = data.owner_surname
+    carOwnerData.owner_phone = data.owner_phone
+    carOwnerData.owner_name = data.owner_name
+    carOwnerData.vip_expire_time = data.vip_expire_time
+  }
 }
 
-const openCarOwner = (head,data) => {
-
-}
-
-const carOwnerOperation = () => {
-
+const carOwnerOperation = async () => {
+  if (carOwnerTitle.value === '新增车主') {
+    await addCarOwner(carOwnerData).then(res => {
+      if (res.code === 0) {
+        ElMessage.success('添加成功')
+        carOwnerShow.value = false
+        getCarOwnerList()
+      } else {
+        ElMessage.error('添加失败')
+      }
+    })
+  } else {
+    await editCarOwner(carOwnerData).then(res => {
+      if (res.code === 0) {
+        ElMessage.success('更新成功')
+        carOwnerShow.value = false
+        getCarOwnerList()
+      } else {
+        ElMessage.error('更新失败')
+      }
+    })
+  }
 }
 onMounted(() => {
   getCarOwnerList()