tb-declare-list.html 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  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="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
  12. <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
  13. <script src="https://unpkg.com/http-vue-loader@1.4.2/src/httpVueLoader.js"></script>
  14. <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
  15. <script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
  16. <script src="../../static/sa.js"></script>
  17. </head>
  18. <body>
  19. <div class="vue-box" style="display: none;" :style="'display: block;'">
  20. <div class="c-panel">
  21. <!-- ------------- 检索参数 ------------- -->
  22. <div class="c-title">检索参数</div>
  23. <el-form ref="form" :model='p' @submit.native.prevent>
  24. <sa-item type="text" name="中国车车牌" v-model="p.chinaCarNo"></sa-item>
  25. <sa-item type="text" name="越南车车牌" v-model="p.carNo"></sa-item>
  26. <sa-item type="text" name="申报单位" v-model="p.customerName"></sa-item>
  27. <sa-item type="text" name="货主单位" v-model="p.sendUnit"></sa-item>
  28. <sa-item type="text" name="收货单位" v-model="p.receiveUnit"></sa-item>
  29. <!-- <sa-item type="text" name="代理人电话" v-model="p.agentPhone"></sa-item>-->
  30. <el-button type="primary" icon="el-icon-search" @click="p.pageNo = 1; f5()">查询</el-button>
  31. <br/>
  32. </sa-item>
  33. </el-form>
  34. <br/>
  35. <!-- ------------- 快捷按钮 ------------- -->
  36. <div class="fast-btn">
  37. <!-- <el-button size="mini" type="primary" @click="add()">新增</el-button>-->
  38. <el-button size="mini" type="info" @click="sa.f5()">刷新</el-button>
  39. </div>
  40. <!-- ------------- 数据列表 ------------- -->
  41. <el-table class="data-table" ref="data-table" :data="dataList">
  42. <sa-td type="selection"></sa-td>
  43. <sa-td name="产品学名" prop="goodsName"></sa-td>
  44. <sa-td name="毛重(kg)" prop="grossWeight" type="num"></sa-td>
  45. <sa-td name="数量(件)" prop="num" type="num"></sa-td>
  46. <!-- <sa-td name="生产日期" prop="productionDate" ></sa-td>-->
  47. <!-- <sa-td name="保质期(天)" prop="expirationDate" type="num" ></sa-td>-->
  48. <!-- <sa-td name="储存条件" prop="storageMode" ></sa-td>-->
  49. <!-- <sa-td name="生产方式" prop="productionMode" ></sa-td>-->
  50. <!-- <sa-td name="原产国" prop="origin" ></sa-td>-->
  51. <!-- <sa-td name="进口冷链食品生产商注册号" prop="producerCode" ></sa-td>-->
  52. <sa-td name="申报单位" prop="customerName"></sa-td>
  53. <sa-td name="货主单位" prop="sendUnit"></sa-td>
  54. <sa-td name="收货单位" prop="receiveUnit"></sa-td>
  55. <sa-td name="货物流向" prop="route"></sa-td>
  56. <sa-td name="司机姓名" prop="driverName"></sa-td>
  57. <sa-td name="司机联系电话" prop="driverPhone"></sa-td>
  58. <!-- <sa-td name="代理商" prop="agent" ></sa-td>-->
  59. <sa-td name="代理商联系电话" prop="agentPhone"></sa-td>
  60. <sa-td name="运输车车牌" prop="chinaCarNo"></sa-td>
  61. <sa-td name="越南车车牌" prop="carNo"></sa-td>
  62. <!-- <sa-td name="海关报关单据" prop="customProof" ></sa-td>-->
  63. <!-- <sa-td name="进口检验检疫证书" prop="quarantineProof" ></sa-td>-->
  64. <!-- <sa-td name="商铺" prop="shop" ></sa-td>-->
  65. <!-- <sa-td name="生产批号" prop="productionCode" ></sa-td>-->
  66. <!-- <sa-td name="柜号" prop="containerCode" ></sa-td>-->
  67. <sa-td name="申报时间" prop="createTime" width="100px"></sa-td>
  68. <el-table-column label="操作" width="320px">
  69. <template slot-scope="s">
  70. <el-button v-if="sa.isAuth('tb-declare-print')" class="c-btn" type="success" icon="el-icon"
  71. @click="print(s.row)">打印
  72. </el-button>
  73. <el-button class="c-btn" type="success" icon="el-icon-view" @click="get(s.row)">查看</el-button>
  74. <el-button v-if="sa.isAuth('tb-declare-edit')" class="c-btn" type="primary" icon="el-icon-edit"
  75. @click="update(s.row)">修改
  76. </el-button>
  77. <el-button v-if="sa.isAuth('tb-declare-del')" class="c-btn" type="danger" icon="el-icon-delete"
  78. @click="del(s.row)">删除
  79. </el-button>
  80. </template>
  81. </el-table-column>
  82. </el-table>
  83. <!-- ------------- 分页 ------------- -->
  84. <sa-item type="page" :curr.sync="p.pageNo" :size.sync="p.pageSize" :total="dataCount" @change="f5()"></sa-item>
  85. </div>
  86. </div>
  87. <script>
  88. var app = new Vue({
  89. components: {
  90. "sa-item": httpVueLoader('../../sa-frame/com/sa-item.vue'),
  91. "sa-td": httpVueLoader('../../sa-frame/com/sa-td.vue'),
  92. },
  93. el: '.vue-box',
  94. data: {
  95. p: { // 查询参数
  96. id: '', // 主键
  97. customerName: '', //申报单位
  98. businessId: '', // 业务id
  99. goodsName: '', // 产品学名
  100. grossWeight: '', // 毛重
  101. num: '', // 件数
  102. productionDate: '', // 生产日期
  103. expirationDate: '', // 保质期
  104. storageMode: '', // 储存条件
  105. productionMode: '', // 生产方式
  106. origin: '', // 原产国
  107. producerCode: '', // 进口冷链食品生产商注册号
  108. sendUnit: '', // 货主单位
  109. receiveUnit: '', // 收货单位
  110. route: '', // 货物流向
  111. driverName: '', // 司机姓名
  112. driverPhone: '', // 联系电话(司机)
  113. agent: '', // 代理商
  114. agentPhone: '', // 联系电话(代理人)
  115. chinaCarNo: '', // 运输车车牌
  116. carNo: '', // 越南车车牌
  117. customProof: '', // 海关报关单据
  118. quarantineProof: '', // 进口检验检疫证书
  119. shop: '', // 商铺(互助组)
  120. productionCode: '', // 生产批号
  121. containerCode: '', // 柜号
  122. pageNo: 1, // 当前页
  123. pageSize: 10, // 页大小
  124. sortType: 0 // 排序方式
  125. },
  126. dataCount: 0,
  127. dataList: [], // 数据集合
  128. },
  129. methods: {
  130. // 刷新
  131. f5: function () {
  132. sa.ajax('/TbDeclare/getList', sa.removeNull(this.p), function (res) {
  133. this.dataList = res.data; // 数据
  134. this.dataCount = res.dataCount; // 数据总数
  135. sa.f5TableHeight(); // 刷新表格高度
  136. }.bind(this));
  137. },
  138. // 查看
  139. get: function (data) {
  140. sa.showIframe('数据详情', 'tb-declare-info.html?id=' + data.id, '900px', '90%');
  141. },
  142. // 查看 - 根据选中的
  143. getBySelect: function (data) {
  144. var selection = this.$refs['data-table'].selection;
  145. if (selection.length == 0) {
  146. return sa.msg('请选择一条数据')
  147. }
  148. this.get(selection[0]);
  149. },
  150. // 打印
  151. print: function (data) {
  152. sa.showIframe('打印申报信息表', 'print.html?id=' + data.id, '1000px', '100%');
  153. },
  154. // 修改
  155. update: function (data) {
  156. sa.showIframe('修改数据', 'tb-declare-add.html?id=' + data.id, '600px', '90%');
  157. },
  158. // 新增
  159. add: function (data) {
  160. sa.showIframe('新增数据', 'tb-declare-add.html?id=-1', '1000px', '90%');
  161. },
  162. // 删除
  163. del: function (data) {
  164. sa.confirm('是否删除,此操作不可撤销', function () {
  165. sa.ajax('/TbDeclare/delete?id=' + data.id, function (res) {
  166. sa.arrayDelete(this.dataList, data);
  167. sa.ok('删除成功');
  168. sa.f5TableHeight(); // 刷新表格高度
  169. }.bind(this))
  170. }.bind(this));
  171. },
  172. // 批量删除
  173. deleteByIds: function () {
  174. // 获取选中元素的id列表
  175. let selection = this.$refs['data-table'].selection;
  176. let ids = sa.getArrayField(selection, 'id');
  177. if (selection.length == 0) {
  178. return sa.msg('请至少选择一条数据')
  179. }
  180. // 提交删除
  181. sa.confirm('是否批量删除选中数据?此操作不可撤销', function () {
  182. sa.ajax('/TbDeclare/deleteByIds', {ids: ids.join(',')}, function (res) {
  183. sa.arrayDelete(this.dataList, selection);
  184. sa.ok('删除成功');
  185. sa.f5TableHeight(); // 刷新表格高度
  186. }.bind(this))
  187. }.bind(this));
  188. },
  189. },
  190. created: function () {
  191. this.f5();
  192. sa.onInputEnter();
  193. }
  194. })
  195. </script>
  196. </body>
  197. </html>