|
@@ -1,78 +1,202 @@
|
|
|
<template>
|
|
|
<div class="default-main ">
|
|
|
- <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info"
|
|
|
- show-icon />
|
|
|
- <el-row>
|
|
|
- <el-col :span="24">
|
|
|
-
|
|
|
- <!-- 表格顶部菜单 -->
|
|
|
- <TableHeader :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch']"
|
|
|
- quick-search-placeholder="通过标题模糊搜索"
|
|
|
- @action="baTable.onTableHeaderAction" />
|
|
|
- <!-- 表格 -->
|
|
|
- <!-- 要使用`el-table`组件原有的属性,直接加在Table标签上即可 -->
|
|
|
- <Table @action="baTable.onTableAction" />
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <!-- 表单 -->
|
|
|
- <PopupForm ref="formRef" />
|
|
|
+ <div style="display: flex;align-items: center">
|
|
|
+ <span>区县:</span>
|
|
|
+ <el-select v-model="districtId" placeholder="请选择区县" style="width: 150px;margin-right: 10px" @change="selectDstrict"
|
|
|
+ :clearable="true">
|
|
|
+ <el-option v-for="item in districtList" :label="item.districtName" :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <span>小区:</span>
|
|
|
+ <el-select v-model="communityId" placeholder="请选择小区" style="width: 150px;margin-right: 10px"
|
|
|
+ @change="selectCommunity" :clearable="true">
|
|
|
+ <el-option v-for="item in communityList" :label="item.communityName" :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <span>楼号:</span>
|
|
|
+ <el-select v-model="buildingId" placeholder="请选择楼号" style="width: 150px;margin-right: 10px" @change="selectBuilding"
|
|
|
+ :clearable="true">
|
|
|
+ <el-option v-for="item in buildingList" :label="item.buildingNumber" :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-button v-if="auth('add')" type="primary" :disabled="buildingId == ''"
|
|
|
+ @click="openDialog('add')">登记车位</el-button>
|
|
|
+ <el-button v-if="auth('map')" type="primary" :disabled="buildingId == ''"
|
|
|
+ @click="">车位绑定</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-table :data="parkingData" style="margin-top: 10px" border>
|
|
|
+ <el-table-column prop="parkingNumber" label="车位编号"></el-table-column>
|
|
|
+ <el-table-column prop="parkingType" label="车位类型">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span>{{ row.parkingType == 1 ? '车库' : '车位' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="area" label="车位面积"></el-table-column>
|
|
|
+ <el-table-column label="售卖类型">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag v-if="row.isSale == 1" style="margin: 0 5px;">售卖</el-tag>
|
|
|
+ <el-tag v-if="row.isHire == 1" style="margin: 0 5px;">出租</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="销售金额">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span v-if="row.isSale == 1" style="margin: 0 5px;">{{ row.salePrice }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="出售状态">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag v-if="row.isSale == 1" :type="row.saleStatus == 1 ? 'info' : ''" style="margin: 0 5px;">{{ row.saleStatus
|
|
|
+ == 1 ? '已售' : '待售' }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="租金">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span v-if="row.isHire == 1" style="margin: 0 5px;">{{ row.hirePrice }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="出租状态">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag v-if="row.isHire == 1" :type="row.hireStatus == 1 ? 'info' : ''" style="margin: 0 5px;">{{ row.hireStatus
|
|
|
+ == 1 ? '已租' : '待租' }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="150" header-align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div style="display: flex;justify-content: center;">
|
|
|
+ <el-button v-if="auth('edit')" class="table-operate" size="small" type="warning" @click="openDialog('edit', row)">
|
|
|
+ <icon name="el-icon-edit"></icon>
|
|
|
+ </el-button>
|
|
|
+ <el-popconfirm width="220" confirm-button-text="确定" cancel-button-text="取消" title="是否确定删除?"
|
|
|
+ @confirm="deleteRow(row)">
|
|
|
+ <template #reference>
|
|
|
+ <el-button v-if="auth('del')" class="table-operate" type="danger" size="small">
|
|
|
+ <icon name="el-icon-delete"></icon>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-popconfirm>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <editDialog ref="editDialogRef" @close="getData"></editDialog>
|
|
|
+ <parkingMap ref="parkingMapRef"></parkingMap>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, onMounted, provide } from "vue";
|
|
|
-import { parking } from "/@/api/controllerUrls";
|
|
|
-import Table from "/@/components/table/index.vue";
|
|
|
-import TableHeader from "/@/components/table/header/index.vue";
|
|
|
-import { defaultOptButtons } from "/@/components/table";
|
|
|
-import { baTableApi } from "/@/api/common";
|
|
|
-import baTableClass from "/@/utils/baTable";
|
|
|
-
|
|
|
-
|
|
|
-const tableRef = ref();
|
|
|
-const baTable = new baTableClass(
|
|
|
- new baTableApi(parking),
|
|
|
- {
|
|
|
- dblClickNotEditColumn: [undefined, "status"],
|
|
|
- column: [
|
|
|
- { label: "小区名称", prop: "communityName", align: "left", operator: "LIKE" },
|
|
|
- { label: "楼号", prop: "buildingNumber", align: "center", operator: false },
|
|
|
- { label: "现有车位", prop: "carportCount", align: "center", width: "100", operator: false },
|
|
|
- { label: "剩余车位", prop: "carportReminderCount", align: "center", width: "100", operator: false },
|
|
|
- { label: "现有车库", prop: "garageCount", align: "center", width: "100", operator: false },
|
|
|
- { label: "剩余车库", prop: "garageReminderCount", align: "center", width: "100", operator: false },
|
|
|
- { label: "创建人", prop: "creatorName", align: "center", width: "120", operator: false },
|
|
|
- { label: "创建时间", prop: "createTime", align: "center", width: "160", operator: false },
|
|
|
- {
|
|
|
- label: "操作",
|
|
|
- align: "center",
|
|
|
- width: "160",
|
|
|
- render: "buttons",
|
|
|
- buttons: defaultOptButtons(),
|
|
|
- operator: false
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- defaultItems: {}
|
|
|
- },
|
|
|
- {
|
|
|
- // 获得编辑数据后
|
|
|
- requestEdit: () => {
|
|
|
- if (baTable.form.items && !baTable.form.items.icon) baTable.form.items.icon = "el-icon-Minus";
|
|
|
- }
|
|
|
- }
|
|
|
-);
|
|
|
|
|
|
-provide("baTable", baTable);
|
|
|
+import { auth } from "/@/utils/common";
|
|
|
+import request from "/@/api/request";
|
|
|
+import { building_list, community_list, district_list, parking } from "/@/api/controllerUrls";
|
|
|
+import { onMounted, ref } from "vue";
|
|
|
+import editDialog from "./editDialog.vue"
|
|
|
+import parkingMap from "./parkingMap.vue"
|
|
|
+
|
|
|
|
|
|
onMounted(() => {
|
|
|
- baTable.mount();
|
|
|
- baTable.getIndex();
|
|
|
-});
|
|
|
+ getDistrictList()
|
|
|
+ getData()
|
|
|
+})
|
|
|
+
|
|
|
+let districtId = ref('')
|
|
|
+
|
|
|
+let editDialogRef = ref()
|
|
|
+
|
|
|
+//区县列表
|
|
|
+let districtList = ref([])
|
|
|
+function getDistrictList() {
|
|
|
+ request.index(district_list, {}, "").then((res: any) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ districtList.value = res.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+let communityId = ref('')
|
|
|
+
|
|
|
+//小区列表
|
|
|
+let communityList = ref([]);
|
|
|
+
|
|
|
+//选择区县,获取小区列表
|
|
|
+function selectDstrict(event: any) {
|
|
|
+ request.index(community_list, {
|
|
|
+ districtIds: event
|
|
|
+ }, "").then((res: any) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ communityList.value = res.data;
|
|
|
+ communityId.value = ''
|
|
|
+ buildingId.value = ''
|
|
|
+ getData()
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+let buildingId = ref('')
|
|
|
+//楼号列表
|
|
|
+let buildingList = ref([]);
|
|
|
+
|
|
|
+//选择小区,获取楼号列表
|
|
|
+function selectCommunity(event: any) {
|
|
|
+ request.index(building_list, {
|
|
|
+ communityIds: event
|
|
|
+ }, "").then((res: any) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ buildingList.value = res.data;
|
|
|
+ buildingId.value = ''
|
|
|
+ getData()
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+let parkingData = ref([])
|
|
|
+
|
|
|
+function selectBuilding(event: any) {
|
|
|
+ getData()
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+function getData() {
|
|
|
+ request.index(parking, {
|
|
|
+ districtId: districtId.value,
|
|
|
+ communityId: communityId.value,
|
|
|
+ buildingId: buildingId.value
|
|
|
+ }).then((res: any) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ parkingData.value = res.data.list;
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function openDialog(type: string, data: any = {}) {
|
|
|
+ editDialogRef.value.open(type, data, districtId, communityId, buildingId)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+function deleteRow(row: any) {
|
|
|
+ request.delete(parking, {
|
|
|
+ id: row.id
|
|
|
+ }).then((res: any) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ getData()
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
|
|
|
-<style scoped lang="scss"></style>
|
|
|
+<style scoped lang="scss">
|
|
|
+.table-operate {
|
|
|
+ padding: 4px 5px;
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.table-operate .icon {
|
|
|
+ font-size: 14px !important;
|
|
|
+ color: #ffffff !important;
|
|
|
+}
|
|
|
+</style>
|