setting_kefu_list.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. {{template "header" }}
  2. <div id="app" style="width:100%">
  3. <template>
  4. <el-container v-loading.fullscreen.lock="fullscreenLoading">
  5. <el-main class="mainMain">
  6. <el-button style="margin-bottom: 10px;" @click="addKefu" type="primary" size="small">添加客服</el-button>
  7. <el-table
  8. :data="kefuList"
  9. border
  10. style="width: 100%">
  11. <el-table-column
  12. prop="img"
  13. label="客服头像">
  14. <template slot-scope="scope">
  15. <el-avatar :size="50"><img :src="scope.row.avator"/></el-avatar>
  16. </template>
  17. </el-table-column>
  18. <el-table-column
  19. prop="name"
  20. label="客服账号">
  21. </el-table-column>
  22. <el-table-column
  23. prop="nickname"
  24. label="客服昵称">
  25. </el-table-column>
  26. <el-table-column
  27. prop="role_name"
  28. label="角色">
  29. </el-table-column>
  30. <el-table-column
  31. prop="enabled"
  32. label="是否启用">
  33. <template slot-scope="scope">
  34. <div v-if="scope.row.enabled==2">
  35. <el-tag type="warning">禁用</el-tag>
  36. </div>
  37. <div v-else>
  38. <el-tag type="success">启用</el-tag>
  39. </div>
  40. </template>
  41. </el-table-column>
  42. <el-table-column
  43. prop="created_at"
  44. label="添加时间">
  45. </el-table-column>
  46. <el-table-column
  47. prop="id"
  48. label="操作">
  49. <template slot-scope="scope">
  50. <el-button @click="getKefu(scope.row.id)" type="primary" size="small" plain>编辑</el-button>
  51. <el-button @click="deleteKefu(scope.row.id)" type="danger" size="small" plain>删除</el-button>
  52. </template>
  53. </el-table-column>
  54. </el-table>
  55. </el-main>
  56. </el-container>
  57. <el-dialog
  58. title="客服"
  59. :visible.sync="kefuDialog"
  60. width="30%"
  61. top="0"
  62. >
  63. <el-form ref="kefuForm" :model="kefuForm" :rules="rules" label-width="70px">
  64. <el-form-item label="用户名" prop="name">
  65. <el-input v-model="kefuForm.name"></el-input>
  66. </el-form-item>
  67. <el-form-item label="密码" prop="password">
  68. <el-input v-model="kefuForm.password"></el-input>
  69. </el-form-item>
  70. <el-form-item label="昵称" prop="nickname">
  71. <el-input v-model="kefuForm.nickname"></el-input>
  72. </el-form-item>
  73. <el-form-item label="头像" prop="avator">
  74. <el-select v-model="kefuForm.avator" placeholder="请选择头像">
  75. <el-option :label="'头像'+item" :value="domain+item+'.jpg'" v-for="item in [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14]" v-bind:key="item">
  76. <el-avatar :size="30" :src="domain+item+'.jpg'"></el-avatar>
  77. </el-option>
  78. </el-select>
  79. </el-form-item>
  80. <el-form-item label="角色" prop="role_id">
  81. <el-select v-model="kefuForm.role_id" placeholder="请选择角色">
  82. <el-option :label="item.role_name" :value="item.role_id" v-for="item in roleList" v-bind:key="item.role_id">
  83. </el-option>
  84. </el-select>
  85. </el-form-item>
  86. <el-form-item label="启用" prop="enabled">
  87. <el-select v-model="kefuForm.enabled" placeholder="是否启用">
  88. <el-option :label="item.text" :value="item.id" v-for="item in enabledItems" v-bind:key="item.id">
  89. </el-option>
  90. </el-select>
  91. </el-form-item>
  92. </el-form>
  93. <span slot="footer" class="dialog-footer">
  94. <el-button @click="kefuDialog = false">取 消</el-button>
  95. <el-button type="primary" @click="submitKefuForm('kefuForm')">确 定</el-button>
  96. </span>
  97. </el-dialog>
  98. </template>
  99. </div>
  100. </body>
  101. {{template "setting_bottom" .}}