初始化提交

Crunchy

2025-06-14 7e460156de73171f9660ce48f80703e79f8b478d

 src/views/system/user/index.vue

@@ -1,15 +1,414 @@
<template>
  <div class="system-user">
    <SettingTitle left="你的用户配置" right="小图标"></SettingTitle>
    <div class="user-info"></div>
    <SettingTitle v-if="authority" left="你的用户配置" :click-fun="showAdd" right="新增用户" icon="el-icon-plus" />
    <SettingTitle v-else left="你的用户配置" />
    <div class="user-info">
      <div class="info-avatar">
        <el-upload
          :headers="{'X-Token':token}"
          class="avatar-uploader"
          :action="baseUrl+'/user/update'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="avatar" :src="baseUrl+'/img'+avatar" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </div>
      <div class="info-msg">
        <div>{{ msgInfo.name }}</div>
        <div>账号：{{ msgInfo.account }}</div>
      </div>
      <div class="info-logout">
        <el-button type="primary" plain @click="logout">退出登录</el-button>
      </div>
    </div>
    <div class="setting-list">
      <div v-for="(item,index) in serviceArr" :key="index" class="setting-item">
        <div class="item-icon  iconfont" :class="item.icon" />
        <div class="item-msg">{{ item.name }}</div>
        <div class="item-right" :class="item.right" @click="showDialog(item.name)" />
      </div>
    </div>
    <!-- 同时用户列表为0也不展示 -->
    <template v-if="userList.length>1">
      <SettingTitle left="用户列表" />
      <div class="setting-list">
        <div v-for="item in userList" v-if="name !== item.username" :key="item.id" class="setting-item">
          <div class="item-icon">
            <el-avatar :size="40" :src="baseUrl+'/img'+item.avatar" />
          </div>
          <div class="item-msg">{{ item.username }}</div>
          <div class="item-right">
            <el-button v-if="authority" type="text" :style="{color:'red'}" @click="clear(item)">删除</el-button>
          </div>
        </div>
      </div>
    </template>
    <template>
      <SettingTitle left="表格" />
      <div class="setting-list">
        <div class="setting-item">
          <div class="item-icon iconfont icon-biaogeziduan" />
          <div class="item-msg">修改查看表头</div>
          <el-dropdown trigger="click" @command="showTableDialog($event)">
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">

              <el-dropdown-item v-for="(item ,index) in allTab" :key="index" :command="item">{{ item.name }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        <!-- <div class="item-right  el-icon-arrow-down" @click="showDialog('修改表单')"></div> -->
        </div>
      </div>
    </template>
    <SettingTitle left="添加型号" />

    <div class="setting-model">
      <el-row :gutter="20">
        <el-col :span="4">
          <div :style="{display:'flex'}">
            <el-input
              v-model="filterText"
              placeholder="输入关键字进行过滤"
            />
            <!-- <el-button>添加名称</el-button> -->
          </div>
          <el-tree
            ref="tree"
            :style="{marginTop:'20px'}"
            class="filter-tree"
            :data="treeData"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <div :style="{height:'100%', display:'flex',alignItems: 'center'}">
                <div :style="{marginRight: '8px',display:'flex',alignItem: 'center'}">
                  <span>{{ node.label }}</span>
                  <span :style="{marginLeft: '20px',fontSize: '10px'}" class="edit el-icon-edit" @click="changeName(node,data)">修改</span>
                  <span :style="{marginLeft: '20px',fontSize: '10px'}" class="edit el-icon-delete" @click="deleteName(node,data)" />
                </div>
                <!-- 精度不高 导致的问题-->
              </div>
            </span>
          </el-tree>
        </el-col>
        <el-col :span="20">
          <div class="addName">
            <el-row :gutter="20">
              <el-col :span="8">
                <div :style="{display: 'flex'}">
                  <el-input v-model="newName" :style="{marginRight: '8px'}" />
                  <el-button @click="addNewName">添加名称</el-button>
                </div>

              </el-col>
              <el-col :span="14">
                <el-row :gutter="20">
                  <el-col :span="4">

                    <el-select v-model="checkNameId" clearable placeholder="请选择">
                      <el-option
                        v-for="item in nameOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-col>
                  <el-col :span="10">
                    <el-input v-model="newModel" :style="{marginLeft: '8px'}" placeholder="请输入型号名称" />
                  </el-col>
                  <el-col :span="10">
                    <el-input v-model="newProductCode" :style="{marginLeft: '8px'}" placeholder="请输入产品编码" />
                  </el-col>
                </el-row>

              </el-col>
              <el-col :span="2">
                <el-button @click="addNewModel">添加型号</el-button>
              </el-col>
            </el-row>
          </div>
          <el-table
            class="tableData"
            :height="450"
            :max-height="450"
            :row-class-name="onTableRowClassName"
            :row-style="{height:0+'px'}"
            :cell-style="{padding:8+'px',textAlign: 'center'}"
            :header-cell-style="{borderRight:'0px',textAlign: 'center',background:'#52626F',color:'#fff', height:'10px', padding:'0px'}"
            :stripe="true"
            :data="tableData"
            :border="true"
            header-row-class-name="table-header"
          >
            <el-table-column
              type="index"
              label="序号"
            />
            <el-table-column
              prop="productCode"
              label="产品编码"
            />
            <el-table-column
              prop="productModel"
              label="型号名称"
            />
            <el-table-column
              prop="productName"
              label="产品名称"
            />
            <el-table-column
              label="更多操作"
            >
              <template slot-scope="scope">
                <el-button type="text" @click="changeModel(scope.row)">修改</el-button>
                <el-button type="text danger" @click="deleteModel(scope.row)">删除</el-button>
              </template>

            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
    <el-dialog class="changePassword" :visible.sync="passwordFormVisible" @close="handleClose('passwordParams')">
      <div slot="title" class="title">
        <span />
        <span>修改密码</span>
      </div>
      <el-form ref="passwordParams" :model="passwordParams" :rules="passwordRules">
        <el-row>
          <el-col>
            <el-form-item prop="oldPassword">
              <el-input v-model="passwordParams.oldPassword" :validate-event="false" show-password type="password" placeholder="请输入旧密码" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item prop="newPassword">
              <el-input v-model="passwordParams.newPassword" :validate-event="false" show-password type="password" placeholder="请输入新密码" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changePwd">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog class="tableHead" :visible.sync="tableFormVisible" @close="handleClose('userParams')">
      <div slot="title" class="title">
        <span />
        <span>修改表单</span>
      </div>
      <el-form ref="userParams" :model="userParams">
        <el-row>
          <el-col>
            <el-checkbox-group v-model="checkList">
              <el-checkbox v-for="(item, index) in commandList" :key="index" :label="item" :checked="item.show" @change="changeCheck(!item.show,item)">{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changeTable">确 定</el-button>
        <!-- <el-button @click="tableFormVisible = false" >取 消</el-button> -->
      </div>
    </el-dialog>
    <el-dialog class="userInfo" title="个人资料" :visible.sync="infoFormVisible" @close="handleClose('addUserForm')">
      <div slot="title" class="title">
        <span />
        <span>个人资料</span>
      </div>
      <el-form ref="addUserForm" :model="infoParams" :rules="addUserRules">
        <el-row>
          <el-col>
            <el-form-item prop="username">
              <el-input v-model="infoParams.username" placeholder="用户名" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item prop="account">
              <el-input v-model="infoParams.account" placeholder="账号" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col />
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changeInfo">确 定</el-button>
        <!-- <el-button @click="infoFormVisible = false" >取 消</el-button> -->
      </div>
    </el-dialog>
    <el-dialog class="addUser" :visible.sync="addVisible" @close="handleClose('addParams')">
      <div slot="title" class="title">
        <span />
        <span>新增用户</span>
      </div>
      <el-form ref="addParams" label-position="left" label-width="80px" :model="addParams" :rules="addUserRules">

        <el-form-item prop="username" label="用户名：">
          <el-input v-model="addParams.username" placeholder="用户名" autocomplete="off" />
        </el-form-item>

        <el-form-item prop="account" label="账号">
          <el-input v-model="addParams.account" placeholder="账号" autocomplete="off" />
        </el-form-item>

        <el-form-item prop="password" label="密码：">

          <el-input v-model="addParams.password" placeholder="密码" show-password type="password" autocomplete="off" />
        </el-form-item>

        <el-form-item prop="authority" label="身份：">
          <el-select v-model="addParams.authority" placeholder="请选择身份">
            <el-option
              v-for="item in powerOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addNewUser">确 定</el-button>
        <!-- <el-button @click="infoFormVisible = false" >取 消</el-button> -->
      </div>
    </el-dialog>

    <el-dialog width="30%" handle-close-change-name-params- class="changeName" :visible.sync="changeNameVisible">

      <div slot="title" class="title">
        <span />
        <span>修改名称</span>
      </div>
      <el-form>
        <el-form-item ref="changeNameParams" :model="changeNameParams">
          <el-input v-model="changeNameParams.productName" />
        </el-form-item>
        <div :style="{display: 'flex'}">
          <el-button type="primary" :style="{flex:'1'}" @click="ConfirmChange">确定修改</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog handle-close-change-model-params- width="30%" class="changeModel" :visible.sync="changeModelVisible">
      <div slot="title" class="title">
        <span />
        <span>修改型号</span>
      </div>
      <el-form>
        <el-form-item ref="changeModelParams" :model="changeModelParams">
          <el-input v-model="changeModelParams.productModel" placeholder="请输入新型号" />
        </el-form-item>
        <el-form-item :model="changeModelParams">
          <el-input v-model="changeModelParams.productCode" placeholder="请输入编码" />
        </el-form-item>
        <div :style="{display: 'flex'}">
          <el-button type="primary" :style="{flex:'1'}" @click="confirmChangeModel">确定修改</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getInfo, addUser, getUserList, updateUserPwd, delUser, updateUserProfile } from '@/api/user'
import { selectAllName, addName, updateName, delName } from '@/api/productName'
import { selectAllModel, addModel, updateModel, delModel } from '@/api/productModel'
import { getToken } from '@/utils/auth'
import SettingTitle from '@/components/SettingTitle'
export default {
  data() {
    const validateAccount = (rule, value, callback) => {
      const reg = /^(?=.*\d).{6,11}$/
      if (!reg.test(value)) {
        callback(new Error('账号由6-10位数字组成，请输入正确的账号！'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      // console.log(value)
      const reg = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d).{6,12}$/
      // console.log(!reg.test(value))
      if (!reg.test(value)) {
        callback(new Error('密码必须是由6-12位包含大小写字母，数字组合'))
      } else {
        callback()
      }
    }
    return {
      changeNameVisible: false,
      changeModelVisible: false,
      changeNameParams: {
        id: '',
        productName: ''
      },
      changeModelParams: {
      },
      newModel: '',
      newProductCode: '',
      newName: '',
      checkNameId: '',
      nameOptions: [
        {
          label: 'abc',
          value: '1'
        }
      ],
      tableData: [],
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      filterText: '',
      addModelFormVisible: false,
      addVisible: false,
      powerOptions: [
        {
          value: '1',
          label: '管理员'
        },
        {
          value: '0',
          label: '普通用户'
        }
      ],
      addParams: {
        account: '',
        authority: '',
        password: '',
        username: ''
      },
      checkList: [],
      tableSelectVisible: false,
      baseUrl: process.env.VUE_APP_BASE_API,
      msgInfo: {},
      infoParams: {

      },
      infoFormVisible: false,
      userParams: {
        user: '',
        power: ''
      },
      tableFormVisible: false,
      passwordParams: {},
      passwordFormVisible: false,
      deptName: '',
      queryParams: {
        pageNum: 1,
@@ -20,26 +419,471 @@
        deptId: undefined
      },
      dateRange: [],
      userList: null
      serviceArr: [
        { name: '修改密码', icon: 'icon-mima', right: 'el-icon-arrow-right' },
        { name: '个人资料', icon: 'icon-gerenziliao', right: 'el-icon-arrow-right' }
      ],
      formLabelWidth: '120px',
      userList: [],
      commandList: [],
      tableName: '',
      addUserRules: {
        account: [{ required: true, trigger: 'blur', validator: validateAccount }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      passwordRules: {
        oldPassword: [{ required: true, validator: validatePassword }],
        newPassword: [{ required: true, validator: validatePassword }]
      },
      addNameParams: {}
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'allTab',
      'authority',
      'token'
    ])
  },
  created() {
    this.getUserInfo()
    this.getAllUser()
    this.setOptions()
  },
  components: {
    SettingTitle
  },
  mounted() {
  },
  methods: {
    handleClose(refName) {
      // console.log(refName)
      this.$refs[refName]?.resetFields()
    },
    ConfirmChange() {
      console.log(this.changeNameParams)
      if (!this.changeNameParams.productName) return this.$message.error('请认真填写不可为空')

      updateName(this.changeNameParams).then((res) => {
        this.changeNameParams.id = ''
        this.changeNameParams.productName = ''
        console.log('清空修改名称输入框内容')
        this.changeNameVisible = false
        this.$message.success(res)
        this.setOptions()
      })
    },
    confirmChangeModel() {
      console.log('修改型号参数', this.changeModelParams)
      updateModel(this.changeModelParams).then((res) => {
        this.changeModelVisible = false
        this.changeModelParams = {}
        this.$message.success(res)
        this.setOptions()
      })
    },
    addNewName() {
      console.log(this.newName)
      if (!this.newName) return this.$message.error('添加名称不能为空')
      addName({ productName: this.newName }).then((res) => {
        this.newName = ''
        this.$message.success(res)
        this.setOptions()
      }, () => {
        // this.$message.error('添加失败请重新尝试')

      })
    },
    changeName(node, data) {
      // console.log(node, data)
      this.changeNameParams.id = data.value
      this.changeNameParams.productName = data.label
      console.log(this.changeNameParams)
      this.changeNameVisible = true
    },
    deleteName(node, data) {
      console.log(data)
      this.$alert('确定删除', '删除名称', {
        confirmButtonText: '确定',
        callback: action => {
          delName({ id: data.value, productName: data.label }).then((res) => {
            this.$message.success(res)
            this.setOptions()
          })
        }
      })
    },
    addNewModel() {
      addModel({ productNameId: this.checkNameId, productModel: this.newModel, productCode: this.newProductCode }).then((res) => {
        this.checkNameId = ''
        this.newModel = ''
        this.newProductCode = ''
        this.$message.success(res)
        this.setOptions()
      })
    },
    deleteModel(row) {
      delModel({ id: row.id, productModel: row.productModel }).then((res) => {
        this.$message.success(res)
        this.setOptions()
      })
    },
    changeModel(row) {
      this.changeModelVisible = true
      const params = { ...row }
      delete params.productName
      this.changeModelParams = { ... params }
    },
    async setOptions() {
      this.tableData = []
      this.treeData = []
      const { data: nameRes } = await selectAllName()
      // console.log(nameRes)
      const nameArr = nameRes.productNames.map(item => {
        return { value: item.id, label: item.productName }
      })
      this.nameOptions = nameArr
      // console.log(nameArr)
      for (const nameItem of nameArr) {
        const { data } = await selectAllModel({ productNameId: nameItem.value })

        data.models = data.models.map(item => {
          item.productNameId = nameItem.value
          item.productName = nameItem.label
          return item
        })
        this.tableData = [...this.tableData, ...data.models]
        const children = data.models.map(item => {
          return { id: item.id, label: item.productModel }
        })
        this.treeData.push({ ...nameItem, children })
      }
      this.tableData = this.tableData.map(item => {
        return { id: item.id, productModel: item.productModel, productCode: item.productCode, productName: item.productName }
      })
      // console.log(this.tableData)
    },
    onTableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 != 0) {
        return 'onAcitve'
      } else {
        return ''
      }
    },
    async logout() {
      console.log(1)
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=/home`)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    changeCheck(newShow, item) {
      item.show = newShow
    },
    changeUser(item) {

    },
    clear(item) {
      // console.log()
      delUser(item).then(res => {
        this.$message.success('删除成功')
        // this.logout()
        this.getAllUser()
      }, () => {
        this.$message.error('删除失败')
      })
    },
    handleAvatarSuccess(res, file) {
      this.$message.success('上传成功')
      // this.$router.go(0)
    },
    async getAllUser() {
      const { data } = await getUserList()
      this.userList = data.user
      console.log(this.userList)
    },
    addNewUser() {
      // 添加校验规则
      this.$refs.addParams.validate(valid => {
        if (valid) {
          addUser(this.addParams).then(res => {
            this.addParams.account = ''
            this.addParams.authority = ''
            this.addParams.password = ''
            this.addParams.username = ''
            this.addVisible = false
            this.getAllUser()
            this.$message({
              message: '恭喜你，添加成功',
              type: 'success'
            })
          }, () => {
            this.$message.error({
              message: '添加用户失败请重新尝试'
            })
          })
        } else {
          this.$message.error('错误提交，表格校验出错')
        }
      })
      console.log(this.addParams)
    },
    showAdd() {
      this.addVisible = true
    },
    showTableDialog(command) {
      this.commandList = command.keys
      this.tableName = command.name
      this.tableFormVisible = true
    },
    getUserInfo() {
      getInfo(getToken()).then(res => {
        this.msgInfo = res.data
        // console.log(用户信息：res)
      })
    },
    showDialog(name) {
      if (name == '修改密码') {
        this.passwordFormVisible = true
      } else if (name == '修改表单') {
        this.tableSelectVisible = true
      } else if (name == '个人资料') {
        this.infoFormVisible = true
      }
    },
    async changePwd() {
      // 修改密码参数
      // this.logout()

      this.$refs.passwordParams.validate(valid => {
        if (valid) {
          updateUserPwd(this.passwordParams).then(async res => {
            this.passwordFormVisible = false
            await this.logout()
            this.$message({
              message: '恭喜你，修改成功',
              type: 'success'
            })
          }, () => {
            // this.$message.error({
            //   message: '添加用户失败请重新尝试'
            // })
          })
        } else {
          this.$message.error('错误提交，请检查密码格式')
        }
      })
    },
    changeTable() {
      console.log(this.commandList)
      this.$store.commit('CHANGE_TAB_KEY', { name: this.tableName, keys: this.commandList })
      this.tableFormVisible = false
      console.log(this.$store.state)
    },
    async changeInfo() {
      console.log(this.infoParams)
      const res = await updateUserProfile(this.infoParams)
      console.log(res)
      // this.$refs
      this.infoFormVisible = false
      this.getUserInfo()
      this.getAllUser()
      this.setOptions()
    }
  }
}
</script>

<style lang="scss" >
<style lang="scss" scoped>
@import '../../../styles/variables.scss';
//  ::v-deep .el-tree-node__content{
//   height: 70px;
// }
.changeName{
  .el-dialog{
     width: 30% !important;
  }

}
.el-tree-node__children{
  .edit{
    display: none;
  }
}
 ::v-deep .el-dropdown-menu__item {

      padding: 0 40px;
      font-size: 16px;
      border-bottom: 1px solid #efeeee;
  }
.el-icon-plus,.el-icon-arrow-down,.el-icon-arrow-right,.el-icon-arrow-left,.el-icon-arrow-up{
  color: #409EFF;
}
.system-user{
    min-height: calc(100vh - 50px);
    padding: 40px;
    background: $mainBg;
    .changePassword,.tableHead,.userInfo{
      .title{
        display: flex;
        align-items: center;
        span:nth-child(1){
          margin-right: 8px;
          display: inline-block;
          width: 4px;
          height: 18px;
          background: #409EFF;
        }
      }
      ::v-deep >div{
        width: 600px;
        border-radius: 10px;
      }
      ::v-deep .el-dialog__body{
        padding: 30px 100px;
        input{
          border: 0px;
          background: #f3f4f5;
        }
      }
      ::v-deep .el-dialog__footer{
        padding: 10px 100px 30px 100px;
        // margin-right: ;
        .dialog-footer{
          display: flex;
          button{
            flex: 1;
          }
        }
      }
    }
    .tableHead{
      ::v-deep >div{
        width: 300px;

      }
      ::v-deep .el-dialog__body{
        padding: 30px 50px;
      }
      ::v-deep .el-checkbox{
        margin-right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      ::v-deep .el-checkbox__label{
        width: 140px;
        margin: 5px 10px;
        padding: 10px 40px;
        background: #f3f4f5;
        border-radius: 6px;

      }
    }
}
.user-info{
  width: 100%;
  height: 125px;
  border-radius: 10px;
  background: #fff;
  padding: 25px;
  display: flex;
  align-items: center;
  .info-avatar{

     .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 75px;
    height: 75px;
    line-height: 75px;
    text-align: center;
  }
  .avatar {
    width: 75px;
    height: 75px;
    display: block;
    border-radius: 50%;
  }
  }
  .info-logout{
    // width: 100px;
    .el-button--primary.is-plain{
          background: #fff;
          color: #409EFF;
          border-color: #b3d8ff;
    }
  }
  .info-msg{
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 25px;
    >div:nth-child(1){
      font-weight: 700;
      font-size: 24px;

    }
  }
}

.setting-model{
   margin-top: 24px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #ddd;
  padding: 15px;
  .addName{
    // display: flex;
    margin-bottom: 20px;
  }
}
.setting-list{
  margin-top: 24px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #ddd;
  .setting-item{
    height: 70px;
    padding: 15px;
    width: 100%;
    display: flex;
    align-items: center;
    .item-icon{
      // width: 40px;
      // height: 40px;
    }
    .item-msg{
      flex: 1;
      padding-left: 15px;
    }

  }
  .setting-item{
    // border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
}
</style>