dd2d65d12cf44a48a65194f27cb1a7ac28b4333d.svn-base 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456
  1. <template>
  2. <div class="app-container">
  3. <el-tabs v-model="activeName" @tab-click="handleTabClick">
  4. <el-tab-pane label="库存统计" name="first">
  5. <div class="search">
  6. <el-date-picker v-model="tab.table.getdataListParm.parammaps.inputDatetime" :clearable="false" class="inputDatetime filter-item" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="float: left;width: 250px;margin-bottom:10px;" />
  7. <el-input v-model="tab.table.getdataListParm.parammaps.feedname" class="filter-item" style="float: left;width: 245px;margin-bottom:10px;" placeholder="饲料名称" />
  8. <el-button class="successBorder" style="float: left;margin-left: 10px;margin-bottom:10px;" @click="handleSearch('first')">查询</el-button>
  9. <el-button class="export" style="float: right;margin-right: 10px;margin-bottom:10px;" @click="handleExport">导出</el-button>
  10. </div>
  11. <div class="table">
  12. <el-table
  13. :key="tab.table.tableKey"
  14. v-loading="tab.table.listLoading"
  15. element-loading-text="给我一点时间"
  16. :data="tab.table.list"
  17. border
  18. fit
  19. highlight-current-row
  20. style="width: 100%;"
  21. :row-style="rowStyle"
  22. :cell-style="cellStyle"
  23. class="elTable table-fixed"
  24. >
  25. <el-table-column label="饲料名称" min-width="130px" align="center">
  26. <template slot-scope="scope">
  27. <span>{{ scope.row.feedname }}</span>
  28. </template>
  29. </el-table-column>
  30. <el-table-column label="期初" min-width="130px" align="center">
  31. <el-table-column prop="startsum" align="center" label="期初库存(kg)" min-width="120" />
  32. <el-table-column prop="startprice" align="center" label="期初金额(元)" min-width="120" />
  33. </el-table-column>
  34. <el-table-column label="用量" min-width="110px" align="center">
  35. <el-table-column prop="laidsum" align="center" label="入库重量(kg)" min-width="120" />
  36. <el-table-column prop="usesumXT" align="center" label="系统出库重量(kg)" min-width="120" />
  37. <el-table-column prop="usesumRG" align="center" label="人工用料重量(kg)" min-width="120" />
  38. <el-table-column prop="usesumXH" align="center" label="损耗重量(kg)" min-width="120" />
  39. </el-table-column>
  40. <el-table-column label="期末" min-width="130px" align="center">
  41. <el-table-column prop="stopsum" align="center" label="期末库存(kg)" min-width="120" />
  42. <el-table-column prop="stopprice" align="center" label="期末金额(元)" min-width="120" />
  43. </el-table-column>
  44. </el-table>
  45. <pagination v-show="tab.table.total>=0" :total="tab.table.total" :page.sync="tab.table.getdataListParm.offset" :limit.sync="tab.table.getdataListParm.pagecount" @pagination="getTabList" />
  46. </div>
  47. </el-tab-pane>
  48. <el-tab-pane label="用料分析" name="second">
  49. <div class="search">
  50. <el-date-picker v-model="tab2.table.getdataListParm.parammaps.inputDatetime" :clearable="false" class="inputDatetime filter-item" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 250px;" />
  51. <span style="margin-left: 10px;">统计类型:</span>
  52. <el-radio v-model="tab2.radio" label="1" @change="changeRadio2">牲畜类别</el-radio>
  53. <el-radio v-model="tab2.radio" label="2" @change="changeRadio2">栏舍名称</el-radio>
  54. <el-radio v-model="tab2.radio" label="3" @change="changeRadio2">日期</el-radio>
  55. <el-radio v-model="tab2.radio" label="4" @change="changeRadio2">TMR设备编号</el-radio>
  56. <el-radio v-model="tab2.radio" label="5" @change="changeRadio2">班次</el-radio>
  57. <el-radio v-model="tab2.radio" label="6" @change="changeRadio2">车次</el-radio>
  58. <el-input v-if="tab2.isRadio1" v-model="tab2.table.getdataListParm.parammaps.fname" class="filter-item" style="width: 245px;" placeholder="牲畜类别" />
  59. <el-input v-if="tab2.isRadio2" v-model="tab2.table.getdataListParm.parammaps.fname" class="filter-item" style="width: 245px;" placeholder="栏舍名称" />
  60. <el-input v-if="tab2.isRadio3" v-model="tab2.table.getdataListParm.parammaps.fname" class="filter-item" style="width: 245px;" placeholder="日期" />
  61. <el-input v-if="tab2.isRadio4" v-model="tab2.table.getdataListParm.parammaps.fname" class="filter-item" style="width: 245px;" placeholder="TMR设备编号" />
  62. <el-input v-if="tab2.isRadio5" v-model="tab2.table.getdataListParm.parammaps.fname" class="filter-item" style="width: 245px;" placeholder="班次" />
  63. <el-input v-if="tab2.isRadio6" v-model="tab2.table.getdataListParm.parammaps.fname" class="filter-item" style="width: 245px;" placeholder="车次" />
  64. <el-button class="successBorder" @click="handleSearch('second')">查询</el-button>
  65. </div>
  66. <el-table
  67. :key="tab2.table.tableKey"
  68. v-loading="tab2.table.listLoading"
  69. element-loading-text="给我一点时间"
  70. :data="tab2.table.list"
  71. border
  72. fit
  73. highlight-current-row
  74. style="width: 100%;"
  75. :row-style="rowStyle"
  76. :cell-style="cellStyle"
  77. class="elTable table-fixed"
  78. >
  79. <el-table-column v-for="item in tab2.table.tableConfig" align="center" :label="item.label" :prop="item.prop">
  80. <el-table-column v-for="item1 in item.children" v-if="item.children || item.children.length>0" align="center" :label="item1.label" :prop="item1.prop">
  81. <el-table-column v-for="item2 in item1.children" v-if="item1.children || item1.children.length>0" :label="item2.label" :prop="item2.prop" />
  82. </el-table-column>
  83. </el-table-column>
  84. </el-table>
  85. </el-tab-pane>
  86. <el-tab-pane label="价格分析" name="third">
  87. <div class="search">
  88. <el-date-picker v-model="tab3.table.getdataListParm.parammaps.inputDatetime" class="inputDatetime filter-item" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 250px;" />
  89. <span style="margin-left: 10px;">统计类型:</span>
  90. <el-radio v-model="tab3.radio" label="1" @change="changeRadio3">牲畜类别</el-radio>
  91. <el-radio v-model="tab3.radio" label="2" @change="changeRadio3">栏舍名称</el-radio>
  92. <el-radio v-model="tab3.radio" label="3" @change="changeRadio3">日期</el-radio>
  93. <el-radio v-model="tab3.radio" label="4" @change="changeRadio3">TMR设备编号</el-radio>
  94. <el-input v-if="tab3.isRadio1" v-model="tab3.table.getdataListParm.parammaps.fname" class="filter-item" style="width: 245px;" placeholder="牲畜类别" />
  95. <el-input v-if="tab3.isRadio2" v-model="tab3.table.getdataListParm.parammaps.fname" class="filter-item" style="width: 245px;" placeholder="栏舍名称" />
  96. <el-input v-if="tab3.isRadio3" v-model="tab3.table.getdataListParm.parammaps.fname" class="filter-item" style="width: 245px;" placeholder="日期" />
  97. <el-input v-if="tab3.isRadio4" v-model="tab3.table.getdataListParm.parammaps.fname" class="filter-item" style="width: 245px;" placeholder="TMR设备编号" />
  98. <el-button class="successBorder" @click="handleSearch('third')">查询</el-button>
  99. </div>
  100. <el-table
  101. :key="tab3.table.tableKey"
  102. v-loading="tab3.table.listLoading"
  103. element-loading-text="给我一点时间"
  104. :data="tab3.table.list"
  105. border
  106. fit
  107. highlight-current-row
  108. style="width: 100%;"
  109. :row-style="rowStyle"
  110. :cell-style="cellStyle"
  111. class="elTable table-fixed"
  112. >
  113. <el-table-column v-for="item in tab3.table.tableConfig" align="center" :label="item.label" :prop="item.prop">
  114. <el-table-column v-for="item1 in item.children" v-if="item.children || item.children.length>0" align="center" :label="item1.label" :prop="item1.prop">
  115. <el-table-column v-for="item2 in item1.children" v-if="item1.children || item1.children.length>0" :label="item2.label" :prop="item2.prop" />
  116. </el-table-column>
  117. </el-table-column>
  118. </el-table>
  119. </el-tab-pane>
  120. </el-tabs>
  121. </div>
  122. </div>
  123. </template>
  124. <script>
  125. import { GetDataByName, GetReportform } from '@/api/common'
  126. import Cookies from 'js-cookie'
  127. import { parseTime } from '@/utils/index.js'
  128. import Pagination from '@/components/Pagination'
  129. export default {
  130. name: 'InventoryManagement',
  131. components: { Pagination },
  132. data() {
  133. return {
  134. fileComment: [{ 'label': '商务文件评分', 'children': [{ 'label': '1' }, { 'label': '2' }, { 'label': '管理员' }] }],
  135. activeName: 'first',
  136. tab: {
  137. chartDate: [],
  138. table: {
  139. getdataListParm: {
  140. name: 'getfsStaticlist',
  141. page: 1,
  142. offset: 1,
  143. pagecount: 10,
  144. returntype: 'Map',
  145. parammaps: {
  146. pastureid: Cookies.get('pastureid'),
  147. startTime: parseTime(new Date(), '{y}-{m}-{d}'),
  148. stopTime: parseTime(new Date(), '{y}-{m}-{d}'),
  149. inputDatetime: [new Date(), new Date()],
  150. feedname: ''
  151. }
  152. },
  153. tableKey: 1,
  154. list: [],
  155. total: 0,
  156. listLoading: true
  157. }
  158. },
  159. tab2: {
  160. chartDate: [],
  161. table: {
  162. getdataListParm: {
  163. name: 'getMaterialAnalysisSC',
  164. page: 1,
  165. offset: 1,
  166. pagecount: '',
  167. returntype: 'Map',
  168. parammaps: {
  169. pastureid: Cookies.get('pastureid'),
  170. startTime: parseTime(new Date(), '{y}-{m}-{d}'),
  171. stopTime: parseTime(new Date(), '{y}-{m}-{d}'),
  172. inputDatetime: [new Date(), new Date()],
  173. fname: ''
  174. }
  175. },
  176. tableKey: 1,
  177. list: [],
  178. tableConfig: [],
  179. total: 0,
  180. listLoading: true
  181. },
  182. radio: '1',
  183. isRadio1: true,
  184. isRadio2: false,
  185. isRadio3: false,
  186. isRadio4: false,
  187. isRadio5: false,
  188. isRadio6: false
  189. },
  190. tab3: {
  191. chartDate: [],
  192. table: {
  193. getdataListParm: {
  194. name: 'getPriceAnalysisSC',
  195. page: 1,
  196. offset: 1,
  197. pagecount: 10,
  198. returntype: 'Map',
  199. parammaps: {
  200. pastureid: Cookies.get('pastureid'),
  201. startTime: parseTime(new Date(), '{y}-{m}-{d}'),
  202. stopTime: parseTime(new Date(), '{y}-{m}-{d}'),
  203. inputDatetime: [new Date(), new Date()],
  204. fname: ''
  205. }
  206. },
  207. tableKey: 1,
  208. list: [],
  209. tableConfig: [],
  210. total: 0,
  211. listLoading: true
  212. },
  213. radio: '1',
  214. isRadio1: true,
  215. isRadio2: false,
  216. isRadio3: false,
  217. isRadio4: false
  218. },
  219. rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
  220. cellStyle: { padding: 0 + 'px' }
  221. }
  222. },
  223. created() {
  224. this.getTabList()
  225. this.getTimeFn()
  226. },
  227. methods: {
  228. getTimeFn() {
  229. const that = this
  230. const end = new Date()
  231. const start = new Date()
  232. start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
  233. that.tab.chartDate[0] = parseTime(start, '{y}-{m}-{d}')
  234. that.tab.chartDate[1] = parseTime(end, '{y}-{m}-{d}')
  235. that.tab.table.getdataListParm.parammaps.inputDatetime[0] = parseTime(start, '{y}-{m}-{d}')
  236. that.tab.table.getdataListParm.parammaps.inputDatetime[1] = parseTime(end, '{y}-{m}-{d}')
  237. that.tab.table.getdataListParm.parammaps.startTime = parseTime(start, '{y}-{m}-{d}')
  238. that.tab.table.getdataListParm.parammaps.stopTime = parseTime(end, '{y}-{m}-{d}')
  239. that.tab2.chartDate[0] = parseTime(start, '{y}-{m}-{d}')
  240. that.tab2.chartDate[1] = parseTime(end, '{y}-{m}-{d}')
  241. that.tab2.table.getdataListParm.parammaps.inputDatetime[0] = parseTime(start, '{y}-{m}-{d}')
  242. that.tab2.table.getdataListParm.parammaps.inputDatetime[1] = parseTime(end, '{y}-{m}-{d}')
  243. that.tab2.table.getdataListParm.parammaps.startTime = parseTime(start, '{y}-{m}-{d}')
  244. that.tab2.table.getdataListParm.parammaps.stopTime = parseTime(end, '{y}-{m}-{d}')
  245. that.tab3.chartDate[0] = parseTime(start, '{y}-{m}-{d}')
  246. that.tab3.chartDate[1] = parseTime(end, '{y}-{m}-{d}')
  247. that.tab3.table.getdataListParm.parammaps.inputDatetime[0] = parseTime(start, '{y}-{m}-{d}')
  248. that.tab3.table.getdataListParm.parammaps.inputDatetime[1] = parseTime(end, '{y}-{m}-{d}')
  249. that.tab3.table.getdataListParm.parammaps.startTime = parseTime(start, '{y}-{m}-{d}')
  250. that.tab3.table.getdataListParm.parammaps.stopTime = parseTime(end, '{y}-{m}-{d}')
  251. },
  252. handleTabClick() {
  253. if (this.activeName == 'first') {
  254. this.getTabList()
  255. } else if (this.activeName == 'second') {
  256. this.getTab2List()
  257. } else if (this.activeName == 'third') {
  258. this.getTab3List()
  259. }
  260. },
  261. getTabList() {
  262. this.tab.table.listLoading = true
  263. GetDataByName(this.tab.table.getdataListParm).then(response => {
  264. console.log('库存统计table数据', response.data.list)
  265. if (response.data.list !== null) {
  266. this.tab.table.list = response.data.list
  267. this.tab.table.total = response.data.total
  268. } else {
  269. this.tab.table.list = []
  270. }
  271. setTimeout(() => {
  272. this.tab.table.listLoading = false
  273. }, 100)
  274. })
  275. },
  276. handleSearch(item) {
  277. if (item == 'first') {
  278. if (this.tab.table.getdataListParm.parammaps.inputDatetime !== '' && this.tab.table.getdataListParm.parammaps.inputDatetime !== null) {
  279. this.tab.table.getdataListParm.parammaps.startTime = parseTime(this.tab.table.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}-{d}')
  280. this.tab.table.getdataListParm.parammaps.stopTime = parseTime(this.tab.table.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}-{d}')
  281. } else {
  282. this.tab.table.getdataListParm.parammaps.inputDatetime = ''
  283. this.tab.table.getdataListParm.parammaps.startTime = ''
  284. this.tab.table.getdataListParm.parammaps.stopTime = ''
  285. }
  286. this.getTabList()
  287. } else if (item == 'second') {
  288. if (this.tab2.table.getdataListParm.parammaps.inputDatetime !== '' && this.tab2.table.getdataListParm.parammaps.inputDatetime !== null) {
  289. this.tab2.table.getdataListParm.parammaps.startTime = parseTime(this.tab2.table.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}-{d}')
  290. this.tab2.table.getdataListParm.parammaps.stopTime = parseTime(this.tab2.table.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}-{d}')
  291. } else {
  292. this.tab2.table.getdataListParm.parammaps.inputDatetime = ''
  293. this.tab2.table.getdataListParm.parammaps.startTime = ''
  294. this.tab2.table.getdataListParm.parammaps.stopTime = ''
  295. }
  296. this.getTab2List()
  297. } else if (item == 'third') {
  298. if (this.tab3.table.getdataListParm.parammaps.inputDatetime !== '' && this.tab3.table.getdataListParm.parammaps.inputDatetime !== null) {
  299. this.tab3.table.getdataListParm.parammaps.startTime = parseTime(this.tab3.table.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}-{d}')
  300. this.tab3.table.getdataListParm.parammaps.stopTime = parseTime(this.tab3.table.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}-{d}')
  301. } else {
  302. this.tab3.table.getdataListParm.parammaps.inputDatetime = ''
  303. this.tab3.table.getdataListParm.parammaps.startTime = ''
  304. this.tab3.table.getdataListParm.parammaps.stopTime = ''
  305. }
  306. this.getTab3List()
  307. }
  308. },
  309. handleExport() {},
  310. // 用料分析
  311. getTab2List() {
  312. this.tab2.table.listLoading = true
  313. GetReportform(this.tab2.table.getdataListParm).then(response => {
  314. console.log('库存统计-用料分析', response.data.list)
  315. if (response.data.list !== null) {
  316. this.tab2.table.list = response.data.list.data1
  317. this.tab2.table.tableConfig = response.data.list.data2
  318. this.tab2.table.total = response.data.total
  319. } else {
  320. this.tab2.table.list = []
  321. }
  322. setTimeout(() => {
  323. this.tab2.table.listLoading = false
  324. }, 100)
  325. })
  326. },
  327. changeRadio2() {
  328. console.log(this.tab2.radio)
  329. if (this.tab2.radio == '1') {
  330. this.tab2.isRadio1 = true,
  331. this.tab2.isRadio2 = false,
  332. this.tab2.isRadio3 = false,
  333. this.tab2.isRadio4 = false,
  334. this.tab2.isRadio5 = false,
  335. this.tab2.isRadio6 = false,
  336. this.tab2.table.getdataListParm.name = 'getMaterialAnalysisSC'
  337. this.tab2.table.getdataListParm.offset = 1
  338. this.getTab2List()
  339. } else if (this.tab2.radio == '2') {
  340. this.tab2.isRadio1 = false,
  341. this.tab2.isRadio2 = true,
  342. this.tab2.isRadio3 = false,
  343. this.tab2.isRadio4 = false,
  344. this.tab2.isRadio5 = false,
  345. this.tab2.isRadio6 = false,
  346. this.tab2.table.getdataListParm.name = 'getMaterialAnalysisLS'
  347. this.tab2.table.getdataListParm.offset = 1
  348. this.getTab2List()
  349. } else if (this.tab2.radio == '3') {
  350. this.tab2.isRadio1 = false,
  351. this.tab2.isRadio2 = false,
  352. this.tab2.isRadio3 = true,
  353. this.tab2.isRadio4 = false,
  354. this.tab2.isRadio5 = false,
  355. this.tab2.isRadio6 = false,
  356. this.tab2.table.getdataListParm.name = 'getMaterialAnalysisRQ'
  357. this.tab2.table.getdataListParm.offset = 1
  358. this.getTab2List()
  359. } else if (this.tab2.radio == '4') {
  360. this.tab2.isRadio1 = false,
  361. this.tab2.isRadio2 = false,
  362. this.tab2.isRadio3 = false,
  363. this.tab2.isRadio4 = true,
  364. this.tab2.isRadio5 = false,
  365. this.tab2.isRadio6 = false,
  366. this.tab2.table.getdataListParm.name = 'getMaterialAnalysisTMR'
  367. this.tab2.table.getdataListParm.offset = 1
  368. this.getTab2List()
  369. } else if (this.tab2.radio == '5') {
  370. this.tab2.isRadio1 = false,
  371. this.tab2.isRadio2 = false,
  372. this.tab2.isRadio3 = false,
  373. this.tab2.isRadio4 = false,
  374. this.tab2.isRadio5 = true,
  375. this.tab2.isRadio6 = false,
  376. this.tab2.table.getdataListParm.name = 'getMaterialAnalysisBC'
  377. this.tab2.table.getdataListParm.offset = 1
  378. this.getTab2List()
  379. } else if (this.tab2.radio == '6') {
  380. this.tab2.isRadio1 = false,
  381. this.tab2.isRadio2 = false,
  382. this.tab2.isRadio3 = false,
  383. this.tab2.isRadio4 = false,
  384. this.tab2.isRadio5 = false,
  385. this.tab2.isRadio6 = true,
  386. this.tab2.table.getdataListParm.name = 'getMaterialAnalysisCC'
  387. this.tab2.table.getdataListParm.offset = 1
  388. this.getTab2List()
  389. }
  390. },
  391. // 价格分析
  392. getTab3List() {
  393. this.tab3.table.listLoading = true
  394. GetReportform(this.tab3.table.getdataListParm).then(response => {
  395. console.log('库存统计-价格分析', response.data.list)
  396. if (response.data.list !== null) {
  397. this.tab3.table.list = response.data.list.data1
  398. this.tab3.table.tableConfig = response.data.list.data2
  399. this.tab3.table.total = response.data.total
  400. } else {
  401. this.tab3.table.list = []
  402. }
  403. setTimeout(() => {
  404. this.tab3.table.listLoading = false
  405. }, 100)
  406. })
  407. },
  408. changeRadio3() {
  409. console.log(this.tab3.radio)
  410. if (this.tab3.radio == '1') {
  411. this.tab3.isRadio1 = true,
  412. this.tab3.isRadio2 = false,
  413. this.tab3.isRadio3 = false,
  414. this.tab3.isRadio4 = false,
  415. this.tab3.table.getdataListParm.name = 'getPriceAnalysisSC'
  416. this.tab3.table.getdataListParm.offset = 1
  417. this.getTab3List()
  418. } else if (this.tab3.radio == '2') {
  419. this.tab3.isRadio1 = false,
  420. this.tab3.isRadio2 = true,
  421. this.tab3.isRadio3 = false,
  422. this.tab3.isRadio4 = false,
  423. this.tab3.table.getdataListParm.name = 'getPriceAnalysisLS'
  424. this.tab3.table.getdataListParm.offset = 1
  425. this.getTab3List()
  426. } else if (this.tab3.radio == '3') {
  427. this.tab3.isRadio1 = false,
  428. this.tab3.isRadio2 = false,
  429. this.tab3.isRadio3 = true,
  430. this.tab3.isRadio4 = false,
  431. this.tab3.table.getdataListParm.name = 'getPriceAnalysisRQ'
  432. this.tab3.table.getdataListParm.offset = 1
  433. this.getTab3List()
  434. } else if (this.tab3.radio == '4') {
  435. this.tab3.isRadio1 = false,
  436. this.tab3.isRadio2 = false,
  437. this.tab3.isRadio3 = false,
  438. this.tab3.isRadio4 = true,
  439. this.tab3.table.getdataListParm.name = 'getPriceAnalysisTMR'
  440. this.tab3.table.getdataListParm.offset = 1
  441. this.getTab3List()
  442. }
  443. }
  444. }
  445. }
  446. </script>
  447. <style lang="scss" scoped>
  448. .search{margin-bottom:10px;}
  449. </style>