tb-goods-list.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397
  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="../../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. </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.name"></sa-item>
  25. <el-button type="primary" icon="el-icon-search" @click="p.pageNo = 1; f5()">查询</el-button>
  26. <el-button type="info" icon="el-icon-search" @click="p.name = ''; f5()">重置</el-button>
  27. <el-button v-if="sa.isAuth('tb-goods-add')" size="mini" type="primary" @click="add()">增加</el-button>
  28. <br />
  29. </el-form>
  30. <!-- ------------- 数据列表 ------------- -->
  31. <el-table class="data-table" ref="data-table" :data="dataList">
  32. <el-table-column type="index" width="50">
  33. </el-table-column>
  34. <sa-td name="业务名称" prop="name" width="120"></sa-td>
  35. <sa-td name="编号" prop="code" ></sa-td>
  36. <sa-td name="载重" prop="needWeight" type="switch" :jv="{0: '选填[#005500]', 1: '必填[#ff0000]'}"
  37. @change="s => updateNeedWeight(s.row)" width="90"></sa-td>
  38. <sa-td name="规格" prop="needCarSize" type="switch" :jv="{0: '选填[#005500]', 1: '必填[#ff0000]'}"
  39. @change="s => updateNeedCarSize(s.row)" width="90"></sa-td>
  40. <sa-td name="车辆" prop="mulCar" type="switch" :jv="{0: '单辆[#005500]', 1: '多辆[#ff0000]'}"
  41. @change="s => updateMulCar(s.row)" width="90"></sa-td>
  42. <sa-td name="客户" prop="needCustomer" type="switch" :jv="{0: '选填[#005500]', 1: '必填[#ff0000]'}"
  43. @change="s => updateNeedCustomer(s.row)" width="90"></sa-td>
  44. <sa-td name="合作伙伴" prop="needPartner" type="switch" :jv="{0: '选填[#005500]', 1: '必填[#ff0000]'}"
  45. @change="s => updateNeedPartner(s.row)" width="90"></sa-td>
  46. <sa-td name="货物" prop="needOwner" type="switch" :jv="{0: '选填[#005500]', 1: '必填[#ff0000]'}"
  47. @change="s => updateNeedOwner(s.row)" width="90"></sa-td>
  48. <sa-td name="件数" prop="needOperateTime" type="switch" :jv="{0: '选填[#005500]', 1: '必填[#ff0000]'}"
  49. @change="s => updateNeedOperateTime(s.row)" width="90"></sa-td>
  50. <el-table-column label="空车离场限制" width="140">
  51. <template slot-scope="s">
  52. <el-select v-model="s.row.chinaCarLeave" @change="chinaLeaveChange(s.row)">
  53. <el-option v-for="item in leaveSetting" :key="item.id" :value="item.id"
  54. :label="item.name">
  55. </el-option>
  56. </el-select>
  57. </template>
  58. </el-table-column>
  59. <el-table-column label="载重车离场限制" width="140">
  60. <template slot-scope="s">
  61. <el-select v-model="s.row.vietnamCarLeave" @change="vietnamLeaveChange(s.row)">
  62. <el-option v-for="item in leaveSetting" :key="item.id" :value="item.id"
  63. :label="item.name">
  64. </el-option>
  65. </el-select>
  66. </template>
  67. </el-table-column>
  68. <!-- <el-table-column label="预充值自动扣费类型" width="140">
  69. <template slot-scope="s">
  70. <el-select v-model="s.row.autoDeductionType" @change="deductionTypeChange(s.row)">
  71. <el-option v-for="item in deductionTypeList" :key="item.id" :value="item.id"
  72. :label="item.name">
  73. </el-option>
  74. </el-select>
  75. </template>
  76. </el-table-column> -->
  77. <sa-td name="创建时间" prop="createTime" width="160"></sa-td>
  78. <el-table-column label="操作" fixed="right" width="230">
  79. <template slot-scope="s">
  80. <el-button v-if="sa.isAuth('tb-goods-item-type')" class="c-btn" type="primary"
  81. @click="businessFn(s.row)">收费项
  82. </el-button>
  83. <el-button v-if="sa.isAuth('tb-goods-edit')" class="c-btn" type="primary"
  84. icon="el-icon-edit" @click="update(s.row)">修改
  85. </el-button>
  86. <el-button v-if="sa.isAuth('tb-goods-del')" class="c-btn" type="danger"
  87. icon="el-icon-delete" @click="del(s.row)">删除
  88. </el-button>
  89. </template>
  90. </el-table-column>
  91. </el-table>
  92. <!-- ------------- 分页 ------------- -->
  93. <sa-item type="page" :curr.sync="p.pageNo" :size.sync="p.pageSize" :total="dataCount" @change="f5()">
  94. </sa-item>
  95. </div>
  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. pageNo: 1, // 当前页
  108. pageSize: 10, // 页大小
  109. sortType: 0 // 排序方式
  110. },
  111. dataCount: 0,
  112. dataList: [], // 数据集合
  113. leaveSetting: [],
  114. deductionTypeList: []
  115. },
  116. methods: {
  117. businessFn(data) {
  118. sa.showIframe('收费项', '../relation-goods-type/relation-goods-type-list.html?goodsId=' + data.id,
  119. '1080px', '90%');
  120. },
  121. // 刷新
  122. f5: function() {
  123. sa.ajax('/TbGoods/getList', sa.removeNull(this.p), function(res) {
  124. this.dataList = res.data; // 数据
  125. this.dataCount = res.dataCount; // 数据总数
  126. sa.f5TableHeight(); // 刷新表格高度
  127. }.bind(this));
  128. },
  129. getLeaveSetting: function() {
  130. sa.ajax('/TbGoods/getLeaveSetting', function(res) {
  131. this.leaveSetting = res.data; // 数据
  132. }.bind(this));
  133. },
  134. getDeductionTypeList: function() {
  135. sa.ajax('/TbGoods/getDeductionTypeList', function(res) {
  136. this.deductionTypeList = res.data; // 数据
  137. }.bind(this));
  138. },
  139. chinaLeaveChange(v) {
  140. let obj = {
  141. id: v.id,
  142. chinaCarLeave: v.chinaCarLeave
  143. }
  144. sa.ajax('/TbGoods/chinaLeaveChange', obj, function(resp) {
  145. }.bind(this))
  146. },
  147. vietnamLeaveChange(v) {
  148. let obj = {
  149. id: v.id,
  150. vietnamCarLeave: v.vietnamCarLeave
  151. }
  152. sa.ajax('/TbGoods/vietnamLeaveChange', obj, function(resp) {
  153. }.bind(this))
  154. },
  155. deductionTypeChange(v) {
  156. let obj = {
  157. id: v.id,
  158. autoDeductionType: v.autoDeductionType
  159. }
  160. sa.ajax('/TbGoods/autoDeductionType', obj, function(resp) {
  161. }.bind(this))
  162. },
  163. updateMulCar(data) {
  164. let obj = {
  165. id: data.id,
  166. mulCar: data.mulCar
  167. }
  168. sa.ajax('/TbGoods/updateMulCar', obj, function(resp) {
  169. }.bind(this))
  170. },
  171. updateNeedOwner(v) {
  172. let obj = {
  173. id: v.id,
  174. value: v.needOwner
  175. }
  176. sa.ajax('/TbGoods/updateNeedOwner', obj, function(resp) {
  177. }.bind(this))
  178. },
  179. updateNeedPartner(v){
  180. let obj = {
  181. id: v.id,
  182. value: v.needPartner
  183. }
  184. sa.ajax('/TbGoods/updateNeedPartner', obj, function(resp) {
  185. }.bind(this))
  186. },
  187. updateNeedCustomer(v) {
  188. let obj = {
  189. id: v.id,
  190. value: v.needCustomer
  191. }
  192. sa.ajax('/TbGoods/updateNeedCustomer', obj, function(resp) {
  193. }.bind(this))
  194. },
  195. // 查看
  196. get: function(data) {
  197. sa.showIframe('数据详情', 'tb-goods-info.html?id=' + data.id, '1050px', '90%');
  198. },
  199. // 查看 - 根据选中的
  200. getBySelect: function(data) {
  201. var selection = this.$refs['data-table'].selection;
  202. if (selection.length == 0) {
  203. return sa.msg('请选择一条数据')
  204. }
  205. this.get(selection[0]);
  206. },
  207. // 修改
  208. update: function(data) {
  209. sa.showIframe('修改数据', 'tb-goods-add.html?id=' + data.id, '450px', '50%');
  210. },
  211. // 新增
  212. add: function(data) {
  213. sa.showIframe('新增数据', 'tb-goods-add.html?id=-1', '450px', '50%');
  214. },
  215. // 删除
  216. del: function(data) {
  217. sa.confirm('是否删除,此操作不可撤销', function() {
  218. sa.ajax('/TbGoods/delete?id=' + data.id, function(res) {
  219. sa.arrayDelete(this.dataList, data);
  220. sa.ok('删除成功');
  221. sa.f5TableHeight(); // 刷新表格高度
  222. }.bind(this))
  223. }.bind(this));
  224. },
  225. // 批量删除
  226. deleteByIds: function() {
  227. // 获取选中元素的id列表
  228. let selection = this.$refs['data-table'].selection;
  229. let ids = sa.getArrayField(selection, 'id');
  230. if (selection.length == 0) {
  231. return sa.msg('请至少选择一条数据')
  232. }
  233. // 提交删除
  234. sa.confirm('是否批量删除选中数据?此操作不可撤销', function() {
  235. sa.ajax('/TbGoods/deleteByIds', {
  236. ids: ids.join(',')
  237. }, function(res) {
  238. sa.arrayDelete(this.dataList, selection);
  239. sa.ok('删除成功');
  240. sa.f5TableHeight(); // 刷新表格高度
  241. }.bind(this))
  242. }.bind(this));
  243. },
  244. // 改 - 状态(1=禁用,2=启用)
  245. updateStatus: function(data) {
  246. // 声明变量记录是否成功
  247. var isOk = false;
  248. var oldValue = data.status;
  249. var ajax = sa.ajax('/TbGoods/updateStatus', {
  250. id: data.id,
  251. value: data.status
  252. }, function(res) {
  253. isOk = true;
  254. sa.msg('修改成功');
  255. }.bind(this));
  256. // 如果未能修改成功, 则回滚
  257. $.when(ajax).done(function() {
  258. if (isOk == false) {
  259. data.status = oldValue;
  260. }
  261. })
  262. },
  263. // 改 - 载重是否必填(1=是,0=否)
  264. updateNeedWeight: function(data) {
  265. // 声明变量记录是否成功
  266. var isOk = false;
  267. var oldValue = data.needWeight;
  268. var ajax = sa.ajax('/TbGoods/updateNeedWeight', {
  269. id: data.id,
  270. value: data.needWeight
  271. }, function(res) {
  272. isOk = true;
  273. sa.msg('修改成功');
  274. }.bind(this));
  275. // 如果未能修改成功, 则回滚
  276. $.when(ajax).done(function() {
  277. if (isOk == false) {
  278. data.status = oldValue;
  279. }
  280. })
  281. },
  282. // 改 - 规格是否必填(1=是,0=否)
  283. updateNeedCarSize: function(data) {
  284. // 声明变量记录是否成功
  285. var isOk = false;
  286. var oldValue = data.needCarSize;
  287. var ajax = sa.ajax('/TbGoods/updateNeedCarSize', {
  288. id: data.id,
  289. value: data.needCarSize
  290. }, function(res) {
  291. isOk = true;
  292. sa.msg('修改成功');
  293. }.bind(this));
  294. // 如果未能修改成功, 则回滚
  295. $.when(ajax).done(function() {
  296. if (isOk == false) {
  297. data.status = oldValue;
  298. }
  299. })
  300. },
  301. // 改 - 规格是否必填(1=是,0=否)
  302. updateChinaCarPay: function(data) {
  303. // 声明变量记录是否成功
  304. var isOk = false;
  305. var oldValue = data.chinaCarPay;
  306. var ajax = sa.ajax('/TbGoods/updateChinaCarPay', {
  307. id: data.id,
  308. value: data.chinaCarPay
  309. }, function(res) {
  310. isOk = true;
  311. sa.msg('修改成功');
  312. }.bind(this));
  313. // 如果未能修改成功, 则回滚
  314. $.when(ajax).done(function() {
  315. if (isOk == false) {
  316. data.status = oldValue;
  317. }
  318. })
  319. },
  320. // 改 - 规格是否必填(1=是,0=否)
  321. updateVietnamCarPay: function(data) {
  322. // 声明变量记录是否成功
  323. var isOk = false;
  324. var oldValue = data.vietnamCarPay;
  325. var ajax = sa.ajax('/TbGoods/updateVietnamCarPay', {
  326. id: data.id,
  327. value: data.vietnamCarPay
  328. }, function(res) {
  329. isOk = true;
  330. sa.msg('修改成功');
  331. }.bind(this));
  332. // 如果未能修改成功, 则回滚
  333. $.when(ajax).done(function() {
  334. if (isOk == false) {
  335. data.status = oldValue;
  336. }
  337. })
  338. },
  339. // 改 - 申报单是否必填(1=是,0=否)
  340. updateNeedDeclare: function(data) {
  341. // 声明变量记录是否成功
  342. var isOk = false;
  343. var oldValue = data.needDeclare;
  344. var ajax = sa.ajax('/TbGoods/updateNeedDeclare', {
  345. id: data.id,
  346. value: data.needDeclare
  347. }, function(res) {
  348. isOk = true;
  349. sa.msg('修改成功');
  350. }.bind(this));
  351. // 如果未能修改成功, 则回滚
  352. $.when(ajax).done(function() {
  353. if (isOk == false) {
  354. data.status = oldValue;
  355. }
  356. })
  357. },
  358. // 改 - 申报时间是否必填(1=是,0=否)
  359. updateNeedOperateTime: function(data) {
  360. // 声明变量记录是否成功
  361. var isOk = false;
  362. var oldValue = data.needOperateTime;
  363. var ajax = sa.ajax('/TbGoods/updateNeedOperateTime', {
  364. id: data.id,
  365. value: data.needOperateTime
  366. }, function(res) {
  367. isOk = true;
  368. sa.msg('修改成功');
  369. }.bind(this));
  370. // 如果未能修改成功, 则回滚
  371. $.when(ajax).done(function() {
  372. if (isOk == false) {
  373. data.status = oldValue;
  374. }
  375. })
  376. },
  377. },
  378. created: function() {
  379. this.f5();
  380. this.getLeaveSetting();
  381. this.getDeductionTypeList();
  382. sa.onInputEnter();
  383. }
  384. })
  385. </script>
  386. </body>
  387. </html>