DESKTOP-812G6RA\PROW_006
9 days ago ee0581277156325f60fe3a1edfd8ac1645a77ec6
车队个人中心
2 files added
6 files modified
16594 ■■■■■ changed files
package-lock.json 16236 ●●●● patch | view | raw | blame | history
src/components/PersonalCenter/PcenterTop.vue 301 ●●●●● patch | view | raw | blame | history
src/components/mainpage/PersonalCenter.vue 17 ●●●●● patch | view | raw | blame | history
src/router/index.js 8 ●●●● patch | view | raw | blame | history
src/store/index.js 10 ●●●●● patch | view | raw | blame | history
src/views/Index.vue 1 ●●●● patch | view | raw | blame | history
src/views/login/Login.vue 17 ●●●● patch | view | raw | blame | history
vue.config.js 4 ●●●● patch | view | raw | blame | history
package-lock.json
Diff too large
src/components/PersonalCenter/PcenterTop.vue
New file
@@ -0,0 +1,301 @@
<template>
    <div class="common-main">
      <div class="common">
        <div class="common-top">
            <div class="common-top-title">
                <i class="el-icon-rank"></i>
                <span>个人中心</span>
            </div>
            <div class="common-top-right">
                <i class="el-icon-arrow-down"></i>
                <i class="el-icon-refresh"></i>
            </div>
        </div>
        <el-row :gutter="20">
            <!-- 公司信息 -->
            <el-col :span="10">
                <div class="grid-content bg-purple">
                    <el-card class="box-card" shadow="hover">
                        <div slot="header" class="clearfix">
                            <!-- 公司名字 -->
                            <span>
                                {{UserCustomerdata.CusFullName}}
                                <el-button type="text" @click="dialogVisible = true"><i class="el-icon-edit"></i></el-button>
                                <el-dialog
                                    title="修改信息"
                                    :visible.sync="dialogVisible"
                                    width="50%"
                                >
                                    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                                    <el-form-item label="公司全称" prop="CusFullName">
                                        <el-input v-model="form.CusFullName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="公司主营" prop="CusMainBusiness">
                                        <el-input v-model="form.CusMainBusiness"></el-input>
                                    </el-form-item>
                                    <el-form-item label="公司地址" prop="CusAddress">
                                        <el-input v-model="form.CusAddress"></el-input>
                                    </el-form-item>
                                    <el-form-item label="客户联系人" prop="CusContacts">
                                        <el-input v-model="form.CusContacts"></el-input>
                                    </el-form-item>
                                    <el-form-item label="客户联系人电话" prop="CusContactsPhone">
                                        <el-input v-model="form.CusContactsPhone"></el-input>
                                    </el-form-item>
                                    </el-form>
                                    <span slot="footer" class="dialog-footer">
                                        <el-button @click="dialogVisible = false">取 消</el-button>
                                        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
                                    </span>
                                    </el-dialog>
                            </span>
                            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                        </div>
                        <div class="CusFullNametit">
                            公司简介
                        </div>
                            <div class="CusFullNametxt">
                            <!-- 公司主营 -->
                            {{UserCustomerdata.CusMainBusiness}}
                            </div>
                        <div class="Companycontact">
                            <div class="CusAddress">
                                <!-- 公司地址 -->
                                <i class="el-icon-location"></i>
                                {{UserCustomerdata.CusAddress}}
                            </div>
                            <div class="CusContacts">
                                <!-- 客户联系人 -->
                                <i class="el-icon-s-custom"></i>
                                {{UserCustomerdata.CusContacts}}
                            </div>
                            <div class="CusContactsPhone">
                                <!-- 客户联系人电话 -->
                                <i class="el-icon-phone"></i>
                                {{UserCustomerdata.CusContactsPhone}}
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-col>
            <!-- 个人资料 -->
            <el-col :span="7">
                <div class="grid-content bg-purple">
                    <el-card class="box-card" shadow="hover">
                        <div slot="header" class="clearfix">
                            <span>基础资料</span>
                            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                        </div>
                        <!-- <div v-for="o in 4" :key="o" class="text item">
                            {{'列表内容 ' + o }}
                        </div> -->
                        驾驶员资料
                        <el-divider></el-divider>
                    </el-card>
                </div>
            </el-col>
            <!-- 个人信息 -->
            <el-col :span="7">
                <div class="grid-content bg-purple">
                    <el-card class="box-card" shadow="hover">
                        <div slot="header" class="clearfix">
                            <span>个人信息</span>
                            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                        </div>
                        <div class="Usermsg">
                            <div >
                            头像
                                <img :src="Userdata.Icon" alt="">
                            </div>
                            <div>
                                {{Userdata.DisplayName}}
                            </div>
                            <div>
                                {{Userdata.Phone}}
                            </div>
                        </div>
                        <el-divider></el-divider>
                    </el-card>
                </div>
            </el-col>
        </el-row>
      </div>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                UserCustomerdata:[],
                Userdata:[],
                dialogVisible: false,
                form: {
                    CusFullName: '',
                    CusMainBusiness: '',
                    CusAddress: '',
                    CusContacts: '',
                    CusContactsPhone: ''
                },
                rules: {
                    CusFullName: [
                        { required: true, message: '请输入公司全称', trigger: 'blur' },
                        { min: 1,  message: '不能为空', trigger: 'blur' }
                    ],
                    CusMainBusiness: [
                        { required: true, message: '请输入公司主营', trigger: 'blur' },
                        { min: 1,  message: '不能为空', trigger: 'blur' }
                    ],
                    CusAddress: [
                       { required: true, message: '请输入公司地址', trigger: 'blur' },
                       { min: 1,  message: '不能为空', trigger: 'blur' }
                    ],
                    CusContacts: [
                        { required: true, message: '请输入公司联系人姓名', trigger: 'blur' },
                        { min: 1,  message: '不能为空', trigger: 'blur' }
                    ],
                    CusContactsPhone: [
                        { required: true, message: '请输入公司联系人联系方式', trigger: 'blur' },
                        { min: 8, max: 13,  message: '输入正确电话位数', trigger: 'blur' }
                    ]
                }
            }
        },
        created () {
          this.QueryUserCustomer()
          this.QueryUser()
        },
        methods: {
            // 获取个人中心
            async QueryUserCustomer(model) {
                await this.$axios
                .post(
                    "/api/PersonalCnter/QueryUserCustomer",
                    this.$qs.stringify(model)
                )
                .then((res) => {
                    this.UserCustomerdata = res.data
                    this.form={...this.form,...res.data}
                })
                .catch((err) => {
                    console.log(err);
                });
            },
            // 获取用户信息
            async QueryUser(model) {
                await this.$axios
                .post(
                    "/api/PersonalCnter/QueryUser",
                    this.$qs.stringify(model)
                )
                .then((res) => {
                    this.Userdata = res.data
                    // console.log(this.Userdata);
                })
                .catch((err) => {
                    console.log(err);
                });
            },
            // 修改客户信息
            async UpdateUserCustomer() {
                await this.$axios
                .post(
                    "/api/PersonalCnter/UpdateUserCustomer",
                    this.$qs.stringify({
                        CusId: this.UserCustomerdata.CusId,
                        CusFullName: this.form.CusFullName,
                        CusMainBusiness: this.form.CusMainBusiness,
                        CusAddress: this.form.CusAddress,
                        CusContacts: this.form.CusContacts,
                        CusContactsPhone:this.form.CusContactsPhone
                    })
                )
                .then((res) => {
                     this.QueryUserCustomer()
                     this.dialogVisible = false
                })
                .catch((err) => {
                    console.log(err);
                });
            },
            submitForm(form) {
                this.$refs[form].validate((valid) => {
                if (valid) {
                    this.UpdateUserCustomer();
                } else {
                    return false;
                }
                });
            },
        },
    }
</script>
<style lang="less" scoped>
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .CusFullNametxt {
      min-height: 100px;
      padding-top: 16px;
      text-indent :25px;
      color: #606266;
  }
  .Companycontact{
      display: flex;
      justify-content: space-around;
  }
  .Usermsg{
      text-align: center;
  }
  .el-icon-edit{
      font-size:20px
  }
</style>
src/components/mainpage/PersonalCenter.vue
New file
@@ -0,0 +1,17 @@
<template>
  <PcenterTop></PcenterTop>
</template>
<script>
import PcenterTop from "@/components/PersonalCenter/PcenterTop.vue"
export default {
    components: {
        PcenterTop
    }
}
</script>
<style>
</style>
src/router/index.js
@@ -42,7 +42,13 @@
        component:()=>import('../components/mainpage/TaskList.vue'),
        meta:{requireAuth: true },
      },
      {
        path:"/PersonalCenter",
        name:"个人中心",
        component:()=>import('../components/mainpage/PersonalCenter.vue'),
        meta:{requireAuth: true },
      },
     
   
    ]
src/store/index.js
@@ -36,6 +36,16 @@
    set_active_index (state, index) {
      this.state.activeIndex = index;
    },
     //判断是否登录
   set_token(state,data){
    state.token =data;
    window.sessionStorage.setItem('token',data);
  },
  //获取用户名
  get_user(state,data){
     state.user=data;
     window.sessionStorage.setItem('user',data);
  }
   
}
src/views/Index.vue
@@ -121,6 +121,7 @@
      nav: [
         { id: "/daytask", icon: "el-icon-setting", title: "当日任务" },
          { id: "/task", icon: "el-icon-setting", title: "任务列表" },
          { id: "/PersonalCenter", icon: "el-icon-setting", title: "个人中心" },
       
        
      ],
src/views/login/Login.vue
@@ -67,8 +67,21 @@
        methods:{
             register(){
                 this.$message({message:"登录成功",type:"success"});
                this.$router.push("/home");
                 this.$axios.post("api/Account/LoginApi",this.$qs.stringify({"userName":this.userName,"password":this.password,"type":0})).then(res=>{
                  if(res.data.IsSuccess){
                    this.$message({message:res.data.Content,type:"success"});
                    this.$emit("acceptlogin",false);
                      // window.sessionStorage.setItem('token',res.data.SystemUserId)
                    this.$store.commit('set_token',res.data.Extra.SessionId);
                    this.$store.commit('get_user',res.data.Extra.DisplayName);
                    this.$router.push("/home");
                  }else{
                    this.$message.error(res.data.Content);
                  }
                }).catch(err=>{
                  console.log(err);
                })
            },
        }
vue.config.js
@@ -1,13 +1,13 @@
module.exports = {
  devServer: {
      open: true, //是否自动弹出浏览器页面
      host: "192.168.0.109",
      host: "192.168.0.167",
      port: '8080',
      https: false,
      hotOnly: false, 
      proxy: {
          '/api': {
              target: 'http://192.168.0.158:49138/', //API服务器的地址
              target: 'http://192.168.0.136:49138/', //API服务器的地址
              changeOrigin: true,
              // pathRewrite: {
              //     '^/api': 'http://192.168.0.157:49138/'