修改前端页面

kongdeqiang

2023-06-09 105abcb08f5d1c1114ce0e093d1a4912fbbfd609

 src/components/page/ticket/index.vue

@@ -1,226 +1,269 @@
<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-select v-model="searchForm.type" placeholder="请选择" clearable>
            <el-option label="现场处罚" :value="0"></el-option>
            <el-option label="上级任务" :value="1"></el-option>
            <el-option label="违章拖车" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="缴费状态">
          <el-select v-model="searchForm.payStatus" placeholder="请选择" clearable>
            <el-option label="待缴费" :value="0"></el-option>
            <el-option label="已缴费" :value="1"></el-option>
            <el-option label="缴费失败" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="违章类型">
          <el-select v-model="searchForm.violationTypeId" 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-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
            prop="carNo"
            width="100px"
            header-align="center"
            align="center"
            label="车牌号">
          </el-table-column>
          <el-table-column
            prop="type"
            width="100px"
            header-align="center"
            align="center"
            label="事件类型">
            <template slot-scope="scope">
              <p v-if="scope.row.type==0" >现场处罚</p>
              <p v-if="scope.row.type==1">上级任务</p>
              <p v-if="scope.row.type==2">违章拖车</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="carType"
            width="90px"
            header-align="center"
            align="center"
            label="车辆类型">
          </el-table-column>
          <el-table-column
            prop="color"
            width="90px"
            header-align="center"
            align="center"
            label="车辆颜色">
          </el-table-column>
            <el-table-column
                    prop="address"
                    header-align="center"
                    align="center"
                    label="违法地点">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>
            <el-table-column prop="sexStr" label="性别名">
            </el-table-column>
            <el-table-column prop="age" label="年龄">
            </el-table-column>
            <el-table-column prop="deptName" label="所在部门">
            </el-table-column>
            <el-table-column prop="post" label="职位">
            </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
                    prop="money"
                    width="100px"
                    header-align="center"
                    align="center"
                    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="payStatus"
                    width="100px"
                    header-align="center"
                    align="center"
                    label="缴费状态">
              <template slot-scope="scope">
                <p v-if="scope.row.payStatus==0" style="color: red">待缴费</p>
                <p v-if="scope.row.payStatus==1">已缴费</p>
                <p v-if="scope.row.payStatus==2" style="color: blue">缴费失败</p>
              </template>
            </el-table-column>
            <el-table-column
                    prop="userName"
                    width="100px"
                    header-align="center"
                    align="center"
                    label="处理人">
            </el-table-column>
            <el-table-column
                    prop="violationTypeName"
                    header-align="center"
                    align="center"
                    width="100px"
                    label="违章类型">
            </el-table-column>
          <el-table-column
            prop="remark"
            header-align="center"
            align="center"
            label="备注">
          </el-table-column>
          <el-table-column
              width="300px"
                  fixed="right"
                  header-align="center"
                  align="center"
                  label="操作">
            <template slot-scope="scope">
              <el-button  type="text" size="small" icon="el-icon-document" @click="addOrUpdateHandle(scope.row.id)">处决书</el-button>
              <el-button  type="text" size="small" icon="el-icon-document-checked" @click="addOrUpdateHandle2(scope.row)">送达回证</el-button>
              <el-button  type="text" size="small" icon="el-icon-view" @click="pictureHandle(scope.row)">图像证据</el-button>
              <el-button  v-if="items==2" type="text" size="small" icon="el-icon-delete" @click="onDelete(scope.row.id)">撤销</el-button>
<!--              <el-button  type="text" size="small" icon="el-pay6zhifu" @click="jiaofeiHandle(scope.row.id)">现场缴费</el-button>-->
            </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>

      <!-- 弹窗, 新增 / 修改 -->
      <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></table-form>
      <table-form2 v-if="addOrUpdateVisible2" ref="addOrUpdate2" @refreshDataList="getDataList"></table-form2>
      <!--图像证据-->
      <pictureForm v-if="pictureFormVisiable" ref="pictureForm"></pictureForm>
  </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()
            }
  import TableForm from './ticket-form'
  import TableForm2 from './ticket-form2'
  import pictureForm from './picture-form'
  import {mapState} from 'vuex'
  export default {
    data () {
      return {
        tableHeight:650,
        dataForm: {
          key: ''
        },
        // 引入组件
        components: {
            addDialog: addDialog
        table1:[],
        pageData: this.$byutil.defaultPageData(),
        searchForm: {
          current:this.pageIndex,
          size:this.pageSize,
          carNo:'',
          type:null,
          violationTypeId:null,
          payStatus:null,
        },
        // 执行初始化数据
        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
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        addOrUpdateVisible: false,
        addOrUpdateVisible2: false,
        pictureFormVisiable:false, //图像证据弹框
      }
    },
    components: {
      TableForm,
      TableForm2,
      pictureForm
    },
    created () {
      this.getDataList()
      this.findAllViolation()
      this.tableHeight = window.innerHeight - 255
    },
    computed: {
      ...mapState({
        items:'roles'
      }),
    },
    methods: {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.searchForm.current=this.pageIndex
        this.searchForm.size=this.pageSize
        this.$byutil.loadPageData(this, this.$systemconfig.basePath+'/ffzf/ticket/findPage', this.searchForm);
        this.dataListLoading = false
      },
      findAllViolation(){
        this.$byutil.postData(this, this.$systemconfig.basePath+'/ffzf/violationtype/findAll', this.formData, res => {
          this.table1 = res.data;
        })
      },
      onPageSizeChange(val) {
        this.pageData.pageSize = val;
        this.getDataList();
      },
      onCurrentPageChange(val) {
        this.pageData.page = val;
        this.getDataList();
      },
      pictureHandle(data) {
         console.log(data,'data=====')
          let imgArry = []
          if(data.img) {
              imgArry = data.img.split(',')
              console.log(imgArry,'imgArry====')
          }
          this.pictureFormVisiable = true
          this.$nextTick(() => {
              this.$refs.pictureForm.init(imgArry)
          })

            },
            // 设置头像
            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});
                })
            }
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 新增 / 修改
      addOrUpdateHandle2 (row) {
        if(row.personName != null){
          this.addOrUpdateVisible2 = true
          this.$nextTick(() => {
            this.$refs.addOrUpdate2.init(row.id)
          })
        }else {
          this.$message.error("处决书还未填写！")
        }

      },
      //现场缴费
      jiaofeiHandle(id){
        this.$byutil.postData(this, this.$systemconfig.basePath+'/ffzf/ticket/jiaofei', {id:id}, res => {
            if(res.code===0){
              this.$message.success(res.msg)
            }else {
              this.$message.error(res.msg)
            }
        })
      },
      //删除
      onDelete(id) {
        this.$byutil.deleteData(this,this.$systemconfig.basePath+'/ffzf/ticket/delete',{id:id}, res => {
          this.$message({message: '撤销成功', type: 'success'});
          this.getDataList();
        })
      },
    }
  }
</script>

<style scoped>

</style>