From e4aa14195c028ae09eaeb6f9408957cb70a64876 Mon Sep 17 00:00:00 2001
From: 1012414140@qq.com <1012414140@qq.com>
Date: 星期五, 26 十二月 2025 17:21:24 +0800
Subject: [PATCH] feat: 智慧停车场添加loading
---
src/components/page/repairAndMaintenance/index.vue | 214 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 214 insertions(+), 0 deletions(-)
diff --git a/src/components/page/repairAndMaintenance/index.vue b/src/components/page/repairAndMaintenance/index.vue
new file mode 100644
index 0000000..b777b17
--- /dev/null
+++ b/src/components/page/repairAndMaintenance/index.vue
@@ -0,0 +1,214 @@
+<template>
+ <div class="mod-config" style="padding: 10px 10px 0px 10px;">
+ <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+ <el-form-item label="鍋滆溅鍦�">
+ <el-select v-model="searchForm.parkId" clearable>
+ <el-option v-for="item in table1" :key="item.id" :label="item.name" :value="item.id"></el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" size="small" @click="getDataList" icon="el-icon-search">鏌ヨ</el-button>
+ <el-button type="primary" size="small" @click="onAdd" icon="el-icon-plus">鏂板</el-button>
+ </el-form-item>
+ </el-form>
+
+ <div class="avue-crud">
+ <el-table :height="tableHeight" :data="pageData.rows" border v-loading="pageData.isLoading">
+ <el-table-column type="index" width="50" label="搴忓彿" align="center">
+ </el-table-column>
+ <el-table-column prop="repairUser" header-align="center" align="center" label="缁翠繚浜�" width="150px">
+ </el-table-column>
+ <el-table-column prop="repairTime" header-align="center" align="center" label="缁翠慨鏃堕棿" >
+ </el-table-column>
+ <el-table-column prop="parkName" header-align="center" align="center" label="鍋滆溅鍦�">
+ </el-table-column>
+ <el-table-column prop="status" header-align="center" align="center" label="鐘舵��" width="120px">
+ <template slot-scope="scope">
+ <p v-if="scope.row.status == 0">缁翠慨</p>
+ <p v-if="scope.row.status == 1">淇濆吇</p>
+ <p v-if="scope.row.status == 2">鏇存崲</p>
+ </template>
+ </el-table-column>
+ <el-table-column prop="barrierName" header-align="center" align="center" label="閬撻椄">
+ </el-table-column>
+ <el-table-column prop="repairContent" header-align="center" align="center" label="缁翠繚璇︽儏">
+ </el-table-column>
+ <el-table-column label="鎿嶄綔" fixed="right" width="150" align="center">
+ <template slot-scope="scope">
+ <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">鍒犻櫎</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <el-pagination background @size-change="onPageSizeChange" @current-change="onCurrentPageChange"
+ :current-page="pageData.currentPage" :page-size="pageData.pageSize" :total="pageData.total"
+ style="float: right"></el-pagination>
+ </div>
+
+ <el-dialog title="缂栬緫" :visible.sync="flag" width="40%">
+ <el-form :model="formData" ref="formData" label-width="100px">
+ <el-form-item label="缁翠繚浜�" prop="repairUser" :rules="[{ required: true, message: '璇疯緭鍏ョ淮淇濅汉', trigger: 'blur' }]">
+ <el-input style="width: 200px" v-model="formData.repairUser" placeholder="璇疯緭鍏ョ淮淇濅汉"></el-input>
+ </el-form-item>
+
+ <el-form-item label="鍋滆溅鍦�" prop="parkId" :rules="[{ required: true, message: '璇烽�夋嫨鍋滆溅鍦�', trigger: 'blur' }]">
+ <el-select v-model="formData.parkId" clearable @change="handlePark">
+ <el-option v-for="item in table1" :key="item.id" :label="item.name" :value="item.id"></el-option>
+ </el-select>
+ </el-form-item>
+
+ <el-form-item label="閬撻椄" prop="barrierId" :rules="[{ required: true, message: '璇烽�夋嫨閬撻椄', trigger: 'blur' }]">
+ <el-select v-model="formData.barrierId" clearable>
+ <el-option v-for="item in barryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+ </el-select>
+ </el-form-item>
+
+ <el-form-item label="缁翠繚鏃堕棿" prop="repairTime">
+ <el-date-picker v-model="formData.repairTime" type="datetime" format="yyyy-MM-dd HH:mm:ss"
+ value-format="yyyy-MM-dd HH:mm:ss" placeholder="閫夋嫨鏃ユ湡鏃堕棿">
+ </el-date-picker>
+ </el-form-item>
+
+ <el-form-item label="缁翠慨寤鸿" prop="status">
+ <el-radio-group v-model="formData.status">
+ <el-radio :label="0">缁翠慨</el-radio>
+ <el-radio :label="1">淇濆吇</el-radio>
+ <el-radio :label="2">鏇存崲</el-radio>
+ </el-radio-group>
+ </el-form-item>
+
+ <el-form-item label="缁翠繚璇︽儏" prop="repairContent"
+ :rules="[{ required: true, message: '璇疯緭鍏ョ淮淇濊鎯�', trigger: 'blur' }]">
+ <el-input type="textarea"
+ :rows="3"
+ v-model="formData.repairContent"
+ placeholder="璇疯緭鍏ョ淮淇濊鎯�">
+ </el-input>
+ </el-form-item>
+ </el-form>
+
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="flag = false">鍙� 娑�</el-button>
+ <el-button type="primary" @click="onSave">纭� 瀹�</el-button>
+ </div>
+ </el-dialog>
+
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ tableHeight: 500,
+ dataForm: {
+ key: ''
+ },
+ table1: [],
+ pageData: this.$byutil.defaultPageData(),
+ searchForm: {
+ current: this.pageIndex,
+ size: this.pageSize,
+ carNo: '',
+ parkId: '',
+ date: new Date,
+ },
+ dataList: [],
+ pageIndex: 1,
+ pageSize: 100,
+ totalPage: 0,
+ dataListLoading: false,
+ addOrUpdateVisible: false,
+
+ // 鏂板
+ flag: false,
+ formData: {},
+ barryList: [], // 閬撻椄
+ }
+ },
+ components: {
+ },
+ created() {
+ this.getAllPark()
+ this.getDataList()
+ this.tableHeight = window.innerHeight - 260
+ },
+ computed: {
+ },
+ methods: {
+ // 鑾峰彇鏁版嵁鍒楄〃
+ getDataList() {
+ this.dataListLoading = true
+ this.searchForm.current = this.pageIndex
+ this.searchForm.size = this.pageSize
+ this.$byutil.loadPageData(this, this.$systemconfig.basePath + '/ffzf/repair/findPage', this.searchForm);
+ this.dataListLoading = false
+ },
+ getAllPark() {
+ this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/park/findAll', this.formData, res => {
+ this.table1 = res.data;
+ })
+ },
+ onPageSizeChange(val) {
+ this.pageData.pageSize = val;
+ this.getDataList();
+ },
+ onCurrentPageChange(val) {
+ this.pageData.page = val;
+ this.getDataList();
+ },
+
+ // 鏍规嵁鍋滆溅鍦鸿幏鍙栭亾闂�
+ getBarryList() {
+ this.$byutil.loadPageData(this, this.$systemconfig.basePath + '/ffzf/barrier/findPage', { parkId: this.formData.parkId });
+ },
+
+ // 閫夋嫨鍋滆溅鍦�
+ handlePark(e) {
+ this.$byutil.postData4(this, this.$systemconfig.basePath + '/ffzf/barrier/findPage', { parkId: this.formData.parkId, size: 100 }, res => {
+ this.barryList = res.data.records
+ });
+ },
+
+ // 鏂板寮规
+ onAdd() {
+ this.flag = true;
+ this.$refs['formData'].resetFields();
+ this.formData = {
+ name: '',
+ loginName: '',
+ phone: '',
+ type: '',
+ }
+ },
+
+ // 鏂板淇濆瓨
+ onSave() {
+ this.$refs['formData'].validate((valid) => {
+ if (valid) {
+ this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/repair/save', this.formData, res => {
+ this.$refs['formData'].resetFields();
+ this.flag = false;
+ this.$message({ message: '淇濆瓨鎴愬姛', type: 'success' });
+ this.getDataList()
+ })
+ } else {
+ return false;
+ }
+ });
+ },
+
+ handleDelete(index, row) {
+ this.$byutil.deleteData(this, this.$systemconfig.basePath + "/ffzf/repair/delete", { id: row.id }, res => {
+ this.$message({ message: '鍒犻櫎鎴愬姛', type: 'success' });
+ this.getDataList();
+ })
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.fenye-box {
+ width: calc(70% - 20px);
+}
+</style>
--
Gitblit v1.9.1