tb-car-disincle-edit.html 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  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. <el-col :span='12'>
  44. <div class="c-item" v-if="currentCustomerId=='1'">
  45. <label class="c-label"><span style="color: red;">*</span>客户:</label>
  46. <el-select v-model="m.customerId" placeholder="请选择">
  47. <el-option v-for="item in customerList" :key="item.id" :label="item.name"
  48. :value="item.id">
  49. </el-option>
  50. </el-select>
  51. </div>
  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. <sa-item name="作业人员" placeholder="请输入作业人员" v-model="m.operator" br>
  57. </sa-item>
  58. </el-col>
  59. <el-col :span='12'>
  60. <div class="c-item">
  61. <label class="c-label">车辆类型:</label>
  62. <el-select v-model="m.carType" placeholder="请选择" @change="carTypeChange">
  63. <el-option :label="item.name" :value="item.name" v-for="(item,index) in carTypeList">
  64. </el-option>
  65. </el-select>
  66. </div>
  67. <sa-item v-if="m.carType.indexOf('重')!==-1" type="num" name="载重(kg)" placeholder="请输入车辆载重"
  68. v-model="m.carWeight" br>
  69. </sa-item>
  70. <div class="c-item">
  71. <label class="c-label">作业时间:</label>
  72. <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" v-model="m.operateTime"></el-date-picker>
  73. </div>
  74. </el-col>
  75. </el-row>
  76. <el-card class="box-card">
  77. <div slot="header" class="clearfix">
  78. <span>收费明细<label style="color: red;">(总共{{totalPrice}}元)</label></span>
  79. <el-select v-model="m.itemTypeId" placeholder="请选择" @change="getItems"
  80. style="float: right; padding: 3px 0">
  81. <el-option v-for="(item,index) in itemTypeList" :label="item.name"
  82. :value="item.id">
  83. </el-option>
  84. </el-select>
  85. </div>
  86. <div>
  87. <el-checkbox-group v-model="checkList">
  88. <el-row v-for="(item,index) in items"
  89. style="border-bottom: 1px solid #E4E4E4;line-height: 90px;">
  90. <el-col :span="11">
  91. <el-checkbox :disabled="item.need==1" :label="item.id">
  92. <div>{{item.itemName}}(<label
  93. style="color: red;">{{item.price}}{{item.unit}}</label>)
  94. </div>
  95. </el-checkbox>
  96. </el-col>
  97. <el-col :span="6">
  98. <el-input-number :disabled="item.inc==0" class="item-num"
  99. v-model="item.num" :min="1" :max="10"></el-input-number>
  100. </el-col>
  101. <el-col :span="7">
  102. <sa-item type="textarea" name="备注" placeholder="请输入备注"
  103. v-model="item.remark" br>
  104. </sa-item>
  105. </el-col>
  106. </el-row>
  107. </el-checkbox-group>
  108. </div>
  109. </el-card>
  110. </el-form>
  111. </div>
  112. </div>
  113. <!-- ------- 底部按钮 ------- -->
  114. <div class="s-foot">
  115. <el-button type="primary" @click="ok()" v-if="sa.isAuth('tb-business-add')">确定</el-button>
  116. <el-button @click="sa.closeCurrIframe()">取消</el-button>
  117. </div>
  118. </div>
  119. <script>
  120. var app = new Vue({
  121. components: {
  122. "sa-item": httpVueLoader('../../sa-frame/com/sa-item.vue'),
  123. "sa-td": httpVueLoader('../../sa-frame/com/sa-td.vue')
  124. },
  125. el: '.vue-box',
  126. data: {
  127. id: sa.p('id', ''),
  128. p: { // 查询参数
  129. business: 0,
  130. pageNo: 1, // 当前页
  131. pageSize: 50, // 页大小
  132. sortType: 0 // 排序方式
  133. },
  134. id: sa.p('id', 0), // 获取超链接中的id参数(0=添加,非0=修改)
  135. m: {
  136. id: '', // 主键
  137. carNo: '',
  138. carSize: '',
  139. carType: '载重',
  140. carWeight: '',
  141. itemTypeId: ''
  142. }, // 实体对象
  143. itemTypeList: [],
  144. items: [],
  145. businessItems:[],
  146. checkList: [],
  147. customerList:[],
  148. carTypeList:[],
  149. currentCustomerId:''
  150. },
  151. computed: {
  152. totalPrice() {
  153. let checkList = this.checkList;
  154. let items = this.items
  155. .filter(obj => checkList.indexOf(obj.id) !== -1);
  156. let price = 0;
  157. for (let i in items) {
  158. let item = items[i];
  159. price = price + item.price * item.num;
  160. }
  161. return price;
  162. }
  163. },
  164. methods: {
  165. getCustomer() {
  166. sa.ajax('/TbCostomer/getCurrentCustomerId', function(resp) {
  167. let id = resp.data;
  168. if (id == 1) {} else {
  169. this.m.customerId = id;
  170. }
  171. this.currentCustomerId = id;
  172. }.bind(this));
  173. },
  174. carTypeChange(v){
  175. this.getItems();
  176. },
  177. getItemType() {
  178. sa.ajax('/TbItem/getItemType', function(resp) {
  179. this.carTypeList= resp.data;
  180. }.bind(this))
  181. },
  182. getCustomerList() {
  183. sa.ajax('/TbCostomer/getList', {
  184. pageNo: 1,
  185. pageSize: 30,
  186. sortType:20,
  187. judgeStatus: 2
  188. }, function(res) {
  189. this.customerList = res.data; // 数据
  190. }.bind(this));
  191. },
  192. getItemTypeList() {
  193. sa.ajax('/TbItemType/getList', sa.removeNull(this.p), function(res) {
  194. let list = res.data;
  195. this.itemTypeList = list;
  196. this.getItems();
  197. }.bind(this));
  198. },
  199. getItems() {
  200. sa.ajax('/TbItem/getTypeItemList', {
  201. pageNo: 1,
  202. pageSize: 30,
  203. typeId: this.m.itemTypeId
  204. }, function(resp) {
  205. let list = resp.data;
  206. if(this.m.carType){
  207. list=list.filter(obj=>obj.itemType&&obj.itemType.indexOf(this.m.carType)!==-1);
  208. }
  209. this.items = list;
  210. let businessItems=this.businessItems;
  211. list.forEach(obj=>{
  212. businessItems.forEach(item=>{
  213. if(obj.id==item.itemId){
  214. obj.remark=item.remark;
  215. obj.num=item.num;
  216. }
  217. })
  218. })
  219. }.bind(this))
  220. },
  221. ok() {
  222. let m = this.m;
  223. if (!m.carNo) {
  224. sa.error('请输入车牌号')
  225. return false;
  226. }
  227. let checkList = this.checkList;
  228. let itemList = this.items;
  229. let list = itemList.filter(obj => checkList.indexOf(obj.id) !== -1);
  230. m.itemJson = JSON.stringify(list);
  231. m.items=null;
  232. sa.ajax('/api/editOtherBusiness', sa.removeNull(m), function(resp) {
  233. parent.app.f5(); // 刷新父页面列表
  234. sa.closeCurrIframe(); // 关闭本页
  235. }.bind(this))
  236. },
  237. getOtherBusinessById() {
  238. sa.ajax('/TbBusiness/getOtherBusinessById', {
  239. id: this.id
  240. }, function(resp) {
  241. let data=resp.data;
  242. this.m = data
  243. this.businessItems=data.items;
  244. this.checkList=data.items.map(obj=>obj.itemId);
  245. this.getItemTypeList();
  246. this.getItemType();
  247. }.bind(this))
  248. }
  249. },
  250. mounted: function() {
  251. this.getCustomer();
  252. this.getOtherBusinessById();
  253. this.getCustomerList();
  254. }
  255. })
  256. </script>
  257. </body>
  258. </html>