月付页面细节

819527061@qq.com

2025-01-07 1fdb81a91f5f4092e927d2d9a7cc9ff4d231fca4

 src/components/page/outPark/index.vue

@@ -1,226 +1,180 @@
<template>
    <section>
        <el-card class="box-card toolCard">
            <div slot="header" class="clearfix">
                <!--显示导航-->
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>
                        <a href="javascript:void(0);">系统管理</a>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <!--<div class="text item">-->
            <!--工具条-->
            <!--<section class="toolbar">-->
  <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-input v-model="searchForm.carNo" clearable></el-input>
        </el-form-item>
        <el-form-item label="支付码">
          <el-input v-model="searchForm.payCode" clearable></el-input>
        </el-form-item>
        <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 label="选择出场时间">
          <div class="date-box">
            <el-date-picker type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                            v-model="searchForm.date" placeholder="">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="getDataList" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>

            <!--</section>-->
            <el-form :inline="true" :model="searchForm">
                <el-form-item label="名称">
                    <el-input v-model="searchForm.name" placeholder="名称"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="searchForm.phone" placeholder="手机号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="onSearch" icon="el-icon-search">查询</el-button>
                    <el-button type="primary" size="small" @click="onAdd" icon="el-icon-plus">增加</el-button>
                    <el-button type="primary" size="small" @click="onInitPassword" icon="el-icon-refresh">初始化密码</el-button>
                    <el-button type="primary" size="small" @click="onSetUserImage" icon="el-icon-picture-outline">设置头像</el-button>
                    <el-button type="primary" size="small" @click="onChangeDept" icon="el-icon-picture-outline">调换部门</el-button>
                </el-form-item>
            </el-form>

            <!--</div>-->
        </el-card>

        <!--列表数据-->
        <el-table :data="pageData.rows" v-loading="pageData.isLoading" :element-loading-text="pageData.loadingText"
                  border
                  :height="pageConfig.maxHeight"
                  stripe  tooltip-effect="dark" style="width:100%; height:100%" @selection-change="onSelectionChange" @row-click="clickRow"
                  ref="mulTable">
            <!--<el-table-column-->
            <!--type="selection"-->
            <!--width="50">
    </el-table-column>-->
            <el-table-column prop="loginName" label="登录名">
      <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 label="出场图" width="200" header-align="center" align="center">
            <template slot-scope="scope">
              <!-- trigger(触发方式)、placement(出现位置) -->
              <el-popover trigger="hover" placement="right" v-if="scope.row.imgPath != null">
                <img :src="scope.row.imgPath"  style="height: 800px;width: 800px"/>
                <img slot="reference" :src="scope.row.imgPath" :alt="scope.row.imgPath" style="height: 50px;width: 150px">
              </el-popover>
            </template>
          </el-table-column>
            <el-table-column
                    prop="carNo"
                    header-align="center"
                    align="center"
                    label="车牌号">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            <el-table-column
                    prop="enterTime"
                    header-align="center"
                    align="center"
                    label="入场时间">
            </el-table-column>
            <el-table-column prop="sexStr" label="性别名">
          <el-table-column
            prop="createTime"
            header-align="center"
            align="center"
            label="出场时间">
          </el-table-column>
          <el-table-column
            prop="timeStr"
            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="age" label="年龄">
            <el-table-column
                    prop="payCode"
                    header-align="center"
                    align="center"
                    label="支付码">
            </el-table-column>
            <el-table-column prop="deptName" label="所在部门">
            <el-table-column
                    prop="price"
                    width="100px"
                    header-align="center"
                    align="center"
                    label="停车金额(元)">
            </el-table-column>
            <el-table-column prop="post" label="职位">
            <el-table-column
                    prop="status"
                    width="120px"
                    header-align="center"
                    align="center"
                    label="缴费状态">
              <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="phone" label="手机号">
            </el-table-column>
            <el-table-column prop="roleNames" label="角色">
            </el-table-column>
            <el-table-column prop="status" label="状态">
            </el-table-column>
            <el-table-column prop="lastLoginTime" label="最近登录时间">
            </el-table-column>

            <el-table-column label="操作" fixed="right" width="250">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="onEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="onStop(scope.$index, scope.row)">停用
                    </el-button>
                    <el-button
                            size="mini"
                            @click="onStart(scope.$index, scope.row)">启用
                    </el-button>
                </template>
            <el-table-column
                    prop="status3"
                    width="120px"
                    header-align="center"
                    align="center"
                    label="违章状态">
              <template slot-scope="scope">
                <p v-if="scope.row.status3==0">未违章</p>
                <p v-if="scope.row.status3==1" style="color: red">有违章</p>
              </template>
            </el-table-column>
        </el-table>
        <!--分页信息-->
        <el-pagination
                background
                @size-change="onPageSizeChange"
                @current-change="onCurrentPageChange"
                :current-page="pageData.currentPage"
                :page-sizes="[10, 20, 30, 40, 50, 100, 200]"
                :page-size="pageData.pageSize"
                layout="total, sizes, jumper, prev, pager, next"
                :total="pageData.total">
        </el-pagination>
    </section>
        <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>
  </div>
</template>

<script>
    // 导入新增组件
    import addDialog from './AddDialog'
    export default {
        name: "UserIndex",
        data: function () {
            return {
                pageConfig: {
                    pageDataUrl: this.$systemconfig.basePath + '/security/user/list',
                    stopUrl: this.$systemconfig.basePath + '/security/user/stop',
                    startUrl: this.$systemconfig.basePath + '/security/user/start',
                    initPasswordUrl:this.$systemconfig.basePath+'/security/user/restoreInitialPassword',
                },
                // 查询数据
                searchForm: {
                    name: ''
                },
                // 页面数据
                pageData: this.$byutil.defaultPageData()
            }
  export default {
    data () {
      return {
        tableHeight:500,
        dataForm: {
          key: ''
        },
        // 引入组件
        components: {
            addDialog: addDialog
        table1:[],
        pageData: this.$byutil.defaultPageData(),
        searchForm: {
          current: this.pageIndex,
          size: this.pageSize,
          carNo:'',
          parkId:'',
          payCode:'',
          date: new Date(),
        },
        // 执行初始化数据
        mounted() {
            this.$byutil.initTableMaxHeight(this);
            this.loadData();
        },
        // 方法
        methods: {
            //加载数据
            loadData() {
                this.$byutil.loadPageData(this, this.pageConfig.pageDataUrl, this.searchForm);
            },
            // 点击查询按钮
            onSearch() {
                this.pageData = this.$byutil.defaultPageData();
                this.loadData();
            },
            // 点击新增按钮
            onAdd() {
                this.$refs.addDialog.showDialog(true);
            },
            // 点击编辑按钮
            onEdit(index, row) {
                this.$refs.addDialog.showDialog(true);
                //初始化旧数据
                this.$refs.addDialog.initData(row);
            },
            // 点击停用
            onStop(index, row) {
                if(row.status == "删除"){
                    alert("已经停用，不能再次停用");
                    return;
                }
                this.$byutil.stopData(this, this.pageConfig.stopUrl, row);
            },
            // 点击启用
            onStart(index, row) {
                if(row.status == "正常"){
                    alert("正常状态，不能再次启用");
                    return;
                }
                this.$byutil.startData(this, this.pageConfig.startUrl, row);
            },
            // 多选时
            onSelectionChange(val) {
                // this.pageData.multipleSelection = val
            },
            // 切换每页显示条数
            onPageSizeChange(val) {
                this.pageData.pageSize = val;
                this.loadData();
            },
            // 跳转页
            onCurrentPageChange(val) {
                this.pageData.page = val;
                this.loadData();
            },
            //单选
            clickRow(val){
                this.pageData.signSelection = val

            },
            // 设置头像
            onSetUserImage (){
                let row = this.pageData.signSelection;
                if(!row){
                    this.$alert('请选择用户', {'title': '提示','type': 'warning','center': true,'showClose': false});
                    return;
                }
                this.$refs.setUserImageDialog.showDialog(true);
                this.$refs.setUserImageDialog.initData(row);
            },

            // 调换部门
            onChangeDept (){
                let row = this.pageData.signSelection;
                if(!row){
                    this.$alert('请选择用户', {'title': '提示','type': 'warning','center': true,'showClose': false});
                    return;
                }
                this.$refs.changeDeptDialog.showDialog(true);
                this.$refs.changeDeptDialog.initData(row);
            },

            //初始化密码
            onInitPassword(){
                let row = this.pageData.signSelection;
                if(!row){
                    this.$alert('请选择用户', {'title': '提示','type': 'warning','center': true,'showClose': false});
                    return;
                }
                this.$byutil.postData(this,this.pageConfig.initPasswordUrl,row,res=>{
                    this.$alert(row.name+'初始化密码成功', {'title': '提示','type': 'success','center': true,'showClose': false});
                })
            }
        }
        dataList: [],
        pageIndex: 1,
        pageSize: 100,
        totalPage: 0,
        dataListLoading: false,
        addOrUpdateVisible: false
      }
    },
    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/outpark/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();
      },
    }
  }
</script>

<style scoped>

</style>