index.vue 44 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401
  1. <template>
  2. <div class="app-container">
  3. <el-form
  4. :rules="queryRules"
  5. :model="queryParams"
  6. ref="queryForm"
  7. :inline="true"
  8. v-show="showSearch"
  9. label-width="68px"
  10. >
  11. <el-row>
  12. <el-col :span="24">
  13. <el-form-item label-width="auto" prop="accessory">
  14. <template slot="label"> <div class="label">机组搜索:</div> </template>
  15. </el-form-item>
  16. <el-form-item
  17. label-width="auto"
  18. label="机组功率(kw)区间"
  19. prop="unitPowerKwMin"
  20. >
  21. <el-input
  22. v-model.number="queryParams.unitPowerKwMin"
  23. placeholder="请选择机组功率(kw)"
  24. clearable
  25. size="small"
  26. @keyup.enter.native="handleQuery"
  27. >
  28. </el-input>
  29. </el-form-item>
  30. <el-form-item label-width="auto" label="到" prop="unitPowerKwMax">
  31. <el-input
  32. v-model.number="queryParams.unitPowerKwMax"
  33. placeholder="请选择机组功率(kw)"
  34. clearable
  35. size="small"
  36. @keyup.enter.native="handleQuery"
  37. >
  38. </el-input>
  39. </el-form-item>
  40. <el-form-item
  41. label-width="auto"
  42. label="机组功率(kva)区间"
  43. prop="unitPowerKvaMin"
  44. >
  45. <el-input
  46. v-model.number="queryParams.unitPowerKvaMin"
  47. placeholder="请选择机组功率(kva)"
  48. clearable
  49. size="small"
  50. @keyup.enter.native="handleQuery"
  51. >
  52. </el-input>
  53. </el-form-item>
  54. <el-form-item label-width="auto" label="到" prop="unitPowerKvaMax">
  55. <el-input
  56. v-model.number="queryParams.unitPowerKvaMax"
  57. placeholder="请选择机组功率(kva)"
  58. clearable
  59. size="small"
  60. @keyup.enter.native="handleQuery"
  61. >
  62. </el-input>
  63. </el-form-item>
  64. <el-form-item label="品牌" prop="brand">
  65. <el-select
  66. v-model="queryParams.brand"
  67. placeholder="请选择品牌"
  68. clearable
  69. size="small"
  70. @keyup.enter.native="handleQuery"
  71. >
  72. <el-option
  73. v-for="(item, index) in searchOption[0]"
  74. :key="index"
  75. :value="item"
  76. :label="item"
  77. ></el-option>
  78. </el-select>
  79. </el-form-item>
  80. <el-form-item>
  81. <el-button
  82. type="cyan"
  83. icon="el-icon-search"
  84. size="mini"
  85. @click="handleQuery"
  86. >搜索</el-button
  87. >
  88. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
  89. >重置</el-button
  90. >
  91. </el-form-item>
  92. </el-col>
  93. <el-col :span="24">
  94. <el-form-item label-width="auto" prop="accessory">
  95. <template slot="label"> <div class="label">零件搭配:</div> </template>
  96. </el-form-item>
  97. <el-form-item label-width="auto" label="静音/开架" prop="accessory">
  98. <el-select v-model="computedQuery.accessory">
  99. <el-option key="1" value="mutePrice" label="静音机壳"></el-option>
  100. <el-option key="2" value="openPrice" label="开架"></el-option>
  101. </el-select>
  102. </el-form-item>
  103. <el-form-item label-width="auto" label="ATS" prop="unitPowerKvaMax">
  104. <el-select v-model="computedQuery.isHaveAst">
  105. <el-option key="1" :value="true" label="有"></el-option>
  106. <el-option key="2" :value="false" label="无"></el-option>
  107. </el-select>
  108. </el-form-item>
  109. <el-form-item label="控制器" prop="controllerPrice">
  110. <el-select
  111. v-model="computedQuery.controllerPrice"
  112. placeholder="请选择控制器"
  113. clearable
  114. size="small"
  115. >
  116. <el-option
  117. @click.native="
  118. () => {
  119. computedQuery.controllerModel = item.controllerModel;
  120. }
  121. "
  122. v-for="(item, index) in controllerList"
  123. :label="item.controllerModel"
  124. :value="item.controllerPrice"
  125. :key="index"
  126. ></el-option>
  127. </el-select>
  128. </el-form-item>
  129. <el-form-item label="发电机品牌" prop="fadianji" label-width="120">
  130. <el-select v-model="computedQuery.fadianji" placeholder="请选择发电机品牌" clearable size="small">
  131. <el-option
  132. v-for="item in fadianjiOptions"
  133. :key="item.value"
  134. :label="item.label"
  135. :value="item.value">
  136. </el-option>
  137. </el-select>
  138. </el-form-item>
  139. </el-col>
  140. </el-row>
  141. </el-form>
  142. <el-row :gutter="10" class="mb8">
  143. <el-col :span="1.5">
  144. <el-button
  145. type="primary"
  146. icon="el-icon-plus"
  147. size="mini"
  148. @click="handleAdd"
  149. v-hasPermi="['price:info:add']"
  150. >新增</el-button
  151. >
  152. </el-col>
  153. <el-col :span="1.5">
  154. <el-button
  155. type="success"
  156. icon="el-icon-edit"
  157. size="mini"
  158. :disabled="single"
  159. @click="handleUpdate"
  160. v-hasPermi="['price:info:edit']"
  161. >修改</el-button
  162. >
  163. </el-col>
  164. <el-col :span="1.5">
  165. <el-button
  166. type="danger"
  167. icon="el-icon-delete"
  168. size="mini"
  169. :disabled="multiple"
  170. @click="handleDelete"
  171. v-hasPermi="['price:info:remove']"
  172. >删除</el-button
  173. >
  174. </el-col>
  175. <el-col :span="1.5">
  176. <el-button
  177. type="warning"
  178. icon="el-icon-top"
  179. size="mini"
  180. @click="handleExport"
  181. v-hasPermi="['price:info:export']"
  182. >导出</el-button
  183. >
  184. </el-col>
  185. <el-col :span="1.5">
  186. <el-upload
  187. v-hasPermi="['price:info:import']"
  188. :show-file-list="false"
  189. class="upload-demo"
  190. with-credentials
  191. :headers="{
  192. Authorization: 'Bearer ' + token,
  193. }"
  194. :action="uploadUrl+'/price/info/import'"
  195. :on-success="handleSuccess"
  196. multiple
  197. accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
  198. :file-list="fileList"
  199. >
  200. <el-button
  201. type="warning"
  202. icon="el-icon-bottom"
  203. size="mini"
  204. v-hasPermi="['price:info:import']"
  205. >导入</el-button
  206. >
  207. </el-upload>
  208. </el-col>
  209. <el-col :span="1.5">
  210. <el-button
  211. type="primary"
  212. icon="el-icon-right"
  213. :disabled="multiple"
  214. size="mini"
  215. @click="handleAddItems"
  216. >添加到订单</el-button>
  217. </el-col>
  218. <right-toolbar
  219. :showSearch.sync="showSearch"
  220. @queryTable="getList"
  221. ></right-toolbar>
  222. </el-row>
  223. <el-table
  224. fit
  225. size="mini"
  226. :row-style="{ height: '25px' }"
  227. v-loading="loading"
  228. :data="infoList"
  229. @selection-change="handleSelectionChange"
  230. >
  231. <el-table-column type="selection" width="40" align="center" />
  232. <el-table-column
  233. :key="0"
  234. fixed
  235. :width="tableColumnWidthSmall"
  236. label="机组型号"
  237. align="center"
  238. prop="unitModel"
  239. />
  240. <el-table-column
  241. :key="1"
  242. fixed
  243. :width="tableColumnWidthMini"
  244. label="机组功率(kw)"
  245. align="center"
  246. prop="unitPowerKw"
  247. />
  248. <el-table-column
  249. :key="2"
  250. fixed
  251. :width="tableColumnWidthMini"
  252. label="机组功率备用(kw)"
  253. align="center"
  254. prop="unitPowerKwSpare"
  255. />
  256. <el-table-column
  257. :key="3"
  258. fixed
  259. :width="tableColumnWidthMini"
  260. label="机组功率(kva)"
  261. align="center"
  262. prop="unitPowerKva"
  263. />
  264. <el-table-column
  265. :key="4"
  266. fixed
  267. :width="tableColumnWidthMini"
  268. label="机组功率备用(kva)"
  269. align="center"
  270. prop="unitPowerKvaSpare"
  271. />
  272. <el-table-column
  273. :key="5"
  274. :width="tableColumnWidthMini"
  275. label="频率(Hz)"
  276. align="center"
  277. prop="rate"
  278. />
  279. <el-table-column
  280. :key="6"
  281. :width="tableColumnWidthSmall"
  282. label="柴油机型号"
  283. align="center"
  284. prop="dieselEngineModel"
  285. />
  286. <el-table-column
  287. :key="7"
  288. :width="'100px'"
  289. label="品牌"
  290. align="center"
  291. prop="brand"
  292. />
  293. <el-table-column
  294. :key="8"
  295. :width="tableColumnWidthMini"
  296. label="转速"
  297. align="center"
  298. prop="speed"
  299. />
  300. <el-table-column
  301. :key="9"
  302. :width="tableColumnWidthMini"
  303. v-hasPermi="['price:info:list:powerPrice']"
  304. v-if="checkPermissions(['price:info:list:powerPrice'])"
  305. label="动力价格"
  306. align="center"
  307. prop="powerPrice"
  308. />
  309. <el-table-column
  310. :key="10"
  311. :width="tableColumnWidthSmall"
  312. label="发电机型号(仿斯坦福)"
  313. align="center"
  314. v-if="computedQuery.fadianji==0"
  315. prop="generatorModelFstf"
  316. />
  317. <el-table-column
  318. :key="11"
  319. :width="tableColumnWidthMini"
  320. label="发电机价格(仿斯坦福)"
  321. v-if="checkPermissions(['price:info:list:generatorPrice'])&&computedQuery.fadianji==0"
  322. v-hasPermi="['price:info:list:generatorPrice']"
  323. align="center"
  324. prop="generatorPriceFstf"
  325. />
  326. <el-table-column
  327. :key="12"
  328. :width="tableColumnWidthSmall"
  329. v-if="computedQuery.fadianji==1"
  330. label="发电机型号(利来森马)"
  331. align="center"
  332. prop="generatorModelLlsm"
  333. />
  334. <el-table-column
  335. :key="13"
  336. :width="tableColumnWidthMini"
  337. label="发电机价格(利来森马)"
  338. v-if="checkPermissions(['price:info:list:generatorPrice'])&&computedQuery.fadianji==1"
  339. v-hasPermi="['price:info:list:generatorPrice']"
  340. align="center"
  341. prop="generatorPriceLlsm"
  342. />
  343. <el-table-column
  344. :key="14"
  345. :width="tableColumnWidthSmall"
  346. v-if="computedQuery.fadianji==2"
  347. label="发电机型号(美迪奥)"
  348. align="center"
  349. prop="generatorModelMda"
  350. />
  351. <el-table-column
  352. :key="15"
  353. :width="tableColumnWidthMini"
  354. label="发电机价格(美迪奥)"
  355. v-if="checkPermissions(['price:info:list:generatorPrice'])&&computedQuery.fadianji==2"
  356. v-hasPermi="['price:info:list:generatorPrice']"
  357. align="center"
  358. prop="generatorPriceMda"
  359. />
  360. <el-table-column
  361. :key="16"
  362. :width="tableColumnWidthSmall"
  363. v-if="computedQuery.fadianji==3"
  364. label="发电机型号(马拉松)"
  365. align="center"
  366. prop="generatorModelMls"
  367. />
  368. <el-table-column
  369. :key="17"
  370. :width="tableColumnWidthMini"
  371. label="发电机价格(马拉松)"
  372. v-if="checkPermissions(['price:info:list:generatorPrice'])&&computedQuery.fadianji==3"
  373. v-hasPermi="['price:info:list:generatorPrice']"
  374. align="center"
  375. prop="generatorPriceMls"
  376. />
  377. <el-table-column
  378. :key="18"
  379. :width="tableColumnWidthSmall"
  380. v-if="computedQuery.fadianji==4"
  381. label="发电机型号(斯坦福)"
  382. align="center"
  383. prop="generatorModelStf"
  384. />
  385. <el-table-column
  386. :key="19"
  387. :width="tableColumnWidthMini"
  388. label="发电机价格(斯坦福)"
  389. v-if="checkPermissions(['price:info:list:generatorPrice'])&&computedQuery.fadianji==4"
  390. v-hasPermi="['price:info:list:generatorPrice']"
  391. align="center"
  392. prop="generatorPriceStf"
  393. />
  394. <el-table-column
  395. :key="21"
  396. :width="tableColumnWidthMini"
  397. label="静音/开架"
  398. align="center"
  399. v-hasPermi="['price:info:list:mutePrice']"
  400. prop="mutePrice"
  401. ><template slot-scope="scope">
  402. <span>{{ computedQuery.accessory =="mutePrice"? "静音机壳":"开架" }}</span>
  403. </template>
  404. </el-table-column>
  405. <el-table-column
  406. :key="22"
  407. :width="tableColumnWidthMini"
  408. v-if="
  409. computedQuery.accessory == 'mutePrice' &&
  410. checkPermissions(['price:info:list:mutePrice'])
  411. "
  412. label="静音机壳价格"
  413. align="center"
  414. v-hasPermi="['price:info:list:mutePrice']"
  415. prop="mutePrice"
  416. />
  417. <el-table-column
  418. :key="23"
  419. :width="tableColumnWidthMini"
  420. v-if="
  421. computedQuery.accessory == 'openPrice' &&
  422. checkPermissions(['price:info:list:openPrice'])
  423. "
  424. label="开架价格"
  425. align="center"
  426. v-hasPermi="['price:info:list:openPrice']"
  427. prop="openPrice"
  428. />
  429. <el-table-column
  430. :key="24"
  431. :width="tableColumnWidthMini"
  432. v-if="computedQuery.isHaveAst"
  433. label="ATS型号"
  434. align="center"
  435. prop="atsModel"
  436. />
  437. <el-table-column
  438. :key="25"
  439. :width="tableColumnWidthMini"
  440. v-if="
  441. computedQuery.isHaveAst &&
  442. checkPermissions(['price:info:list:astPrice'])
  443. "
  444. v-hasPermi="['price:info:list:astPrice']"
  445. label="ATS价格"
  446. align="center"
  447. prop="atsPrice"
  448. />
  449. <el-table-column
  450. :key="26"
  451. :width="tableColumnWidthMini"
  452. label="电瓶型号"
  453. align="center"
  454. prop="batteryModel"
  455. />
  456. <el-table-column
  457. :key="27"
  458. :width="tableColumnWidthMini"
  459. label="电瓶价格"
  460. v-hasPermi="['price:info:list:batteryPrice']"
  461. v-if="checkPermissions(['price:info:list:batteryPrice'])"
  462. align="center"
  463. prop="batteryPrice"
  464. />
  465. <el-table-column
  466. :key="28"
  467. :width="tableColumnWidthMini"
  468. label="控制器型号"
  469. align="center"
  470. prop="controllerModel"
  471. >
  472. <template>
  473. {{ computedQuery.controllerModel }}
  474. </template>
  475. </el-table-column>
  476. <el-table-column
  477. :key="29"
  478. :width="tableColumnWidthMini"
  479. v-hasPermi="['price:info:list:controllerPrice']"
  480. v-if="checkPermissions(['price:info:list:controllerPrice'])"
  481. label="控制器价格"
  482. align="center"
  483. prop="controllerPrice"
  484. >
  485. <template>
  486. {{ computedQuery.controllerPrice }}
  487. </template>
  488. </el-table-column>
  489. <el-table-column
  490. :key="30"
  491. v-if="computedQuery.fadianji==0"
  492. class-name="bg-lightpink"
  493. :width="tableColumnWidthMini"
  494. label="合计含税成本(仿斯坦福)"
  495. align="center"
  496. prop="totalCostMuteFstf"
  497. >
  498. <template slot-scope="scope">
  499. <span v-if="scope.row.generatorPriceFstf">
  500. {{ computedTotalPrice(scope.row, scope.row.generatorPriceFstf) }}
  501. </span>
  502. </template>
  503. </el-table-column>
  504. <el-table-column
  505. :key="31"
  506. v-if="computedQuery.fadianji==1"
  507. class-name="bg-lightblue"
  508. :width="tableColumnWidthMini"
  509. label="合计含税成本(利来森马)"
  510. align="center"
  511. prop="totalCostMuteLlsm"
  512. >
  513. <template slot-scope="scope">
  514. <span v-if="scope.row.generatorPriceLlsm"> {{ computedTotalPrice(scope.row, scope.row.generatorPriceLlsm) }}</span>
  515. </template>
  516. </el-table-column>
  517. <el-table-column
  518. :key="32"
  519. v-if="computedQuery.fadianji==2"
  520. class-name="bg-lightcyan"
  521. :width="tableColumnWidthMini"
  522. label="合计含税成本(美迪奥)"
  523. align="center"
  524. prop="totalCostMuteMda"
  525. >
  526. <template slot-scope="scope">
  527. <span v-if="scope.row.generatorPriceMda"> {{ computedTotalPrice(scope.row, scope.row.generatorPriceMda) }}</span>
  528. </template>
  529. </el-table-column>
  530. <el-table-column
  531. :key="33"
  532. v-if="computedQuery.fadianji==3"
  533. class-name="bg-lightskyblue"
  534. :width="tableColumnWidthMini"
  535. label="合计含税成本(马拉松)"
  536. align="center"
  537. prop="totalCostMuteMls"
  538. >
  539. <template slot-scope="scope">
  540. <span v-if="scope.row.generatorPriceMls">{{ computedTotalPrice(scope.row, scope.row.generatorPriceMls) }}</span>
  541. </template>
  542. </el-table-column>
  543. <el-table-column
  544. :key="34"
  545. v-if="computedQuery.fadianji==4"
  546. class-name="bg-lightgoldenrodyellow"
  547. :width="tableColumnWidthMini"
  548. label="合计含税成本(斯坦福)"
  549. align="center"
  550. prop="totalCostMuteStf"
  551. >
  552. <template slot-scope="scope">
  553. <span v-if="scope.row.generatorPriceStf">{{ computedTotalPrice(scope.row, scope.row.generatorPriceStf) }}</span>
  554. </template>
  555. </el-table-column>
  556. <el-table-column
  557. :key="35"
  558. width="100px"
  559. v-if="computedQuery.accessory == 'openPrice'"
  560. label="开架尺寸(长/宽/高/重量)"
  561. align="center"
  562. prop="openParms"
  563. />
  564. <el-table-column
  565. :key="36"
  566. :width="'100px'"
  567. v-if="computedQuery.accessory == 'mutePrice'"
  568. label="静音尺寸(长/宽/高/重量)"
  569. align="center"
  570. prop="muteParms"
  571. />
  572. <el-table-column
  573. :key="37"
  574. :width="tableColumnWidthMini"
  575. width="180px"
  576. label="操作"
  577. align="center"
  578. class-name="small-padding fixed-width"
  579. >
  580. <template slot-scope="scope">
  581. <div style="display: inline-flex">
  582. <el-button
  583. size="mini"
  584. type="text"
  585. icon="el-icon-edit"
  586. @click="handleUpdate(scope.row)"
  587. v-hasPermi="['price:info:edit']"
  588. >修改</el-button
  589. >
  590. <el-button
  591. @click="
  592. () => {
  593. $router.push('/gallery?id=' + scope.row.id + '&type=1');
  594. }
  595. "
  596. size="mini"
  597. type="text"
  598. icon="el-icon-picture-outline"
  599. >图片</el-button
  600. >
  601. <el-button
  602. size="mini"
  603. type="text"
  604. icon="el-icon-delete"
  605. @click="handleDelete(scope.row)"
  606. v-hasPermi="['price:info:remove']"
  607. >删除</el-button
  608. >
  609. </div>
  610. </template>
  611. </el-table-column>
  612. </el-table>
  613. <pagination
  614. v-show="total > 0"
  615. :total="total"
  616. :page.sync="queryParams.pageNum"
  617. :limit.sync="queryParams.pageSize"
  618. @pagination="getList"
  619. />
  620. <div v-if="itemList.length>0">
  621. <p align="center">订单详情</p>
  622. <el-row :gutter="10" class="mb8">
  623. <el-col :span="1.5">
  624. <el-button
  625. type="danger"
  626. icon="el-icon-delete"
  627. size="mini"
  628. :disabled="itemMultiple"
  629. @click="handleItemDelete"
  630. >删除</el-button
  631. >
  632. </el-col>
  633. <el-col :span="1.5">
  634. <el-button
  635. type="primary"
  636. icon="el-icon-right"
  637. :disabled="multiple"
  638. size="mini"
  639. @click="createOrder"
  640. >生成订单</el-button>
  641. </el-col>
  642. </el-row>
  643. <el-table
  644. fit
  645. size="mini"
  646. :row-style="{ height: '25px' }"
  647. v-loading="loading"
  648. :data="itemList"
  649. @selection-change="handleItemSelectionChange"
  650. >
  651. <!--<el-table-column type="selection" width="55" align="center" />-->
  652. <!--<el-table-column label="生产单号" align="center" prop="orderNo" />-->
  653. <el-table-column type="selection" width="40" align="center" />
  654. <el-table-column label="机组型号" align="center" prop="unitModel" />
  655. <el-table-column label="频率(Hz)" align="center" prop="rate" />
  656. <el-table-column label="电压(V)" align="center" prop="voltage" />
  657. <el-table-column label="机组功率(kw)" align="center" prop="unitPowerKw" />
  658. <el-table-column label="机组功率(kva)" align="center" prop="unitPowerKva" />
  659. <el-table-column label="机组备用功率(kw)" align="center" prop="unitPowerKwSpare" />
  660. <el-table-column label="机组备用功率(kva)" align="center" prop="unitPowerKvaSpare" />
  661. <el-table-column label="柴油机型号" align="center" prop="dieselEngineModel" />
  662. <el-table-column label="发电机型号" align="center" prop="fjd" />
  663. <el-table-column label="控制器型号" align="center" prop="controllerModel" />
  664. <el-table-column label="水套加热器" align="center" prop="heater" />
  665. <el-table-column label="ATS" align="center" prop="ats" />
  666. <el-table-column label="断路器" align="center" prop="breaker" />
  667. <el-table-column label="电瓶" align="center" prop="battery" />
  668. <el-table-column label="静音/开架" align="center" prop="muteOrOpen" />
  669. <el-table-column label="机壳颜色" align="center" prop="color" />
  670. <el-table-column label="数量" align="center" prop="number" />
  671. <el-table-column label="零售价" align="center" prop="priceRetail" />
  672. <!--<el-table-column label="采购价" align="center" prop="pricePurchase" />-->
  673. </el-table>
  674. </div>
  675. <!-- 添加或修改报价对话框 -->
  676. <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  677. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  678. <el-form-item label="品牌" prop="brand">
  679. <el-select
  680. v-model="form.brand"
  681. placeholder="请选择品牌"
  682. clearable
  683. size="small"
  684. @keyup.enter.native="handleQuery"
  685. >
  686. <el-option
  687. v-for="(item, index) in searchOption[0]"
  688. :value="item"
  689. :key="index"
  690. :label="item"
  691. ></el-option>
  692. </el-select>
  693. </el-form-item>
  694. <el-form-item label="机组功率(kw)" prop="unitPowerKw">
  695. <el-input
  696. v-model="form.unitPowerKw"
  697. placeholder="请输入机组功率(kw)"
  698. />
  699. </el-form-item>
  700. <el-form-item label="机组功率(kva)" prop="unitPowerKva">
  701. <el-input
  702. v-model="form.unitPowerKva"
  703. placeholder="请输入机组功率(kva)"
  704. />
  705. </el-form-item>
  706. <el-form-item label="频率(Hz)" prop="rate">
  707. <el-input v-model="form.rate" placeholder="请输入频率(Hz)" />
  708. </el-form-item>
  709. <el-form-item label="动力品牌" prop="brand">
  710. <el-input v-model="form.brand" placeholder="请输入动力品牌" />
  711. </el-form-item>
  712. <el-form-item label="柴油机型号" prop="dieselEngineModel">
  713. <el-input
  714. v-model="form.dieselEngineModel"
  715. placeholder="请输入柴油机型号"
  716. />
  717. </el-form-item>
  718. <el-form-item label="转速" prop="speed">
  719. <el-input v-model="form.speed" placeholder="请输入转速" />
  720. </el-form-item>
  721. <el-form-item label="动力价格" prop="powerPrice">
  722. <el-input v-model="form.powerPrice" placeholder="请输入动力价格" />
  723. </el-form-item>
  724. <el-form-item label="发电机型号(仿斯坦福)" prop="generatorModelFstf">
  725. <el-input
  726. v-model="form.generatorModelFstf"
  727. placeholder="请输入发电机型号(仿斯坦福)"
  728. />
  729. </el-form-item>
  730. <el-form-item label="发电机价格(仿斯坦福)" prop="generatorPriceFstf">
  731. <el-input
  732. v-model="form.generatorPriceFstf"
  733. placeholder="请输入发电机价格(仿斯坦福)"
  734. />
  735. </el-form-item>
  736. <el-form-item label="发电机型号(斯坦福)" prop="generatorModelStf">
  737. <el-input
  738. v-model="form.generatorModelStf"
  739. placeholder="请输入发电机型号(斯坦福)"
  740. />
  741. </el-form-item>
  742. <el-form-item label="发电机价格(斯坦福)" prop="generatorPriceStf">
  743. <el-input
  744. v-model="form.generatorPriceStf"
  745. placeholder="请输入发电机价格(斯坦福)"
  746. />
  747. </el-form-item>
  748. <el-form-item label="发电机型号(利来森马)" prop="generatorModelLlsm">
  749. <el-input
  750. v-model="form.generatorModelLlsm"
  751. placeholder="请输入发电机型号(利来森马)"
  752. />
  753. </el-form-item>
  754. <el-form-item label="发电机价格(利来森马)" prop="generatorPriceLlsm">
  755. <el-input
  756. v-model="form.generatorPriceLlsm"
  757. placeholder="请输入发电机价格(利来森马)"
  758. />
  759. </el-form-item>
  760. <el-form-item label="发电机型号(马拉松)" prop="generatorModelMls">
  761. <el-input
  762. v-model="form.generatorModelMls"
  763. placeholder="请输入发电机型号(马拉松)"
  764. />
  765. </el-form-item>
  766. <el-form-item label="发电机价格(马拉松)" prop="generatorPriceMls">
  767. <el-input
  768. v-model="form.generatorPriceMls"
  769. placeholder="请输入发电机价格(马拉松)"
  770. />
  771. </el-form-item>
  772. <el-form-item label="发电机型号(美迪奥)" prop="generatorModelMda">
  773. <el-input
  774. v-model="form.generatorModelMda"
  775. placeholder="请输入发电机型号(美迪奥)"
  776. />
  777. </el-form-item>
  778. <el-form-item label="发电机价格(美迪奥)" prop="generatorPriceMda">
  779. <el-input
  780. v-model="form.generatorPriceMda"
  781. placeholder="请输入发电机价格(美迪奥)"
  782. />
  783. </el-form-item>
  784. <el-form-item label="静音机壳价格" prop="mutePrice">
  785. <el-input v-model="form.mutePrice" placeholder="请输入静音机壳价格" />
  786. </el-form-item>
  787. <el-form-item label="开架价格" prop="openPrice">
  788. <el-input v-model="form.openPrice" placeholder="请输入开架价格" />
  789. </el-form-item>
  790. <el-form-item label="ATS型号" prop="atsModel">
  791. <el-input v-model="form.atsModel" placeholder="请输入ATS型号" />
  792. </el-form-item>
  793. <el-form-item label="ATS价格" prop="atsPrice">
  794. <el-input v-model="form.atsPrice" placeholder="请输入ATS价格" />
  795. </el-form-item>
  796. <el-form-item label="电瓶型号" prop="batteryModel">
  797. <el-input v-model="form.batteryModel" placeholder="请输入电瓶型号" />
  798. </el-form-item>
  799. <el-form-item label="电瓶价格" prop="batteryPrice">
  800. <el-input v-model="form.batteryPrice" placeholder="请输入电瓶价格" />
  801. </el-form-item>
  802. <el-form-item
  803. label="合计含税成本(静音配仿斯坦福)"
  804. prop="totalCostMuteFstf"
  805. >
  806. <el-input
  807. v-model="form.totalCostMuteFstf"
  808. placeholder="请输入合计含税成本(静音配仿斯坦福)"
  809. />
  810. </el-form-item>
  811. <el-form-item
  812. label="合计含税成本(开架配仿斯坦福)"
  813. prop="totalCostOpenFstf"
  814. >
  815. <el-input
  816. v-model="form.totalCostOpenFstf"
  817. placeholder="请输入合计含税成本(开架配仿斯坦福)"
  818. />
  819. </el-form-item>
  820. <el-form-item
  821. label="合计含税成本(静音配斯坦福)"
  822. prop="totalCostMuteStf"
  823. >
  824. <el-input
  825. v-model="form.totalCostMuteStf"
  826. placeholder="请输入合计含税成本(静音配斯坦福)"
  827. />
  828. </el-form-item>
  829. <el-form-item
  830. label="合计含税成本(开架配斯坦福)"
  831. prop="totalCostOpenStf"
  832. >
  833. <el-input
  834. v-model="form.totalCostOpenStf"
  835. placeholder="请输入合计含税成本(开架配斯坦福)"
  836. />
  837. </el-form-item>
  838. <el-form-item
  839. label="合计含税成本(静音配利来森马)"
  840. prop="totalCostMuteLlsm"
  841. >
  842. <el-input
  843. v-model="form.totalCostMuteLlsm"
  844. placeholder="请输入合计含税成本(静音配利来森马)"
  845. />
  846. </el-form-item>
  847. <el-form-item
  848. label="合计含税成本(开架配利来森马)"
  849. prop="totalCostOpenLlsm"
  850. >
  851. <el-input
  852. v-model="form.totalCostOpenLlsm"
  853. placeholder="请输入合计含税成本(开架配利来森马)"
  854. />
  855. </el-form-item>
  856. <el-form-item
  857. label="合计含税成本(静音配马拉松)"
  858. prop="totalCostMuteMls"
  859. >
  860. <el-input
  861. v-model="form.totalCostMuteMls"
  862. placeholder="请输入合计含税成本(静音配马拉松)"
  863. />
  864. </el-form-item>
  865. <el-form-item
  866. label="合计含税成本(开架配马拉松)"
  867. prop="totalCostOpenMls"
  868. >
  869. <el-input
  870. v-model="form.totalCostOpenMls"
  871. placeholder="请输入合计含税成本(开架配马拉松)"
  872. />
  873. </el-form-item>
  874. <el-form-item
  875. label="合计含税成本(静音配美迪奥)"
  876. prop="totalCostMuteMda"
  877. >
  878. <el-input
  879. v-model="form.totalCostMuteMda"
  880. placeholder="请输入合计含税成本(静音配美迪奥)"
  881. />
  882. </el-form-item>
  883. <el-form-item
  884. label="合计含税成本(开架配美迪奥)"
  885. prop="totalCostOpenMda"
  886. >
  887. <el-input
  888. v-model="form.totalCostOpenMda"
  889. placeholder="请输入合计含税成本(开架配美迪奥)"
  890. />
  891. </el-form-item>
  892. <el-form-item label="静音尺寸" prop="muteParms">
  893. <el-input v-model="form.muteParms" placeholder="请输入静音尺寸" />
  894. </el-form-item>
  895. <el-form-item label="静音尺寸" prop="openParms">
  896. <el-input v-model="form.openParms" placeholder="请输入静音尺寸" />
  897. </el-form-item>
  898. </el-form>
  899. <div slot="footer" class="dialog-footer">
  900. <el-button type="primary" @click="submitForm">确 定</el-button>
  901. <el-button @click="cancel">取 消</el-button>
  902. </div>
  903. </el-dialog>
  904. </div>
  905. </template>
  906. <script>
  907. import {
  908. listInfo,
  909. getInfo,
  910. delInfo,
  911. addInfo,
  912. updateInfo,
  913. exportInfo,
  914. getFieldName,
  915. } from "@/api/price/managehz50";
  916. import { listInfo as controllerListInfo } from "@/api/price/controller";
  917. import { addInfo as addOrderInfo} from "@/api/order/info";
  918. import { getToken } from "@/utils/auth";
  919. import { mapGetters } from "vuex";
  920. let computedQuery = {
  921. accessory: "mutePrice",
  922. isHaveAst: true,
  923. controllerPrice: null,
  924. controllerModel: null,
  925. fadianji:0
  926. };
  927. const controllerPriceValidator = (rule, value, callBack) => {
  928. console.log(computedQuery.controllerPrice && computedQuery.controllerModel);
  929. if (computedQuery.controllerPrice && computedQuery.controllerModel) {
  930. callBack();
  931. } else {
  932. callBack(new Error("必须选择一个控制器"));
  933. }
  934. };
  935. export default {
  936. name: "Info",
  937. data() {
  938. return {
  939. jishuqi:0,
  940. fadianjiOptions:[{
  941. value: 0,
  942. label: '仿斯坦福'
  943. }, {
  944. value: 1,
  945. label: '利来森马'
  946. }, {
  947. value: 2,
  948. label: '美迪奥'
  949. }, {
  950. value: 3,
  951. label: '马拉松'
  952. }, {
  953. value: 4,
  954. label: '斯坦福'
  955. }],
  956. controllerModel: "",
  957. controllerPrice: 0,
  958. token: getToken(), uploadUrl:process.env.VUE_APP_BASE_API,
  959. fileList: [],
  960. //搜索下拉选项
  961. searchOption: [[], [], [], []],
  962. // 遮罩层
  963. loading: false,
  964. // 选中数组
  965. ids: [],
  966. // 选中数组
  967. itemids: [],
  968. // 非单个禁用
  969. single: true,
  970. // 非多个禁用
  971. multiple: true,
  972. itemMultiple: true,
  973. // 显示搜索条件
  974. showSearch: true,
  975. // 总条数
  976. total: 0,
  977. // 报价表格数据
  978. infoList: [],
  979. // 订单详情数据
  980. itemList: [],
  981. // 控制器列表
  982. controllerList: [],
  983. // 弹出层标题
  984. title: "",
  985. // 是否显示弹出层
  986. open: false,
  987. //查询参数规则
  988. queryRules: {
  989. controllerPrice: [
  990. {
  991. validator: controllerPriceValidator,
  992. trigger: "change",
  993. type: "number",
  994. },
  995. ],
  996. unitPowerKwMin: [
  997. {
  998. required: false,
  999. message: "请输入数字",
  1000. trigger: "change",
  1001. type: "number",
  1002. },
  1003. ],
  1004. unitPowerKwMax: [
  1005. {
  1006. required: false,
  1007. message: "请输入数字",
  1008. trigger: "change",
  1009. type: "number",
  1010. },
  1011. ],
  1012. unitPowerKvaMax: [
  1013. {
  1014. required: false,
  1015. message: "请输入数字",
  1016. trigger: "change",
  1017. type: "number",
  1018. },
  1019. ],
  1020. unitPowerKvaMin: [
  1021. {
  1022. required: false,
  1023. message: "请输入数字",
  1024. trigger: "change",
  1025. type: "number",
  1026. },
  1027. ],
  1028. },
  1029. //计算参数
  1030. computedQuery: computedQuery,
  1031. // 查询参数
  1032. queryParams: {
  1033. pageNum: 1,
  1034. pageSize: 10,
  1035. brand: null,
  1036. unitModel: null,
  1037. unitPowerKwMax: null,
  1038. unitPowerKwMin: null,
  1039. controllerPrice: 0,
  1040. controllerModel: "",
  1041. unitPowerKvaMax: null,
  1042. unitPowerKvaMin: null,
  1043. rate: null,
  1044. dieselEngineModel: null,
  1045. speed: null,
  1046. powerPrice: null,
  1047. generatorModel: null,
  1048. generatorPrice: null,
  1049. mutePrice: null,
  1050. openPrice: null,
  1051. atsModel: null,
  1052. atsPrice: null,
  1053. batteryModel: null,
  1054. batteryPrice: null,
  1055. controllerMinbei: null,
  1056. controllerPrice: null,
  1057. totalCostMute: null,
  1058. totalCostOpen: null,
  1059. muteLong: null,
  1060. muteWidth: null,
  1061. muteHigh: null,
  1062. openLong: null,
  1063. openWidth: null,
  1064. openHigh: null,
  1065. ckdLong: null,
  1066. ckdWidth: null,
  1067. ckdHigh: null,
  1068. },
  1069. // 表单参数
  1070. form: {},
  1071. // 表单校验
  1072. rules: {},
  1073. };
  1074. },
  1075. computed: {
  1076. ...mapGetters([
  1077. "permissions",
  1078. "roles",
  1079. "tableColumnWidth",
  1080. "tableColumnWidthSamll",
  1081. "tableColumnWidthMini",
  1082. ]),
  1083. },
  1084. created() {
  1085. this.getControllerList();
  1086. this.getList();
  1087. this.getSearchOption();
  1088. },
  1089. methods: {
  1090. //检查用户是否可以看
  1091. checkPermissions(permissions) {
  1092. let res = false;
  1093. //管理员权限完整
  1094. if (this.roles.includes("admin")) {
  1095. return true;
  1096. } else {
  1097. if (Array.isArray(permissions)) {
  1098. res = permissions.every((item) => {
  1099. return this.permissions.includes(item);
  1100. });
  1101. } else {
  1102. res = this.permissions.includes(permissions);
  1103. }
  1104. return res;
  1105. }
  1106. },
  1107. computedTotalPrice(row, alternatorPrice) {
  1108. let totalPrice =
  1109. row.powerPrice +
  1110. alternatorPrice +
  1111. row[computedQuery.accessory] +
  1112. computedQuery.controllerPrice +
  1113. (computedQuery.isHaveAst ? row.atsPrice : 0) +
  1114. row.batteryPrice;
  1115. totalPrice = Math.round(totalPrice);
  1116. return totalPrice;
  1117. },
  1118. getControllerList() {
  1119. controllerListInfo().then((response) => {
  1120. this.controllerList = response.rows;
  1121. this.computedQuery.controllerModel = response.rows[0].controllerModel;
  1122. this.computedQuery.controllerPrice = response.rows[0].controllerPrice;
  1123. });
  1124. },
  1125. handleSuccess() {
  1126. this.msgSuccess("上传成功");
  1127. this.getSearchOption();
  1128. this.getList()
  1129. },
  1130. push(url) {
  1131. this.router.push(url);
  1132. },
  1133. getSearchOption() {
  1134. getFieldName("brand").then((response) => {
  1135. this.$set(this.searchOption, 0, response.data);
  1136. });
  1137. getFieldName("unit_power_kw").then((response) => {
  1138. this.$set(this.searchOption, 1, response.data);
  1139. });
  1140. getFieldName("unit_power_kva").then((response) => {
  1141. this.$set(this.searchOption, 2, response.data);
  1142. });
  1143. // getFieldName('rate').then(response => {
  1144. // this.$set(this.searchOption, 3, response.data);
  1145. // })
  1146. },
  1147. /** 查询报价列表 */
  1148. getList() {
  1149. this.loading = true;
  1150. listInfo(this.queryParams).then((response) => {
  1151. this.infoList = response.rows;
  1152. this.total = response.total;
  1153. this.loading = false;
  1154. });
  1155. },
  1156. // 取消按钮
  1157. cancel() {
  1158. this.open = false;
  1159. this.reset();
  1160. },
  1161. // 表单重置
  1162. reset() {
  1163. this.form = {
  1164. id: null,
  1165. brand: null,
  1166. unitModel: null,
  1167. unitPowerKw: null,
  1168. unitPowerKva: null,
  1169. rate: null,
  1170. dieselEngineModel: null,
  1171. speed: null,
  1172. powerPrice: null,
  1173. generatorModel: null,
  1174. generatorPrice: null,
  1175. mutePrice: null,
  1176. openPrice: null,
  1177. atsModel: null,
  1178. atsPrice: null,
  1179. batteryModel: null,
  1180. batteryPrice: null,
  1181. controllerMinbei: null,
  1182. controllerPrice: null,
  1183. totalCostMute: null,
  1184. totalCostOpen: null,
  1185. muteLong: null,
  1186. muteWidth: null,
  1187. muteHigh: null,
  1188. openLong: null,
  1189. openWidth: null,
  1190. openHigh: null,
  1191. ckdLong: null,
  1192. ckdWidth: null,
  1193. ckdHigh: null,
  1194. createTime: null,
  1195. updateTime: null,
  1196. };
  1197. this.resetForm("form");
  1198. },
  1199. createOrder(){
  1200. addOrderInfo(this.itemList).then((response) => {
  1201. this.msgSuccess("订单创建成功,请到订单管理查看");
  1202. this.itemList=[];
  1203. });
  1204. },
  1205. /** 搜索按钮操作 */
  1206. handleQuery() {
  1207. this.$refs["queryForm"].validate((valid) => {
  1208. if (valid) {
  1209. this.controllerModel = this.queryParams.controllerModel || "";
  1210. this.controllerPrice = this.queryParams.controllerPrice || 0;
  1211. this.queryParams.pageNum = 1;
  1212. this.getList();
  1213. } else {
  1214. return false;
  1215. }
  1216. });
  1217. },
  1218. /** 重置按钮操作 */
  1219. resetQuery() {
  1220. this.controllerPrice = 0;
  1221. this.controllerModel = "";
  1222. this.resetForm("queryForm");
  1223. this.handleQuery();
  1224. },
  1225. // 多选框选中数据
  1226. handleSelectionChange(selection) {
  1227. this.ids = selection.map((item) => item.id);
  1228. this.single = selection.length !== 1;
  1229. this.multiple = !selection.length;
  1230. },
  1231. handleItemSelectionChange(selection) {
  1232. this.itemids = selection.map((item) => item.itemId);
  1233. this.itemMultiple = !selection.length;
  1234. },
  1235. /** 新增按钮操作 */
  1236. handleAdd() {
  1237. this.reset();
  1238. this.open = true;
  1239. this.title = "添加报价";
  1240. },
  1241. /** 修改按钮操作 */
  1242. handleUpdate(row) {
  1243. this.reset();
  1244. const id = row.id || this.ids;
  1245. getInfo(id).then((response) => {
  1246. this.form = response.data;
  1247. this.open = true;
  1248. this.title = "修改报价";
  1249. });
  1250. },
  1251. /** 提交按钮 */
  1252. submitForm() {
  1253. this.$refs["form"].validate((valid) => {
  1254. if (valid) {
  1255. if (this.form.id != null) {
  1256. updateInfo(this.form).then((response) => {
  1257. this.msgSuccess("修改成功");
  1258. this.open = false;
  1259. this.getList();
  1260. });
  1261. } else {
  1262. addInfo(this.form).then((response) => {
  1263. this.msgSuccess("新增成功");
  1264. this.open = false;
  1265. this.getList();
  1266. });
  1267. }
  1268. }
  1269. });
  1270. },
  1271. handleAddItems(){
  1272. const ids = this.ids;
  1273. for(var i = 0 ; i< ids.length;i++){
  1274. var itemid = ids[i];
  1275. var infoList = this.infoList;
  1276. // console.log(infoList);
  1277. for(var j =0;j <infoList.length;j++){
  1278. var info = infoList[j];
  1279. if (itemid == info.id){
  1280. this.addItem(info,this.itemList);
  1281. }
  1282. }
  1283. }
  1284. },
  1285. addItem(info,list){
  1286. var item ={};
  1287. console.log(info.unitModel);
  1288. item.unitModel= info.unitModel;
  1289. item.rate= info.rate;
  1290. item.unitPowerKw= info.unitPowerKw;
  1291. item.unitPowerKva= info.unitPowerKva;
  1292. item.unitPowerKwSpare= info.unitPowerKwSpare;
  1293. item.unitPowerKvaSpare= info.unitPowerKvaSpare;
  1294. item.dieselEngineModel= info.dieselEngineModel;
  1295. item.number= 1;
  1296. item.ats= computedQuery.isHaveAst?info.atsModel:"无";
  1297. item.muteOrOpen= computedQuery.accessory=='mutePrice'?"静音机壳":"开架";
  1298. item.controllerModel= computedQuery.controllerModel;
  1299. if (computedQuery.fadianji ==0){
  1300. item.fjd= info.generatorModelFstf;
  1301. }else if (computedQuery.fadianji ==1){
  1302. item.fjd= info.generatorModelLlsm;
  1303. }else if(computedQuery.fadianji ==2){
  1304. item.fjd= info.generatorModelMda;
  1305. }else if(computedQuery.fadianji ==3){
  1306. item.fjd= info.generatorModelMls;
  1307. }else if(computedQuery.fadianji ==4){
  1308. item.fjd= info.generatorModelStf;
  1309. }
  1310. item.unitModel= info.unitModel;
  1311. item.itemId = this.jishuqi++;
  1312. list.push(item);
  1313. },
  1314. handleItemDelete(row){
  1315. },
  1316. /** 删除按钮操作 */
  1317. handleDelete() {
  1318. },
  1319. /** 导出按钮操作 */
  1320. handleExport() {
  1321. const queryParams = this.queryParams;
  1322. this.$confirm("是否确认导出所有报价数据项?", "警告", {
  1323. confirmButtonText: "确定",
  1324. cancelButtonText: "取消",
  1325. type: "warning",
  1326. })
  1327. .then(function () {
  1328. return exportInfo(queryParams);
  1329. })
  1330. .then((response) => {
  1331. this.download(response.data);
  1332. });
  1333. },
  1334. },
  1335. };
  1336. </script>
  1337. <style lang="scss">
  1338. .bg-lightpink {
  1339. background: lightpink;
  1340. }
  1341. .bg-lightblue {
  1342. background: lightblue;
  1343. }
  1344. .bg-lightcyan {
  1345. background: lightcyan;
  1346. }
  1347. .bg-lightskyblue {
  1348. background: lightskyblue;
  1349. }
  1350. .bg-lightgoldenrodyellow {
  1351. background: lightgoldenrodyellow;
  1352. }
  1353. .label{
  1354. color: red
  1355. }
  1356. </style>