tb-car-disincle-edit.html 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>入境登记-添加/修改</title>
  5. <meta http-equiv="Content-Type" content="text/html; 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="../../static/kj/element-ui/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. <style type="text/css">
  19. .c-panel .el-form .c-label {
  20. width: 7em !important;
  21. }
  22. .c-panel .el-form .c-panel .el-form {
  23. width: 180px;
  24. }
  25. .item-num .el-input__inner {
  26. width: 100px;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div class="vue-box" :class="{sbot: id}" style="display: none;" :style="'display: block;'">
  32. <!-- ------- 内容部分 ------- -->
  33. <div class="s-body">
  34. <div class="c-panel">
  35. <div class="c-title" v-if="id == 0">数据添加</div>
  36. <div class="c-title" v-else>数据修改</div>
  37. <el-form v-if="m" label-position="left">
  38. <el-card class="box-card">
  39. <div slot="header" class="clearfix">
  40. <span>基本资料</span>
  41. </div>
  42. <el-row>
  43. <div class="c-item">
  44. <label class="c-label"><span style="color: red;">*</span>客户:</label>
  45. <el-select v-model="m.customerId" placeholder="请选择">
  46. <el-option v-for="item in customerList" :key="item.id" :label="item.name"
  47. :value="item.id">
  48. </el-option>
  49. </el-select>
  50. </div>
  51. <el-col :span='12'>
  52. <sa-item name="车牌号" placeholder="请输入车牌号" v-model="m.carNo" br>
  53. </sa-item>
  54. <sa-item type="num" name="车辆规格" placeholder="请输入车辆规格" v-model="m.carSize" br>
  55. </sa-item>
  56. </el-col>
  57. <el-col :span='12'>
  58. <div class="c-item">
  59. <label class="c-label">车辆类型:</label>
  60. <el-select v-model="m.carType" placeholder="请选择">
  61. <el-option label="空车" value="空车">
  62. </el-option>
  63. <el-option label="载货" value="载货">
  64. </el-option>
  65. </el-select>
  66. </div>
  67. <sa-item v-if="m.carType=='载货'" type="num" name="载重(kg)" placeholder="请输入车辆载重"
  68. v-model="m.carWeight" br>
  69. </sa-item>
  70. </el-col>
  71. </el-row>
  72. <el-card class="box-card">
  73. <div slot="header" class="clearfix">
  74. <span>收费明细<label style="color: red;">(总共{{totalPrice}}元)</label></span>
  75. <el-select v-model="m.itemTypeId" placeholder="请选择" @change="getItems"
  76. style="float: right; padding: 3px 0">
  77. <el-option v-for="(item,index) in itemTypeList" :label="item.name"
  78. :value="item.id">
  79. </el-option>
  80. </el-select>
  81. </div>
  82. <div>
  83. <el-checkbox-group v-model="checkList">
  84. <el-row v-for="(item,index) in items"
  85. style="border-bottom: 1px solid #E4E4E4;line-height: 90px;">
  86. <el-col :span="11">
  87. <el-checkbox :disabled="item.need==1" :label="item.id">
  88. <div>{{item.itemName}}(<label
  89. style="color: red;">{{item.price}}{{item.unit}}</label>)
  90. </div>
  91. </el-checkbox>
  92. </el-col>
  93. <el-col :span="6">
  94. <el-input-number :disabled="item.inc==0" class="item-num"
  95. v-model="item.num" :min="1" :max="10"></el-input-number>
  96. </el-col>
  97. <el-col :span="7">
  98. <sa-item type="textarea" name="备注" placeholder="请输入备注"
  99. v-model="item.remark" br>
  100. </sa-item>
  101. </el-col>
  102. </el-row>
  103. </el-checkbox-group>
  104. </div>
  105. </el-card>
  106. </el-form>
  107. </div>
  108. </div>
  109. <!-- ------- 底部按钮 ------- -->
  110. <div class="s-foot">
  111. <el-button type="primary" @click="ok()" v-if="sa.isAuth('tb-business-add')">确定</el-button>
  112. <el-button @click="sa.closeCurrIframe()">取消</el-button>
  113. </div>
  114. </div>
  115. <script>
  116. var app = new Vue({
  117. components: {
  118. "sa-item": httpVueLoader('../../sa-frame/com/sa-item.vue'),
  119. "sa-td": httpVueLoader('../../sa-frame/com/sa-td.vue')
  120. },
  121. el: '.vue-box',
  122. data: {
  123. id: sa.p('id', ''),
  124. p: { // 查询参数
  125. business: 0,
  126. pageNo: 1, // 当前页
  127. pageSize: 50, // 页大小
  128. sortType: 0 // 排序方式
  129. },
  130. id: sa.p('id', 0), // 获取超链接中的id参数(0=添加,非0=修改)
  131. m: {
  132. id: '', // 主键
  133. carNo: '',
  134. carSize: '',
  135. carType: '载货',
  136. carWeight: '',
  137. itemTypeId: ''
  138. }, // 实体对象
  139. itemTypeList: [],
  140. items: [],
  141. businessItems:[],
  142. checkList: [],
  143. customerList:[]
  144. },
  145. computed: {
  146. totalPrice() {
  147. let checkList = this.checkList;
  148. let items = this.items
  149. .filter(obj => checkList.indexOf(obj.id) !== -1);
  150. let price = 0;
  151. for (let i in items) {
  152. let item = items[i];
  153. price = price + item.price * item.num;
  154. }
  155. return price;
  156. }
  157. },
  158. methods: {
  159. getCustomerList() {
  160. sa.ajax('/TbCostomer/getList', {
  161. pageNo: 1,
  162. pageSize: 30,
  163. type: 0,
  164. judgeStatus: 2
  165. }, function(res) {
  166. this.customerList = res.data; // 数据
  167. }.bind(this));
  168. },
  169. getItemTypeList() {
  170. sa.ajax('/TbItemType/getList', sa.removeNull(this.p), function(res) {
  171. let list = res.data;
  172. this.itemTypeList = list;
  173. this.getItems();
  174. }.bind(this));
  175. },
  176. getItems() {
  177. sa.ajax('/TbItem/getTypeItemList', {
  178. pageNo: 1,
  179. pageSize: 30,
  180. typeId: this.m.itemTypeId
  181. }, function(resp) {
  182. let list = resp.data;
  183. this.items = list;
  184. let businessItems=this.businessItems;
  185. list.forEach(obj=>{
  186. businessItems.forEach(item=>{
  187. if(obj.id==item.itemId){
  188. obj.remark=item.remark;
  189. obj.num=item.num;
  190. }
  191. })
  192. })
  193. }.bind(this))
  194. },
  195. ok() {
  196. let m = this.m;
  197. if (!m.carNo) {
  198. sa.error('请输入车牌号')
  199. return false;
  200. }
  201. if (!m.carSize) {
  202. sa.error('请输入规格')
  203. return false;
  204. }
  205. if (!m.carWeight && m.carType == '载货') {
  206. sa.error('请输入车辆载重')
  207. return false;
  208. }
  209. let checkList = this.checkList;
  210. let itemList = this.items;
  211. let list = itemList.filter(obj => checkList.indexOf(obj.id) !== -1);
  212. m.itemJson = JSON.stringify(list);
  213. m.items=null;
  214. sa.ajax('/api/editOtherBusiness', sa.removeNull(m), function(resp) {
  215. parent.app.f5(); // 刷新父页面列表
  216. sa.closeCurrIframe(); // 关闭本页
  217. }.bind(this))
  218. },
  219. getOtherBusinessById() {
  220. sa.ajax('/TbBusiness/getOtherBusinessById', {
  221. id: this.id
  222. }, function(resp) {
  223. let data=resp.data;
  224. this.m = data
  225. this.businessItems=data.items;
  226. this.checkList=data.items.map(obj=>obj.itemId);
  227. this.getItemTypeList();
  228. }.bind(this))
  229. }
  230. },
  231. mounted: function() {
  232. this.getOtherBusinessById();
  233. this.getCustomerList();
  234. }
  235. })
  236. </script>
  237. </body>
  238. </html>