dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCenterUnitPersonnelInformation.vue

<template>
    <div style="width: 100%;background: #fff;min-height: 700px;color: #666;" class="userCenterMyProject">
        <div style="height: 50px;line-height: 50px;">
            <el-button type="primary" style="float: right;margin-right: 90px;margin-top: 10px;" @click="toView('addPersonnel','')">{{$t('common.addPersonnel')}}</el-button>
        </div>
        <div style="width: 880px;padding:20px 0 0 0;background: #f2f2f2;margin-left: 30px;height: 125px;margin-top: 5px;">
            <el-form :inline="true" :model="params" class="demo-form-inline" style="padding:0 40px">
                <el-row>
                    <el-col :span="10">
                        <el-form-item :label="$t('common.name')">
                            <el-input v-model="params.name" :placeholder="$t('common.namePlaceholder')"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item :label="$t('common.MobilePhone')">
                            <el-input v-model="params.preferredMobile" :placeholder="$t('common.EnterMobile')"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item :label="$t('common.emailInfo')">
                            <el-input v-model="params.email" :placeholder="$t('common.EnterEmail')"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="2">
                        <el-button @click="toInitData" type="primary" style="width:70px">{{$t('common.query')}}</el-button>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="info" style="width:70px">{{$t('common.reset')}}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div style="margin-left: 30px;">
            <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%" >
                <el-table-column fixed prop="name" :label="$t('common.name')" width="150" > </el-table-column>
                <el-table-column prop="unitName" :label="$t('common.NameOfEnterprise')" width="150"> </el-table-column>
                <el-table-column prop="preferredMobile" :label="$t('common.phoneInfo')" width="150"> </el-table-column>
                <el-table-column prop="email" :label="$t('common.emailInfo')" width="150"></el-table-column>
                <el-table-column prop="status" :label="$t('common.State')" width="150"> </el-table-column>
                <el-table-column prop="createDate" :label="$t('common.Time')" width="150"> </el-table-column>
                <el-table-column fixed="right" prop="address5" :label="$t('common.Option')" width="210">
                    <template slot-scope="scope">
                        <el-button
                                @click.native.prevent="change(scope.$index, tableData)"
                                type="text"
                                size="small">
                            {{$t('common.editor')}}
                        </el-button>
                       <!-- <el-button
                                @click.native.prevent="detail(scope.$index, tableData)"
                                type="text"
                                size="small">
                            {{$t('查看')}}
                        </el-button>-->
                        <el-button
                                @click.native.prevent="deleteRow(scope.$index, tableData)"
                                type="text"
                                size="small">
                            {{$t('common.delete')}}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="width: 100%;text-align: center;">
            <el-pagination
                    style="margin-top: 50px;height: 80px;"
                    background
                    layout="prev, pager, next"
                    :total= num  @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import Base from "@/views/base/Base";
    import { formatDate } from "@/utils/formatUtils";
    import { getUnitPersonnelInformation ,del} from "@/api/userCenter/unitPersonnel";

    export default {
        name: 'userCenterUnitPersonnelInformation',
        extends: Base,
        data () {
            return {
                num: 0,
                params: {
                    name: "",
                    preferredMobile:"",
                    email:"",
                    baseEntityId:"",
                    pageNo: 1,
                    pageSize: 10
                },
                tableData: [],
                status:[],
            }
        },
        mounted() {
            this.toInitData();
        },
        methods:{
            toInitData: function() {
                var users=localStorage.getItem('user');
                var user = JSON.parse(users);
                this.params.baseEntityId = user.umsUser.unitEntityId;
                getUnitPersonnelInformation(this.params).then((result) => {
                    var data = result.data;
                    if (data.unitPersonnelInformations) {
                        this.num = parseInt(data.totalCount);
                        this.tableData = data.unitPersonnelInformations;
                        this.tableData.forEach((i) => {
                            i.createDate = i.createDate
                                ? formatDate(i.createDate, "YYYY-MM-DD")
                                : "";
                        })
                    }else {
                        this.tableData = [];
                        this.num = ""
                    }
                }) .catch(error => {
                    // 此处你的业务代码
                    this.$message({
                        message: error.msg,
                        type: 'error'
                    });
                    this.resetToken();
                });
            },
            toView(router,json){
                this.$router.push({name:router,params:{key:json}})
            },
            // 查看
            detail(index, rows) {

            },
            // 编辑
            change(index, rows) {
                console.log(index, rows[index].id)
                this.toView('addPersonnel',rows[index].id)
            },
            // 移除
            deleteRow(index, rows) {
                this.$confirm(this.$t('common.Thisoperationwillpermanently'), this.$t('common.Tips'), {
                    confirmButtonText: this.$t('common.OK'),
                    cancelButtonText: this.$t('common.cancel'),
                    type: 'warning'
                }).then(() => {
                    del(rows[index].id).then(res=>{
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        });
                        this.toInitData();
                    }).catch((error) => {
                        this.$message.error(res.msg);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: this.$i18n.locale === 'zh' ? '已取消删除' : 'Deletion canceled',
                    });
                });
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.param.pageNo=val;
                this.getReply()
            }
        }
    }
</script>
<style scoped>

    .el-input {
        width: 200px ;
    }
    .el-form-item__content,.el-select {
        width: 200px !important;
    }
    .el-table thead {
        background: #eee;
    }
    .userCenterMyProject >>> .el-pagination .el-pager li,
    .userCenterMyProject >>> .el-pagination .btn-next,
    .userCenterMyProject >>> .el-pagination .btn-prev{
        width: 35px;
        height: 35px;
        line-height: 35px;
    }
    .userCenterMyProject >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
        background: #0050d8;
    }

</style>