index.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708
  1. <template>
  2. <div>
  3. <el-row class="handle-box" style="margin-bottom: 10px">
  4. <el-col :span="24">
  5. <span>
  6. 姓名
  7. </span>
  8. <el-input
  9. v-model="search.buyerName"
  10. style="margin-left:16px ;"
  11. size="small"
  12. placeholder="请输入"
  13. class="ch-input ch-input-size"
  14. />
  15. <el-radio-group v-model="search.status" style="margin-left:16px ;">
  16. <el-radio
  17. v-for="item in dc_data.BUYING_HOUSE_STATUS"
  18. :key="item.value"
  19. :label="item.value"
  20. >
  21. {{ item.label }}
  22. </el-radio>
  23. </el-radio-group>
  24. </el-col>
  25. <el-col :span="24">
  26. <span>
  27. 房号
  28. </span>
  29. <el-input
  30. v-model="search.houseName"
  31. style="margin-left:16px ;"
  32. size="small"
  33. placeholder="请输入"
  34. class="ch-input ch-input-size"
  35. />
  36. <span>
  37. &nbsp;&nbsp;&nbsp;身份证
  38. </span>
  39. <el-input
  40. v-model="search.buyerIdentityCard"
  41. style="margin-left:16px ;"
  42. size="small"
  43. placeholder="请输入"
  44. class="ch-input ch-input-size"
  45. />
  46. <span>
  47. &nbsp;&nbsp;&nbsp;批次号
  48. </span>
  49. <el-input
  50. v-model="search.batchNumber"
  51. style="margin-left:16px ;"
  52. size="small"
  53. placeholder="请输入"
  54. class="ch-input ch-input-size"
  55. />
  56. <span>
  57. &nbsp;&nbsp;&nbsp;选房号
  58. </span>
  59. <el-input
  60. v-model="search.roomSelectionNumber"
  61. style="margin-left:16px ;"
  62. size="small"
  63. placeholder="请输入"
  64. class="ch-input ch-input-size"
  65. />
  66. <span>
  67. &nbsp;&nbsp;&nbsp;
  68. </span>
  69. <el-date-picker
  70. v-model="search.roomSelectionDateFrom"
  71. value-format="yyyy-MM-dd"
  72. format="yyyy-MM-dd"
  73. size="small"
  74. type="date"
  75. placeholder="选房开始日期"
  76. />
  77. <el-date-picker
  78. v-model="search.roomSelectionDateTo"
  79. value-format="yyyy-MM-dd"
  80. format="yyyy-MM-dd"
  81. size="small"
  82. type="date"
  83. placeholder="选房结束日期"
  84. />
  85. </el-col>
  86. <el-col :span="24">
  87. <div style="display: flex;align-items: center">
  88. <div style=" white-space: nowrap;">项目</div>
  89. <div class="listBox">
  90. <div
  91. v-for="item in groupOption"
  92. :key="item.value"
  93. class="list"
  94. :class="{ checked: groupIds.includes(item.value) }"
  95. @click="checkedBox(item.value)"
  96. >
  97. {{ item.label }}
  98. </div>
  99. </div>
  100. </div>
  101. </el-col>
  102. <el-col v-if="discOption.length > 0" :span="24">
  103. <div style="display: flex;align-items: center">
  104. <div style=" white-space: nowrap;">分期</div>
  105. <div class="listBox">
  106. <div
  107. v-for="item in discOption"
  108. :key="item.value"
  109. class="list"
  110. :class="{ checked: discIds.includes(item.value) }"
  111. @click="checkedFQBox(item.value)"
  112. >
  113. {{ item.label }}
  114. </div>
  115. </div>
  116. </div>
  117. </el-col>
  118. <el-col :span="24" style="margin-top: 20px">
  119. <el-button size="small" class="ch-button" style="float: right; margin-top: 4px" @click="downLoad"><i class="el-icon-menu" />&nbsp;选房通知单</el-button>
  120. <el-button size="small" class="ch-button-danger" style="float: right; margin-top: 4px;margin-right: 10px;" @click="handleDelete"><i class="el-icon-menu" />&nbsp;删除</el-button>
  121. <el-button v-if="$has('customerExport')" :loading="excelFlag" size="small" class="ch-button-export" style="float: right; margin-top: 4px" @click="handleExcel"><i class="el-icon-menu" />&nbsp;导出EXCEL</el-button>
  122. <el-button size="small" class="ch-button-export" style="float: right;margin-top: 4px" @click="batchImport()"><i class="el-icon-menu" />&nbsp;批量导入</el-button>
  123. <el-button size="small" class="ch-button-add" style="float: right; margin-right: 10px; margin-top: 4px" @click="handleAdd()"><i class="el-icon-menu" />&nbsp;新增</el-button>
  124. <el-button size="small" class="ch-button" style="float: right; margin-top: 4px" @click="handleSearch()"><i class="el-icon-menu" />&nbsp;查询</el-button>
  125. <el-button size="small" class="ch-button-warning" style="float: right;margin-top: 4px" @click="handleReset()"><i class="el-icon-menu" />&nbsp;重置</el-button>
  126. </el-col>
  127. </el-row>
  128. <el-row class="handle-box">
  129. <el-col :span="24">
  130. <el-table
  131. ref="multipleTable"
  132. v-loading="loading"
  133. :data="AllData"
  134. stripe
  135. row-class-name="g_table_row"
  136. border
  137. :header-cell-style="{background:'#f2f2f2'}"
  138. :cell-style="{ textAlign: 'center' }"
  139. @selection-change="handleSelectionChange"
  140. >
  141. <el-table-column
  142. type="selection"
  143. width="55"
  144. />
  145. <el-table-column type="index" label="序号" width="60" />
  146. <el-table-column label="批次号" prop="batchNumber" />
  147. <el-table-column label="选房号" prop="roomSelectionNumber" />
  148. <el-table-column label="买受人" prop="buyerName" width="300" />
  149. <el-table-column label="身份证号" prop="buyerIdentityCard" width="300" />
  150. <el-table-column label="选房日期" prop="roomSelectionDate" width="180" />
  151. <el-table-column label="购房状态" prop="statusStr" />
  152. <el-table-column label="意向金状态" prop="intentionalDepositStatusStr" width="130" />
  153. <el-table-column label="小区-分期" prop="groupDiscName" width="180" />
  154. <el-table-column label="意向房屋" prop="houseName" width="180" />
  155. <el-table-column label="操作" width="600">
  156. <template scope="scope">
  157. <el-button
  158. size="mini"
  159. type="text"
  160. @click="handleEdit(scope.row)"
  161. >修改
  162. </el-button>
  163. <el-button
  164. size="mini"
  165. type="text"
  166. :disabled="scope.row.statusStr === '已选房' || scope.row.statusStr === '已签约' || scope.row.statusStr === '已入驻' || scope.row.statusStr === '已退房' || scope.row.statusStr === '放弃资格'"
  167. @click="handleIntentionalDeposit(scope.row)"
  168. >意向金
  169. </el-button>
  170. <el-button
  171. v-if="scope.row.roomSelectionCount <= 0"
  172. size="mini"
  173. type="text"
  174. :disabled="scope.row.statusStr === '已签约' || scope.row.statusStr === '已入驻' || scope.row.statusStr === '已退房' || scope.row.statusStr === '放弃资格'"
  175. @click="handleHouse(scope.row)"
  176. >选房
  177. </el-button>
  178. <el-button
  179. size="mini"
  180. type="text"
  181. :disabled="scope.row.statusStr === '已签约' || scope.row.statusStr === '已入驻' || scope.row.statusStr === '已退房' || scope.row.statusStr === '放弃资格'"
  182. @click="handleSubscribe(scope.row)"
  183. >认购
  184. </el-button>
  185. <el-button
  186. size="mini"
  187. type="text"
  188. @click="handleGiveUp(scope.row)"
  189. >放弃资格
  190. </el-button>
  191. <el-button
  192. size="mini"
  193. type="text"
  194. @click="handleView(scope.row)"
  195. >查看
  196. </el-button>
  197. </template>
  198. </el-table-column>
  199. </el-table>
  200. <div class="table-page">
  201. <el-pagination
  202. :current-page.sync="currentPage"
  203. :page-sizes="[10, 20, 50, 100]"
  204. :page-size="pageSize"
  205. background
  206. layout="total, sizes, prev, pager, next, jumper"
  207. :total="allpage"
  208. @size-change="handleSizeChange"
  209. @current-change="handleCurrentChange"
  210. />
  211. </div>
  212. </el-col>
  213. </el-row>
  214. <!--新增-->
  215. <el-dialog
  216. :visible.sync="dialogAddVisible"
  217. :close-on-click-modal="false"
  218. :close-on-press-escape="false"
  219. :title="dialogAddTitle"
  220. width="90%"
  221. top="20px"
  222. class="statistic_base"
  223. :append-to-body="true"
  224. :modal-append-to-body="true"
  225. custom-class="tagdialog"
  226. @close="getData"
  227. >
  228. <add-customer v-if="dialogAddVisible" ref="addCustomer" @cancel="cancel" />
  229. </el-dialog>
  230. <!--选房-->
  231. <el-dialog
  232. :visible.sync="dialogHouseVisible"
  233. :close-on-click-modal="false"
  234. :close-on-press-escape="false"
  235. title="选房"
  236. width="90%"
  237. top="20px"
  238. class="statistic_base"
  239. :append-to-body="true"
  240. :modal-append-to-body="true"
  241. custom-class="tagdialog"
  242. @close="getData"
  243. >
  244. <add-house v-if="dialogHouseVisible" ref="addHouse" @cancel="cancel" />
  245. </el-dialog>
  246. <!--认购金-->
  247. <el-dialog
  248. :visible.sync="dialogSubscribeVisible"
  249. :close-on-click-modal="false"
  250. :close-on-press-escape="false"
  251. title=""
  252. width="90%"
  253. top="20px"
  254. class="statistic_base"
  255. :append-to-body="true"
  256. :modal-append-to-body="true"
  257. custom-class="tagdialog"
  258. @close="getData"
  259. >
  260. <subscribe-index v-if="dialogSubscribeVisible" ref="subscribeIndex" @cancel="cancel" />
  261. </el-dialog>
  262. <!--意向金-->
  263. <el-dialog
  264. :visible.sync="dialogIntentionalVisible"
  265. :close-on-click-modal="false"
  266. :close-on-press-escape="false"
  267. title=""
  268. width="90%"
  269. top="20px"
  270. class="statistic_base"
  271. :append-to-body="true"
  272. :modal-append-to-body="true"
  273. custom-class="tagdialog"
  274. @close="getData"
  275. >
  276. <add-intentional-deposit v-if="dialogIntentionalVisible" ref="addIntentionalDeposit" @cancel="cancel" />
  277. </el-dialog>
  278. <!--放弃资格-->
  279. <el-dialog
  280. :visible.sync="dialogAbandonVisible"
  281. :close-on-click-modal="false"
  282. :close-on-press-escape="false"
  283. title=""
  284. width="90%"
  285. top="20px"
  286. class="statistic_base"
  287. :append-to-body="true"
  288. :modal-append-to-body="true"
  289. custom-class="tagdialog"
  290. @close="getData"
  291. >
  292. <add-abandon v-if="dialogAbandonVisible" ref="addAbandon" @cancel="cancel" />
  293. </el-dialog>
  294. <!-- 批量导入 -->
  295. <upload-cost
  296. v-if="importVisible"
  297. :dialog-visible="importVisible"
  298. :import-type="importType"
  299. :upload-title="uploadTitle"
  300. :import-title="importTitle"
  301. @cancelUpload="cancelImport"
  302. />
  303. </div>
  304. </template>
  305. <script>
  306. import Base from '@/views/base/base'
  307. import BaseData from '@/views/base/baseData'
  308. import BaseDept from '@/views/base/baseDept.vue'
  309. import AddCustomer from '@/views/customerManagement/numberManagement/addCustomer.vue'
  310. import AddHouse from '@/views/customerManagement/roomChose/addHouse.vue'
  311. import SubscribeIndex from '@/views/customerManagement/subscribe/subscribeIndex.vue'
  312. import AddIntentionalDeposit from '@/views/customerManagement/intentionalDeposit/addIntentionalDeposit.vue'
  313. import AddAbandon from '@/views/customerManagement/numberManagement/addAbandon.vue'
  314. import constant from '@/static/utils/constant'
  315. import uploadCost from '@/views/customerManagement/component/uploadCost.vue'
  316. export default {
  317. name: 'NumberManagement',
  318. components: { AddIntentionalDeposit, AddHouse, AddCustomer, SubscribeIndex, AddAbandon, uploadCost },
  319. mixins: [Base, BaseData, BaseDept],
  320. data() {
  321. return {
  322. dc_key: ['BUYING_HOUSE_STATUS', 'INTENTIONAL_DEPOSIT_STATUS'],
  323. search: {},
  324. AllData: [],
  325. loading: false,
  326. groupIds: [],
  327. discIds: [],
  328. dialogAddVisible: false,
  329. dialogHouseVisible: false,
  330. dialogSubscribeVisible: false,
  331. dialogIntentionalVisible: false,
  332. dialogAbandonVisible: false,
  333. groupOption: [],
  334. discOption: [],
  335. dialogAddTitle: '',
  336. // 批量导入
  337. importVisible: false,
  338. importType: '',
  339. importTitle: '',
  340. uploadTitle: [],
  341. excelFlag: false
  342. }
  343. },
  344. mounted() {
  345. this.getGroupList(true)
  346. // this.getDiscList()
  347. this.initDict(this.dc_key).then((res) => {
  348. this.getData()
  349. })
  350. },
  351. methods: {
  352. getData: function() {
  353. const _this = this
  354. _this.loading = true
  355. _this.AllData = []
  356. this.search.pageNum = this.currentPage
  357. this.search.pageSize = this.pageSize
  358. this.baseRequest('list', this.search).then((res) => {
  359. if (res.data.rows) {
  360. res.data.rows.forEach(function(item) {
  361. const json = _this.getItemJson(item)
  362. _this.AllData.push(json)
  363. })
  364. _this.allpage = res.data.total
  365. }
  366. _this.loading = false
  367. }).catch(() => {
  368. })
  369. },
  370. getItemJson: function(item) {
  371. item.statusStr = this.dc_map.BUYING_HOUSE_STATUS[item.status]
  372. item.intentionalDepositStatusStr = this.dc_map.INTENTIONAL_DEPOSIT_STATUS[item.intentionalDepositStatus]
  373. return item
  374. },
  375. handleSearch() {
  376. this.getData()
  377. },
  378. handleReset() {
  379. for (const i in this.search) {
  380. if (i !== 'pageNum' && i !== 'pageSize') {
  381. this.search[i] = ''
  382. }
  383. }
  384. this.groupIds = []
  385. this.discIds = []
  386. this.discOption = []
  387. this.handleSearch()
  388. },
  389. handleAdd() {
  390. this.dialogAddVisible = true
  391. this.dialogAddTitle = '新增'
  392. const data = {
  393. isView: false
  394. }
  395. // 新vue时调用的方法
  396. this.$nextTick(() => {
  397. this.$refs.addCustomer.initData(data)
  398. })
  399. },
  400. batchImport() {
  401. this.importVisible = true
  402. this.importType = 'insert'
  403. this.importTitle = '批量导入'
  404. },
  405. cancelImport(refresh) {
  406. this.importVisible = false
  407. this.importType = ''
  408. this.getData()
  409. },
  410. handleDelete() {
  411. console.log('this.multipleSelection', this.multipleSelection)
  412. if (!this.multipleSelection || this.multipleSelection.length === 0) {
  413. this.$message({
  414. type: 'warning',
  415. message: '请选择数据!'
  416. })
  417. return
  418. }
  419. const data = {
  420. ids: this.multipleSelection.map(obj => { return obj.id }).join(',')
  421. }
  422. this.$confirm('确认删除该数据,删除后将无法恢复,确认删除吗?', '提示', {
  423. confirmButtonText: '确定',
  424. cancelButtonText: '取消',
  425. type: 'warning'
  426. }).then(() => {
  427. this.baseRequest('delete', data).then(res => {
  428. if (res.data.code === 200) {
  429. this.getData()
  430. this.$message({
  431. type: 'success',
  432. message: '删除成功!'
  433. })
  434. } else {
  435. this.$message({
  436. type: 'error',
  437. message: res.data.msg
  438. })
  439. }
  440. }).catch((err) => {
  441. this.$message({
  442. type: 'error',
  443. message: err
  444. })
  445. })
  446. }).catch(() => {
  447. this.$message({
  448. type: 'info',
  449. message: '已取消删除'
  450. })
  451. })
  452. },
  453. /* 编辑*/
  454. handleEdit: function(val) {
  455. this.dialogAddVisible = true
  456. this.dialogAddTitle = '修改'
  457. val.isView = false
  458. // 新vue时调用的方法
  459. this.$nextTick(() => {
  460. this.$refs.addCustomer.initData(val)
  461. })
  462. },
  463. /* 选房*/
  464. handleHouse: function(val) {
  465. this.dialogHouseVisible = true
  466. val.customerManagementId = val.id
  467. // 新vue时调用的方法
  468. this.$nextTick(() => {
  469. this.$refs.addHouse.initData(val)
  470. })
  471. },
  472. /* 认购*/
  473. handleSubscribe: function(val) {
  474. this.dialogSubscribeVisible = true
  475. // 新vue时调用的方法
  476. this.$nextTick(() => {
  477. this.$refs.subscribeIndex.initData(val)
  478. })
  479. },
  480. /* 放弃资格*/
  481. handleGiveUp(val) {
  482. this.dialogAbandonVisible = true
  483. // 新vue时调用的方法
  484. this.$nextTick(() => {
  485. this.$refs.addAbandon.initData(val)
  486. })
  487. },
  488. // 意向金
  489. handleIntentionalDeposit(val) {
  490. this.dialogIntentionalVisible = true
  491. // 新vue时调用的方法
  492. this.$nextTick(() => {
  493. this.$refs.addIntentionalDeposit.initData(val, 'customer')
  494. })
  495. },
  496. handleView(val) {
  497. val.isView = true
  498. this.dialogAddVisible = true
  499. // 新vue时调用的方法
  500. this.$nextTick(() => {
  501. this.$refs.addCustomer.initData(val)
  502. })
  503. },
  504. downLoad() {
  505. this.multipleSelection.forEach(item => {
  506. const url = constant.BASE_URI + '/CustomerManagementController/download?id=' + item.id
  507. window.open(url, '_blank')
  508. })
  509. },
  510. checkedBox(i) {
  511. if (this.groupIds.includes(i)) {
  512. // includes()方法判断是否包含某一元素,返回true或false表示是否包含元素,对NaN一样有效
  513. // filter()方法用于把Array的某些元素过滤掉,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素:生成新的数组
  514. this.groupIds = this.groupIds.filter(function(ele) {
  515. return ele !== i
  516. })
  517. } else {
  518. this.groupIds.push(i)
  519. }
  520. this.search.groupIds = this.groupIds.join(',')
  521. this.getDiscList()
  522. },
  523. checkedFQBox(i) {
  524. if (this.discIds.includes(i)) {
  525. // includes()方法判断是否包含某一元素,返回true或false表示是否包含元素,对NaN一样有效
  526. // filter()方法用于把Array的某些元素过滤掉,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素:生成新的数组
  527. this.discIds = this.discIds.filter(function(ele) {
  528. return ele !== i
  529. })
  530. } else {
  531. this.discIds.push(i)
  532. }
  533. this.search.discIds = this.discIds.join(',')
  534. },
  535. cancel() {
  536. this.dialogAddVisible = false
  537. this.dialogHouseVisible = false
  538. this.dialogSubscribeVisible = false
  539. this.dialogIntentionalVisible = false
  540. this.dialogAbandonVisible = false
  541. },
  542. getGroupList(firstLoad) {
  543. this.groupOption = []
  544. this.baseParkRequest('listAll', {}).then(res => {
  545. if (res.data) {
  546. // const idArr = res.data.map(obj => { return obj.id })
  547. this.groupOption.push({
  548. label: '全部',
  549. // value: idArr.join(',')
  550. value: ''
  551. })
  552. res.data.forEach(item => {
  553. const obj = {
  554. label: item.groupName,
  555. value: item.id
  556. }
  557. this.groupOption.push(obj)
  558. })
  559. // if (firstLoad) {
  560. // this.checkedBox(this.groupOption[1].value)
  561. // }
  562. }
  563. })
  564. },
  565. getDiscList() {
  566. this.discOption = []
  567. const data = {
  568. groupIds: this.search.groupIds
  569. }
  570. this.baseFQRequest('listAll', data).then(res => {
  571. if (res.data) {
  572. // const idArr = res.data.map(obj => { return obj.id })
  573. this.discOption.push({
  574. label: '全部',
  575. // value: idArr.join(',')
  576. value: ''
  577. })
  578. res.data.forEach(item => {
  579. const obj = {
  580. label: item.name,
  581. value: item.id
  582. }
  583. this.discOption.push(obj)
  584. })
  585. }
  586. })
  587. },
  588. // 导出
  589. handleExcel: function() {
  590. const _this = this
  591. _this.excelFlag = true
  592. this.search.pageNum = this.currentPage
  593. this.search.pageSize = this.pageSize
  594. this.OutData = []
  595. const title = ['批次号', '选房号', '买受人', '身份证号', '选房日']
  596. this.OutData.push(title)
  597. const temp = []
  598. this.baseRequest('excelList', _this.search).then(res => {
  599. const data = res.data
  600. data.data.forEach(function(item) {
  601. const json = _this.getItemJson(item)
  602. temp.push(json)
  603. })
  604. temp.forEach(function(item) {
  605. const jsonArray = []
  606. jsonArray.push(item.batchNumber)
  607. jsonArray.push(item.roomSelectionNumber)
  608. jsonArray.push(item.buyerName)
  609. jsonArray.push(item.buyerIdentityCard)
  610. jsonArray.push(item.roomSelectionDate)
  611. _this.OutData.push(jsonArray)
  612. })
  613. const OutSize = [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }]
  614. const fileName = '客户导出 ' + new Date().Format('yyyyMMddhhmm')
  615. this.$outputXlsxFile(this.OutData, OutSize, fileName)
  616. _this.excelFlag = false
  617. })
  618. },
  619. baseRequest(opUrl, postData) {
  620. return this.$channel.globeRequest('CustomerManagementController', opUrl, postData, '')
  621. },
  622. baseParkRequest: function(opUrl, postData) {
  623. return this.$channel.baseRequest('ParkInfoController', opUrl, postData, '')
  624. },
  625. baseFQRequest: function(opUrl, postData) {
  626. return this.$channel.baseRequest('ParkFloorDiscController', opUrl, postData, '')
  627. }
  628. }
  629. }
  630. </script>
  631. <style scoped>
  632. .ch-input .el-input__inner {
  633. border-color: #32323A;
  634. }
  635. .ch-input-size {
  636. width: 150px;
  637. }
  638. .ch-button {
  639. border-color: #32323A;
  640. background-color: #32323A;
  641. color: #fff;
  642. }
  643. .ch-button-warning {
  644. margin-left: 10px;
  645. border-color: #E6A23C;
  646. background-color: #E6A23C;
  647. color: #fff;
  648. }
  649. .ch-button-export {
  650. margin-left: 10px;
  651. border-color: #98CC1F;
  652. background-color: #98CC1F;
  653. color: #fff;
  654. }
  655. .listBox {
  656. margin-left: 20px;
  657. display: flex;
  658. flex-wrap: wrap;
  659. }
  660. .list {
  661. border-radius: 4px;
  662. margin-right: 20px;
  663. margin-top: 15px;
  664. cursor: pointer;
  665. margin-bottom: 15px;
  666. width: 138px;
  667. height: 28px;
  668. text-align: center;
  669. line-height: 28px;
  670. background: #EBEBEB;
  671. color: #777777;
  672. }
  673. .checked {
  674. color: #2C27D0;
  675. background: #EAEAF8;
  676. /*border: 1px solid #3377ff;*/
  677. }
  678. .ch-button-danger {
  679. margin-left: 10px;
  680. border-color: #ff4949;
  681. background-color: #ff4949;
  682. color: #fff;
  683. }
  684. </style>