tb-driver-list.html 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>司机-列表</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport"
  7. content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. <!-- 所有的 css & js 资源 -->
  9. <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
  10. <link rel="stylesheet" href="../../static/sa.css">
  11. <script src="../../static/kj/vue.min.js"></script>
  12. <script src="../../static/kj/element-ui/index.js"></script>
  13. <script src="../../static/kj/httpVueLoader.js"></script>
  14. <script src="../../static/kj/jquery.min.js"></script>
  15. <script src="../../static/kj/layer/layer.js"></script>
  16. <script src="../../static/sa.js"></script>
  17. <script src="../../static/kj/upload-util.js"></script>
  18. </head>
  19. <body>
  20. <div class="vue-box" style="display: none;" :style="'display: block;'">
  21. <div class="c-panel">
  22. <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
  23. <el-tab-pane
  24. :key="item.nodeId"
  25. v-for="(item, index) in orderStepTabs"
  26. :label="item.nodeName"
  27. :name="item.nodeId"
  28. >
  29. <span slot="label"><i class="el-icon-postcard"></i> {{item.nodeName}} ( {{item.nodeCount}} )</span>
  30. </el-tab-pane>
  31. </el-tabs>
  32. <!-- ------------- 检索参数 ------------- -->
  33. <!-- <div class="c-title">检索参数</div> -->
  34. <el-form ref="form" :model='p' @submit.native.prevent>
  35. <sa-item type="text" name="姓名" v-model="p.name" width="50px"></sa-item>
  36. <sa-item type="text" name="手机号" v-model="p.phone"></sa-item>
  37. <sa-item type="text" name="身份证号" v-model="p.idCard" width="80px"></sa-item>
  38. <!--<sa-item name="审核状态" width="90px">
  39. <el-select v-model="p.auditStatus">
  40. <el-option label="全部" value=""></el-option>
  41. <el-option label="待审核" value="0"></el-option>
  42. <el-option label="审核中" value="3"></el-option>
  43. <el-option label="审核通过" value="1"></el-option>
  44. <el-option label="审核不通过" value="2"></el-option>
  45. </el-select>
  46. </sa-item>-->
  47. <el-button type="primary" icon="el-icon-search" @click="p.pageNo = 1; f5()">查询</el-button>
  48. <el-button icon="el-icon-refresh" type="info" @click="sa.f5()">重置</el-button>
  49. </el-form>
  50. <div class="fast-btn">
  51. <el-button v-if="sa.isAuth('tb-driver-add')" size="mini" type="primary" @click="add()">新增</el-button>
  52. <!--<el-button size="mini" type="success" @click="getBySelect()">查看</el-button>
  53. <el-button size="mini" type="danger" @click="deleteByIds()">批量删除</el-button>-->
  54. <!--<el-button size="mini" type="primary" @click="importMsg()">导入</el-button>
  55. <el-button size="mini" type="success" @click="exportFile()">导出</el-button>-->
  56. </div>
  57. <!-- ------------- 数据列表 ------------- -->
  58. <el-table class="data-table" ref="data-table" :data="dataList">
  59. <sa-td name="序号" align="center" type="index" :index="indexMethod"></sa-td>
  60. <sa-td name="姓名" prop="name"></sa-td>
  61. <sa-td name="性别" prop="sex" type="enum" :jv="{1: '男', 2: '女'}"></sa-td>
  62. <sa-td name="出生年月" prop="birthday" width="120px"></sa-td>
  63. <sa-td name="身份证号" width="170px" prop="idCard"></sa-td>
  64. <sa-td name="手机号" width="110px" prop="phone"></sa-td>
  65. <!-- <sa-td name="联系地址" width="150px" prop="address"></sa-td>
  66. <sa-td name="身份证照片" prop="idCardImg" type="img-list"></sa-td>
  67. <sa-td name="驾驶证号" prop="drivingLicenseId"></sa-td>-->
  68. <sa-td name="驾照类型" prop="driverType" type="enum" :jv="{6: 'A2', 7: 'B2', 19: 'C1', 20:'C2'}"></sa-td>
  69. <sa-td name="驾驶证照片" prop="drivingLicenseImg" type="img-list"></sa-td>
  70. <!-- <sa-td name="车辆行驶证号" prop="vehicleDrivingId" width="120px"></sa-td>
  71. <sa-td name="车辆行驶证照片" prop="vehicleDrivingImg" type="img-list"></sa-td>
  72. <sa-td name="车辆前脸照" prop="vehicleImg" type="img-list"></sa-td>
  73. -->
  74. <sa-td name="注册时间" width="150px" prop="registerTime"></sa-td>
  75. <sa-td name="审核状态" prop="auditStatus" type="enum" :jv="{0: '待审核', 1: '审核通过', 2: '审核不通过', 3:'审核中'}"></sa-td>
  76. <!--<sa-td name="审核状态" prop="auditStatus"></sa-td>-->
  77. <sa-td name="审核时间" prop="auditTime" width="150px"></sa-td>
  78. <el-table-column label="操作" fixed="right" width="200px">
  79. <template slot-scope="s">
  80. <!--<el-button class="c-btn" type="danger" icon="el-icon-lock" v-if="s.row.isLock" @click="unlock(s.row)">锁定</el-button>
  81. <el-button class="c-btn" type="success" icon="el-icon-s-check" v-else @click="check(s.row)">审核</el-button>-->
  82. <el-button class="c-btn" type="success" icon="el-icon-view" @click="get(s.row)">查看</el-button>
  83. <el-button v-if="sa.isAuth('tb-driver-edit') && s.row.auditStatus!=3" class="c-btn" type="primary" icon="el-icon-edit"
  84. @click="update(s.row)">修改</el-button>
  85. <el-button v-if="sa.isAuth('tb-driver-del') && (s.row.auditStatus==0 || s.row.auditStatus==2)" class="c-btn" type="danger" icon="el-icon-delete"
  86. @click="del(s.row)">删除</el-button>
  87. </template>
  88. </el-table-column>
  89. </el-table>
  90. <!-- ------------- 分页 ------------- -->
  91. <sa-item type="page" :curr.sync="p.pageNo" :size.sync="p.pageSize" :total="dataCount"
  92. @change="f5()"></sa-item>
  93. </div>
  94. <!-- 上传文件 -->
  95. <input ref="fileInput" type="file" style="display: none;" @click="handleFile(event)"></input>
  96. </div>
  97. <script>
  98. var app = new Vue({
  99. components: {
  100. "sa-item": httpVueLoader('../../sa-frame/com/sa-item.vue'),
  101. "sa-td": httpVueLoader('../../sa-frame/com/sa-td.vue'),
  102. },
  103. el: '.vue-box',
  104. data: {
  105. p: { // 查询参数
  106. name: '', // 姓名
  107. phone: '', // 手机号
  108. idCard: '', // 身份证号
  109. auditStatus: '', // 审核状态
  110. pageNo: 1, // 当前页
  111. pageSize: 10, // 页大小
  112. sortType: 0 // 排序方式
  113. },
  114. dataCount: 0,
  115. dataList: [], // 数据集合
  116. orderStepTabs: [],
  117. activeTab: 'all',
  118. },
  119. methods: {
  120. handleTabClick(tab, event) {
  121. if(tab.name==='all')
  122. this.p.auditStatus =null;
  123. else
  124. this.p.auditStatus = tab.name;
  125. this.f5();
  126. },
  127. // 刷新
  128. f5: function () {
  129. sa.ajax('/transport-server/TbDriver/statDriverGroupByStatus', sa.removeNull(this.p), function(res) {
  130. this.orderStepTabs = res.data; // 数据
  131. }.bind(this));
  132. sa.ajax('/transport-server/TbDriver/getList', sa.removeNull(this.p), function (res) {
  133. res.data.forEach(element => {
  134. element.idCard = element.idCard.toString().replace(/^(.{4})(?:\w+)(.{4})$/,'$1****$2')
  135. });
  136. this.dataList = res.data; // 数据
  137. this.dataCount = res.dataCount; // 数据总数
  138. sa.f5TableHeight(); // 刷新表格高度
  139. }.bind(this));
  140. },
  141. indexMethod(index){
  142. let pageNo = this.p.pageNo - 1;
  143. if((pageNo!==-1 && pageNo!==0)){
  144. return (index + 1) + (pageNo * this.p.pageSize);
  145. }else{
  146. return (index + 1)
  147. }
  148. },
  149. // 查看
  150. get: function (data) {
  151. sa.showIframe('司机详情', 'tb-driver-info.html?id=' + data.id, '1050px', '90%');
  152. },
  153. // 查看 - 根据选中的
  154. getBySelect: function (data) {
  155. var selection = this.$refs['data-table'].selection;
  156. if (selection.length == 0) {
  157. return sa.msg('请选择一条数据')
  158. }
  159. this.get(selection[0]);
  160. },
  161. // 修改
  162. update: function (data) {
  163. sa.ajax('/transport-server/TbDriver/getById?id=' + data.id, function (res) {
  164. this.m = res.data;
  165. if(res.data.auditStatus==3){
  166. sa.alert('该司机当前审核中,不能修改');
  167. this.f5();
  168. }else{
  169. sa.showIframe('修改司机', 'tb-driver-add.html?id=' + data.id, '1000px', '90%');
  170. }
  171. }.bind(this))
  172. },
  173. // 新增
  174. add: function (data) {
  175. sa.showIframe('添加司机', 'tb-driver-add.html?id=-1', '1000px', '90%');
  176. },
  177. // 删除
  178. del: function (data) {
  179. sa.confirm('确认要删除司机 [ ' + data.name + ' ] 吗?', function () {
  180. sa.ajax('/transport-server/TbDriver/delete?id=' + data.id, function (res) {
  181. sa.arrayDelete(this.dataList, data);
  182. sa.ok('删除成功');
  183. sa.f5TableHeight(); // 刷新表格高度
  184. }.bind(this))
  185. }.bind(this));
  186. },
  187. // 批量删除
  188. deleteByIds: function () {
  189. // 获取选中元素的id列表
  190. let selection = this.$refs['data-table'].selection;
  191. let ids = sa.getArrayField(selection, 'id');
  192. if (selection.length == 0) {
  193. return sa.msg('请至少选择一条数据')
  194. }
  195. // 提交删除
  196. sa.confirm('是否批量删除选中数据?此操作不可撤销', function () {
  197. sa.ajax('/transport-server/TbDriver/deleteByIds', { ids: ids.join(',') }, function (res) {
  198. sa.arrayDelete(this.dataList, selection);
  199. sa.ok('删除成功');
  200. sa.f5TableHeight(); // 刷新表格高度
  201. }.bind(this))
  202. }.bind(this));
  203. },
  204. unlock: function(data){
  205. sa.confirm('是否要解锁当前数据',function() {
  206. data.isLock=false
  207. sa.ok('解锁成功')
  208. sa.f5TableHeight(); // 刷新表格高度
  209. }.bind(this))
  210. },
  211. check: function(data){
  212. sa.showIframe('审核信息', 'tb-driver-check.html?id=' + data.id, '1000px', '90%');
  213. },
  214. exportFile() {
  215. sa.ajax('/transport-server/TbDriver/driverOutport', {
  216. // keyword: "",
  217. // filepath: ""
  218. }, function (res) {
  219. })
  220. },
  221. importMsg() {
  222. this.$refs.fileInput.click()
  223. console.log("导入")
  224. },
  225. handleFile(event) {
  226. console.log(event)
  227. const file = event.target.files[0]
  228. sa.ajax('/transport-server/TbDriver/driverImport', { file }, function (res) {
  229. // sa.ok('导入成功');
  230. // sa.f5TableHeight();
  231. })
  232. },
  233. },
  234. created: function () {
  235. this.f5();
  236. sa.onInputEnter();
  237. }
  238. })
  239. </script>
  240. </body>
  241. </html>