index.vue 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
  4. <el-form-item label="事件类型" prop="eventType">
  5. <el-select v-model="queryParams.eventType" placeholder="请选择事件类型" clearable size="small" disabeld>
  6. <el-option
  7. v-for="dict in dict.type.event_type"
  8. :key="dict.value"
  9. :label="dict.label"
  10. :value="dict.value"
  11. />
  12. </el-select>
  13. </el-form-item>
  14. <el-form-item label="事件编号" prop="eventNo">
  15. <el-input
  16. v-model="queryParams.eventNo"
  17. placeholder="请输入事件编号"
  18. clearable
  19. size="small"
  20. @keyup.enter.native="handleQuery"
  21. />
  22. </el-form-item>
  23. <el-form-item label="事件名称" prop="eventName">
  24. <el-input
  25. v-model="queryParams.eventName"
  26. placeholder="请输入事件名称"
  27. clearable
  28. size="small"
  29. @keyup.enter.native="handleQuery"
  30. />
  31. </el-form-item>
  32. <el-form-item label="执行于" prop="eventTime">
  33. <el-date-picker
  34. clearable size="small"
  35. v-model="queryParams.eventTime"
  36. type="datetime"
  37. value-format="yyyy-MM-dd HH:mm:ss"
  38. placeholder="选择执行于">
  39. </el-date-picker>
  40. </el-form-item>
  41. <el-form-item label="事件状态" prop="eventStatus">
  42. <el-select v-model="queryParams.eventStatus" placeholder="请选择事件状态" clearable size="small">
  43. <el-option
  44. v-for="dict in dict.type.event_status"
  45. :key="dict.value"
  46. :label="dict.label"
  47. :value="dict.value"
  48. />
  49. </el-select>
  50. </el-form-item>
  51. <el-form-item>
  52. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  53. <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
  54. </el-form-item>
  55. </el-form>
  56. <el-row :gutter="10" class="mb8">
  57. <el-col :span="1.5">
  58. <el-button
  59. type="primary"
  60. plain
  61. icon="el-icon-plus"
  62. size="mini"
  63. @click="handleAdd"
  64. v-hasPermi="['eventConfig:event:add']"
  65. >新增
  66. </el-button>
  67. </el-col>
  68. <el-col :span="1.5">
  69. <el-button
  70. type="success"
  71. plain
  72. icon="el-icon-edit"
  73. size="mini"
  74. :disabled="single"
  75. @click="handleUpdate"
  76. v-hasPermi="['eventConfig:event:edit']"
  77. >修改
  78. </el-button>
  79. </el-col>
  80. <el-col :span="1.5">
  81. <el-button
  82. type="danger"
  83. plain
  84. icon="el-icon-delete"
  85. size="mini"
  86. :disabled="multiple"
  87. @click="handleDelete"
  88. v-hasPermi="['eventConfig:event:remove']"
  89. >删除
  90. </el-button>
  91. </el-col>
  92. <el-col :span="1.5">
  93. <el-button
  94. type="warning"
  95. plain
  96. icon="el-icon-download"
  97. size="mini"
  98. :loading="exportLoading"
  99. @click="handleExport"
  100. v-hasPermi="['eventConfig:event:export']"
  101. >导出
  102. </el-button>
  103. </el-col>
  104. <el-col :span="1.5" v-if="queryParams.eventType === '1'">
  105. <el-button
  106. type="warning"
  107. plain
  108. icon="el-icon-edit"
  109. size="mini"
  110. :loading="exportLoading"
  111. @click="noticeShow"
  112. >预约公告
  113. </el-button>
  114. </el-col>
  115. <el-col :span="1.5" v-if="queryParams.eventType === '1'">
  116. <div style="padding: 5px">
  117. <el-switch
  118. @change="setNoticeStatus"
  119. v-model="noticeForm.openStatus"
  120. active-text="打开公告"
  121. inactive-text="关闭公告">
  122. </el-switch>
  123. </div>
  124. </el-col>
  125. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  126. </el-row>
  127. <!--社团活动-->
  128. <el-table v-if="queryParams.eventType === '1'" v-loading="loading" :data="eventList"
  129. @selection-change="handleSelectionChange"
  130. @expand-change="unfoldTable">
  131. <el-table-column type="expand">
  132. <template slot-scope="props">
  133. <el-upload
  134. :action="uploadImgUrl"
  135. list-type="picture-card"
  136. :before-upload="handleBeforeUpload"
  137. :on-error="handleUploadError"
  138. :on-success="handleUploadSuccess"
  139. :on-remove="handleRemove"
  140. :on-preview="handlePictureCardPreview"
  141. :headers="{
  142. eventId:props.row.id,
  143. Authorization: 'Bearer ' + token
  144. }"
  145. :file-list="props.row.eventImgUrls">
  146. <i class="el-icon-plus"></i>
  147. </el-upload>
  148. <el-dialog :visible.sync="dialogVisible">
  149. <img width="100%" :src="dialogImageUrl" alt="">
  150. </el-dialog>
  151. </template>
  152. </el-table-column>
  153. <el-table-column type="selection" width="30" align="center"/>
  154. <el-table-column label="编码" align="center" prop="eventNo"/>
  155. <el-table-column label="事件类型" align="center" prop="eventType">
  156. <template slot-scope="scope">
  157. <dict-tag :options="dict.type.event_type" :value="scope.row.eventType"/>
  158. </template>
  159. </el-table-column>
  160. <el-table-column label="事件类型" align="center" prop="activityTypeId">
  161. <template slot-scope="scope">
  162. <el-select v-model="scope.row.activityTypeId" disabled>
  163. <el-option v-for="item in associationsList"
  164. :label="item.projectName"
  165. :value="item.id"
  166. :key="item.id"
  167. />
  168. </el-select>
  169. </template>
  170. </el-table-column>
  171. <el-table-column label="名称" align="center" prop="eventName"/>
  172. <el-table-column label="地点" align="center" prop="eventPlace" v-if="queryParams.eventStatus !== '1'" width="150">
  173. <template slot-scope="scope">
  174. <treeselect v-model="scope.row.eventPlace" :options="placeOptions" :normalizer="normalizer"
  175. placeholder="请选择地点"
  176. disabled/>
  177. </template>
  178. </el-table-column>
  179. <el-table-column label="数量限制" align="center" prop="limitNum"/>
  180. <el-table-column label="禁止取消预约时限" align="center" prop="banCancelSubscribeTimeLimit"/>
  181. <el-table-column label="开始前提醒时限" align="center" prop="howLongRemind"/>
  182. <el-table-column label="活动开始于" align="center" prop="eventStartTime" width="90">
  183. <template slot-scope="scope">
  184. <span>{{ parseTime(scope.row.eventStartTime, '{y}-{m}-{d} {h}:{i}') }}</span>
  185. </template>
  186. </el-table-column>
  187. <el-table-column label="活动结束于" align="center" prop="eventEndTime" width="90">
  188. <template slot-scope="scope">
  189. <span>{{ parseTime(scope.row.eventEndTime, '{y}-{m}-{d} {h}:{i}') }}</span>
  190. </template>
  191. </el-table-column>
  192. <el-table-column label="预约开始于" align="center" prop="startTime" width="90">
  193. <template slot-scope="scope">
  194. <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
  195. </template>
  196. </el-table-column>
  197. <!-- <el-table-column label="预约结束于" align="center" prop="endTime" width="90">-->
  198. <!-- <template slot-scope="scope">-->
  199. <!-- <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>-->
  200. <!-- </template>-->
  201. <!-- </el-table-column>-->
  202. <el-table-column label="事件状态" align="center" prop="eventStatus">
  203. <template slot-scope="scope">
  204. <dict-tag :options="dict.type.event_status" :value="scope.row.eventStatus"/>
  205. </template>
  206. </el-table-column>
  207. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  208. <template slot-scope="scope">
  209. <el-button
  210. size="mini"
  211. type="text"
  212. icon="el-icon-edit"
  213. @click="handleUpdate(scope.row)"
  214. v-hasPermi="['eventConfig:event:edit']"
  215. >修改
  216. </el-button>
  217. <el-button
  218. size="mini"
  219. type="text"
  220. icon="el-icon-delete"
  221. @click="handleDelete(scope.row)"
  222. v-hasPermi="['eventConfig:event:remove']"
  223. >删除
  224. </el-button>
  225. </template>
  226. </el-table-column>
  227. </el-table>
  228. <!--积分兑换-->
  229. <el-table v-else-if="queryParams.eventType === '2'" v-loading="loading" :data="eventList"
  230. @selection-change="handleSelectionChange">
  231. <el-table-column type="selection" width="55" align="center"/>
  232. <el-table-column label="编码" align="center" prop="eventNo"/>
  233. <el-table-column label="事件类型" align="center" prop="eventType">
  234. <template slot-scope="scope">
  235. <dict-tag :options="dict.type.event_type" :value="scope.row.eventType"/>
  236. </template>
  237. </el-table-column>
  238. <el-table-column label="名称" align="center" prop="eventName"/>
  239. <el-table-column label="兑换开始于" align="center" prop="startTime">
  240. <template slot-scope="scope">
  241. <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
  242. </template>
  243. </el-table-column>
  244. <el-table-column label="兑换结束于" align="center" prop="endTime">
  245. <template slot-scope="scope">
  246. <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
  247. </template>
  248. </el-table-column>
  249. <el-table-column label="事件状态" align="center" prop="eventStatus">
  250. <template slot-scope="scope">
  251. <dict-tag :options="dict.type.event_status" :value="scope.row.eventStatus"/>
  252. </template>
  253. </el-table-column>
  254. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  255. <template slot-scope="scope">
  256. <el-button
  257. size="mini"
  258. type="text"
  259. icon="el-icon-connection"
  260. @click="bindingGiftChild(scope.row)"
  261. >绑定商品
  262. </el-button>
  263. <el-button
  264. size="mini"
  265. type="text"
  266. icon="el-icon-edit"
  267. @click="handleUpdate(scope.row)"
  268. v-hasPermi="['eventConfig:event:edit']"
  269. >修改
  270. </el-button>
  271. <el-button
  272. size="mini"
  273. type="text"
  274. icon="el-icon-delete"
  275. @click="handleDelete(scope.row)"
  276. v-hasPermi="['eventConfig:event:remove']"
  277. >删除
  278. </el-button>
  279. </template>
  280. </el-table-column>
  281. </el-table>
  282. <pagination
  283. v-show="total>0"
  284. :total="total"
  285. :page.sync="queryParams.pageNum"
  286. :limit.sync="queryParams.pageSize"
  287. @pagination="getList"
  288. />
  289. <!-- 添加或修改活动配置对话框 -->
  290. <el-dialog :title="title" :visible.sync="open" width="1400px" append-to-body>
  291. <el-form v-if="queryParams.eventType === '1'" ref="form" :model="form" :rules="rules">
  292. <el-row :gutter="30">
  293. <el-col :span="12">
  294. <el-form-item label="编码" prop="eventNo">
  295. <el-input v-model="form.eventNo" placeholder="请输入事件编号"/>
  296. </el-form-item>
  297. <el-form-item label="活动名称" prop="eventName">
  298. <el-input v-model="form.eventName" placeholder="请输入活动名称" disabled/>
  299. </el-form-item>
  300. <el-row :gutter="50">
  301. <el-col :span="12">
  302. <el-form-item label="项目" prop="eventName">
  303. <el-select v-model="form.activityTypeId">
  304. <el-option v-for="item in associationsList"
  305. :label="item.projectName"
  306. :value="item.id"
  307. :key="item.id"
  308. />
  309. </el-select>
  310. </el-form-item>
  311. </el-col>
  312. <el-col :span="12">
  313. <el-form-item label="事件状态" prop="eventStatus">
  314. <el-select v-model="form.eventStatus" placeholder="请选择事件状态">
  315. <el-option
  316. v-for="dict in dict.type.event_status"
  317. :key="dict.value"
  318. :label="dict.label"
  319. :value="dict.value"
  320. ></el-option>
  321. </el-select>
  322. </el-form-item>
  323. </el-col>
  324. </el-row>
  325. <el-form-item label="地点" prop="eventPlace" v-if="queryParams.eventType === '1'">
  326. <treeselect v-model="form.eventPlace" :options="placeOptions" :normalizer="normalizer"
  327. placeholder="请选择地点"/>
  328. </el-form-item>
  329. <el-row>
  330. <el-col :span="8">
  331. <el-form-item label="数量限制" prop="limitNum">
  332. <el-row>
  333. <el-col :span="18">
  334. <el-input v-model="form.limitNum" placeholder="请输入数量限制"/>
  335. </el-col>
  336. <el-col :span="1">
  337. <div style="padding: 0.5px">
  338. </div>
  339. </el-col>
  340. <el-col :span="4"> 名</el-col>
  341. </el-row>
  342. </el-form-item>
  343. </el-col>
  344. <el-col :span="8">
  345. <el-form-item label="禁止取消预约时限" prop="banCancelSubscribeTimeLimit">
  346. <el-row>
  347. <el-col :span="18">
  348. <el-input v-model="form.banCancelSubscribeTimeLimit" placeholder="请输入禁止取消预约时限"/>
  349. </el-col>
  350. <el-col :span="1">
  351. <div style="padding: 0.5px">
  352. </div>
  353. </el-col>
  354. <el-col :span="4">小时</el-col>
  355. </el-row>
  356. </el-form-item>
  357. </el-col>
  358. <el-col :span="8">
  359. <el-form-item label="活动开始前多久提示" prop="howLongRemind">
  360. <el-row>
  361. <el-col :span="19">
  362. <el-input v-model="form.howLongRemind" placeholder="请输入活动开始前多久提示"/>
  363. </el-col>
  364. <el-col :span="1">
  365. <div style="padding: 0.5px">
  366. </div>
  367. </el-col>
  368. <el-col :span="4">小时</el-col>
  369. </el-row>
  370. </el-form-item>
  371. </el-col>
  372. </el-row>
  373. <div v-if="form.id === null">
  374. <el-button
  375. size="mini"
  376. type="text"
  377. icon="el-icon-plus"
  378. @click="addEvent()"
  379. >添加
  380. </el-button>
  381. </div>
  382. <div v-if="form.id === null && queryParams.eventType === '1'" class="eventDiv"
  383. v-for="(item,index) in eventFormList">
  384. <el-row :gutter="10">
  385. <el-col :span="12">
  386. <el-form-item label="活动开始于" prop="eventStartTime">
  387. <el-date-picker
  388. clearable size="small"
  389. v-model="eventFormList[index].eventStartTime"
  390. type="datetime"
  391. value-format="yyyy-MM-dd HH:mm"
  392. placeholder="选择开始于">
  393. </el-date-picker>
  394. </el-form-item>
  395. </el-col>
  396. <el-col :span="12">
  397. <el-form-item label="活动结束于" prop="eventEndTime">
  398. <el-date-picker
  399. clearable size="small"
  400. v-model="eventFormList[index].eventEndTime"
  401. type="datetime"
  402. value-format="yyyy-MM-dd HH:mm"
  403. placeholder="选择开始于">
  404. </el-date-picker>
  405. </el-form-item>
  406. </el-col>
  407. </el-row>
  408. <el-row :gutter="10">
  409. <el-col :span="12">
  410. <el-form-item label="预约开始于" prop="startTime">
  411. <el-date-picker
  412. clearable size="small"
  413. v-model="eventFormList[index].startTime"
  414. type="datetime"
  415. value-format="yyyy-MM-dd HH:mm:ss"
  416. placeholder="选择开始于">
  417. </el-date-picker>
  418. </el-form-item>
  419. </el-col>
  420. </el-row>
  421. </div>
  422. <div v-if="form.id !== null" class="eventDiv">
  423. <el-row :gutter="10">
  424. <el-col :span="12">
  425. <el-form-item label="活动开始于" prop="eventStartTime">
  426. <el-date-picker
  427. clearable size="small"
  428. v-model="form.eventStartTime"
  429. type="datetime"
  430. value-format="yyyy-MM-dd HH:mm"
  431. placeholder="选择开始于">
  432. </el-date-picker>
  433. </el-form-item>
  434. </el-col>
  435. <el-col :span="12">
  436. <el-form-item label="活动结束于" prop="eventEndTime">
  437. <el-date-picker
  438. clearable size="small"
  439. v-model="form.eventEndTime"
  440. type="datetime"
  441. value-format="yyyy-MM-dd HH:mm"
  442. placeholder="选择开始于">
  443. </el-date-picker>
  444. </el-form-item>
  445. </el-col>
  446. </el-row>
  447. <el-row :gutter="10">
  448. <el-col :span="12">
  449. <el-form-item label="预约开始于" prop="startTime">
  450. <el-date-picker
  451. clearable size="small"
  452. v-model="form.startTime"
  453. type="datetime"
  454. value-format="yyyy-MM-dd HH:mm:ss"
  455. placeholder="选择开始于">
  456. </el-date-picker>
  457. </el-form-item>
  458. </el-col>
  459. </el-row>
  460. </div>
  461. </el-col>
  462. <el-col :span="12">
  463. <el-form-item label="描述" v-if="queryParams.eventType === '1'">
  464. <editor v-model="form.eventDescribe" :min-height="392"/>
  465. </el-form-item>
  466. <el-form-item label="备注" prop="remark">
  467. <el-input v-model="form.remark" placeholder="请输入备注"/>
  468. </el-form-item>
  469. </el-col>
  470. </el-row>
  471. </el-form>
  472. <el-form v-if="queryParams.eventType === '2'" ref="form" :model="form" :rules="rules">
  473. <el-form-item label="编码" prop="eventNo">
  474. <el-input v-model="form.eventNo" placeholder="请输入事件编号"/>
  475. </el-form-item>
  476. <el-form-item label="事件状态" prop="eventStatus">
  477. <el-select v-model="form.eventStatus" placeholder="请选择事件状态">
  478. <el-option
  479. v-for="dict in dict.type.event_status"
  480. :key="dict.value"
  481. :label="dict.label"
  482. :value="dict.value"
  483. ></el-option>
  484. </el-select>
  485. </el-form-item>
  486. <el-form-item label="活动名称" prop="eventName">
  487. <el-input v-model="item.eventName" placeholder="请输入活动名称"/>
  488. </el-form-item>
  489. <el-form-item label="预约开始于" prop="startTime">
  490. <el-date-picker
  491. clearable size="small"
  492. v-model="item.startTime"
  493. type="datetime"
  494. value-format="yyyy-MM-dd HH:mm:ss"
  495. placeholder="选择开始于">
  496. </el-date-picker>
  497. </el-form-item>
  498. <el-form-item label="预约结束于" prop="endTime">
  499. <el-date-picker
  500. clearable size="small"
  501. v-model="form.endTime"
  502. type="datetime"
  503. value-format="yyyy-MM-dd HH:mm:ss"
  504. placeholder="选择结束于">
  505. </el-date-picker>
  506. </el-form-item>
  507. <el-form-item label="备注" prop="remark">
  508. <el-input v-model="form.remark" placeholder="请输入备注"/>
  509. </el-form-item>
  510. <!--<el-form-item label="事件类型" prop="eventType">-->
  511. <!-- <el-select v-model="form.eventType" placeholder="请选择事件类型">-->
  512. <!-- <el-option-->
  513. <!-- v-for="dict in dict.type.event_type"-->
  514. <!-- :key="dict.value"-->
  515. <!-- :label="dict.label"-->
  516. <!-- :value="dict.value"-->
  517. <!-- ></el-option>-->
  518. <!-- </el-select>-->
  519. <!--</el-form-item>-->
  520. <!-- <el-form-item label="执行于" prop="eventTime">-->
  521. <!-- <el-date-picker-->
  522. <!-- clearable size="small"-->
  523. <!-- v-model="form.eventTime"-->
  524. <!-- type="datetime"-->
  525. <!-- value-format="yyyy-MM-dd HH:mm:ss"-->
  526. <!-- placeholder="选择执行于">-->
  527. <!-- </el-date-picker>-->
  528. <!-- </el-form-item>-->
  529. </el-form>
  530. <div slot="footer" class="dialog-footer">
  531. <el-button v-if="!form.id" type="primary" @click="submitEvents()">确 定</el-button>
  532. <el-button v-else type="primary" @click="submitForm">确 定</el-button>
  533. <el-button @click="cancel">取 消</el-button>
  534. </div>
  535. </el-dialog>
  536. <!-- 设置公告对话框 -->
  537. <el-dialog title="设置公告" :visible.sync="noticeForm.open" width="600px" append-to-body>
  538. <el-input v-model="noticeForm.text" placeholder="请输入公告"/>
  539. <div slot="footer" class="dialog-footer">
  540. <el-button type="primary" @click="updateNotice()" prevent-re-click>确 定</el-button>
  541. <el-button @click="cancel">取 消</el-button>
  542. </div>
  543. </el-dialog>
  544. </div>
  545. </template>
  546. <script>
  547. import { listEvent, getEvent, delEvent, addEvent, updateEvent, exportEvent, addEvents } from '@/api/eventConfig/event'
  548. import { addImg } from '@/api/event/img'
  549. import { listPlace } from '@/api/canteen/place'
  550. import user from '@/store/modules/user'
  551. import Treeselect from '@riophae/vue-treeselect'
  552. import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  553. import { listAssociations } from '@/api/event/associations'
  554. import { addConfig, getConfigKey, updateConfig } from '@/api/system/config'
  555. import { getToken } from '@/utils/auth'
  556. export default {
  557. name: 'Event',
  558. components: {
  559. Treeselect
  560. },
  561. props: {
  562. eventType: {
  563. type: String,
  564. default: ''
  565. }
  566. },
  567. dicts: ['event_type', 'event_status'],
  568. data() {
  569. return {
  570. // 地点树选项
  571. placeOptions: [],
  572. // 遮罩层
  573. loading: true,
  574. loadingImg: true,
  575. // 导出遮罩层
  576. exportLoading: false,
  577. // 选中数组
  578. ids: [],
  579. // 非单个禁用
  580. single: true,
  581. // 非多个禁用
  582. multiple: true,
  583. // 显示搜索条件
  584. showSearch: true,
  585. // 总条数
  586. total: 0,
  587. // 活动配置表格数据
  588. eventList: [],
  589. associationsList: [],
  590. id: '',
  591. // 弹出层标题
  592. title: '',
  593. // 是否显示弹出层
  594. open: false,
  595. dialogImageUrl: '',
  596. dialogVisible: false,
  597. hideUpload: false,
  598. uploadImgUrl: process.env.VUE_APP_BASE_API + '/event/img/upload', // 上传的图片服务器地址
  599. headers: {
  600. Authorization: 'Bearer ' + getToken()
  601. },
  602. token: getToken(),
  603. fileList: [],
  604. // 查询参数
  605. queryParams: {
  606. pageNum: 1,
  607. pageSize: 10,
  608. eventNo: null,
  609. eventName: null,
  610. eventStartTime: null,
  611. eventEndTime: null,
  612. startTime: null,
  613. eventTime: null,
  614. endTime: null,
  615. eventType: null,
  616. eventPlace: null,
  617. eventDescribe: null,
  618. eventStatus: null,
  619. isDelete: null
  620. },
  621. noticeForm: {
  622. open: false,
  623. text: '',
  624. openStatus: false,
  625. openStatusKey: 'club_notice_open',
  626. openStatusData: {},
  627. key: 'club_notice',
  628. data: {}
  629. },
  630. // 表单参数
  631. form: {},
  632. eventFormList: [{
  633. eventName: '',
  634. startTime: null,
  635. eventType: '1',
  636. eventStartTime: null,
  637. eventEndTime: null
  638. }],
  639. // 表单校验
  640. rules: {}
  641. }
  642. },
  643. created() {
  644. this.getNoticeStatus()
  645. this.getNotice()
  646. this.getTreeselect()
  647. this.getAssList()
  648. this.getList()
  649. },
  650. methods: {
  651. submitEvents() {
  652. for (let i = 0; i < this.eventFormList.length; i++) {
  653. this.eventFormList[i] = { ...this.form, ...this.eventFormList[i] }
  654. this.eventFormList[i].eventNo = this.eventFormList[i].eventNo + i
  655. }
  656. addEvents(this.eventFormList).then(res => {
  657. if (res.code === 200) {
  658. this.getList()
  659. this.$modal.msgSuccess('新增成功')
  660. this.cancel()
  661. }
  662. })
  663. },
  664. addEvent() {
  665. if (this.eventFormList.length > 0) {
  666. this.eventFormList.push({
  667. eventName: this.eventFormList[0].eventName,
  668. startTime: this.eventFormList[0].startTime,
  669. eventType: '1',
  670. eventStartTime: this.eventFormList[0].eventStartTime,
  671. eventEndTime: this.eventFormList[0].eventEndTime
  672. })
  673. } else {
  674. this.eventFormList.push({
  675. eventName: '',
  676. startTime: null,
  677. eventType: '1',
  678. eventStartTime: null,
  679. eventEndTime: null
  680. })
  681. }
  682. console.log(this.eventFormList)
  683. },
  684. // 删除图片
  685. handleRemove(file, fileList) {
  686. const findex = this.fileList.map(f => f.name).indexOf(file.name)
  687. if (findex > -1) {
  688. this.fileList.splice(findex, 1)
  689. }
  690. },
  691. // 上传成功回调
  692. handleUploadSuccess(res) {
  693. let data = {
  694. name: res.fileName,
  695. url: res.url,
  696. type: res.type,
  697. eventId: res.eventId
  698. }
  699. this.fileList.push(data)
  700. addImg(data).then(res => {
  701. if (res.code === 200) {
  702. this.$message({
  703. type: 'success',
  704. message: '上传成功'
  705. })
  706. } else {
  707. this.$message({
  708. type: 'error',
  709. message: '上传失败'
  710. })
  711. }
  712. })
  713. this.loadingImg.close()
  714. }, // 上传失败
  715. handleUploadError() {
  716. this.$message({
  717. type: 'error',
  718. message: '上传失败'
  719. })
  720. this.loadingImg.close()
  721. },
  722. // 上传前loading加载
  723. handleBeforeUpload(file) {
  724. this.loadingImg = this.$loading({
  725. lock: true,
  726. text: '上传中',
  727. background: 'rgba(0, 0, 0, 0.7)'
  728. })
  729. },
  730. handlePictureCardPreview(file) {
  731. this.dialogImageUrl = file.url
  732. this.dialogVisible = true
  733. },
  734. noticeShow() {
  735. this.noticeForm.open = true
  736. },
  737. updateNotice() {
  738. this.noticeForm.data.configValue = this.noticeForm.text
  739. updateConfig(this.noticeForm.data).then(re => {
  740. this.$modal.msgSuccess('修改成功')
  741. this.getNotice()
  742. this.noticeForm.open = false
  743. })
  744. },
  745. getNotice() {
  746. getConfigKey(this.noticeForm.key).then(re => {
  747. if (!re.data) {
  748. addConfig({
  749. configKey: this.noticeForm.key,
  750. configValue: ''
  751. })
  752. } else {
  753. this.noticeForm.text = re.msg
  754. this.noticeForm.data = re.data
  755. }
  756. })
  757. },
  758. setNoticeStatus() {
  759. this.noticeForm.openStatusData.configValue = this.noticeForm.openStatus ? 'true' : 'false'
  760. updateConfig(this.noticeForm.openStatusData).then(re => {
  761. this.getNoticeStatus()
  762. this.$modal.msgSuccess('更新成功')
  763. })
  764. },
  765. getNoticeStatus() {
  766. getConfigKey(this.noticeForm.openStatusKey).then(re => {
  767. if (!re.msg) {
  768. addConfig({
  769. configKey: this.noticeForm.openStatusKey,
  770. configValue: 'false'
  771. })
  772. this.noticeForm.openStatus = false
  773. } else {
  774. this.noticeForm.openStatus = re.msg !== 'false'
  775. this.noticeForm.openStatusData = re.data
  776. }
  777. })
  778. },
  779. /** 查询活动配置列表 */
  780. getList() {
  781. if (this.$root._route.query.eventType) {
  782. this.queryParams.eventType = this.$root._route.query.eventType
  783. }
  784. this.loading = true
  785. listEvent(this.queryParams).then(response => {
  786. this.eventList = response.rows
  787. this.total = response.total
  788. this.loading = false
  789. })
  790. },
  791. getEventId() {
  792. return this.id
  793. },
  794. /** 查询社团信息列表 */
  795. getAssList() {
  796. listAssociations().then(response => {
  797. this.associationsList = response.rows
  798. })
  799. },
  800. /** 查询地点下拉树结构 */
  801. getTreeselect() {
  802. listPlace({ jgid: user.state.organ, placeType: 4 }).then(response => {
  803. this.placeOptions = []
  804. const data = { placeId: 0, placeName: '最上级', children: [] }
  805. data.children = this.handleTree(response.data, 'placeId', 'parentId')
  806. this.placeOptions.push(data)
  807. })
  808. },
  809. /** 转换地点数据结构 */
  810. normalizer(node) {
  811. if (node.children && !node.children.length) {
  812. delete node.children
  813. }
  814. return {
  815. id: node.placeId,
  816. label: node.placeName,
  817. children: node.children
  818. }
  819. },
  820. // 取消按钮
  821. cancel() {
  822. this.open = false
  823. this.noticeForm.open = false
  824. this.eventGiftForm.open = false
  825. this.eventFormList = []
  826. this.noticeForm.text = ''
  827. this.reset()
  828. },
  829. // 表单重置
  830. reset() {
  831. this.form = {
  832. id: null,
  833. eventNo: null,
  834. eventName: null,
  835. eventTime: null,
  836. eventType: null,
  837. eventPlace: null,
  838. eventDescribe: null,
  839. eventStatus: null,
  840. isDelete: null,
  841. createBy: null,
  842. createTime: null,
  843. updateBy: null,
  844. updateTime: null,
  845. remark: null
  846. }
  847. this.resetForm('form')
  848. },
  849. bindingGiftChild(row) {
  850. this.id = row.id
  851. this.$parent.$parent.getBindingList()
  852. },
  853. /** 搜索按钮操作 */
  854. handleQuery() {
  855. this.queryParams.pageNum = 1
  856. this.getList()
  857. },
  858. /** 重置按钮操作 */
  859. resetQuery() {
  860. this.resetForm('queryForm')
  861. this.handleQuery()
  862. },
  863. // 多选框选中数据
  864. handleSelectionChange(selection) {
  865. this.ids = selection.map(item => item.id)
  866. this.single = selection.length !== 1
  867. this.multiple = !selection.length
  868. },
  869. unfoldTable(row, expandedRows) {
  870. },
  871. /** 新增按钮操作 */
  872. handleAdd() {
  873. this.reset()
  874. this.eventFormList = [{
  875. eventName: '',
  876. startTime: null,
  877. eventType: '1',
  878. eventStartTime: null,
  879. eventEndTime: null
  880. }]
  881. if (this.$root._route.query.eventType) {
  882. this.form.eventType = this.$root._route.query.eventType
  883. }
  884. this.open = true
  885. this.title = '添加活动配置'
  886. },
  887. /** 修改按钮操作 */
  888. handleUpdate(row) {
  889. this.reset()
  890. const id = row.id || this.ids
  891. getEvent(id).then(response => {
  892. this.form = response.data
  893. this.open = true
  894. this.title = '修改活动配置'
  895. })
  896. },
  897. /** 提交按钮 */
  898. submitForm() {
  899. this.form.eventType = this.$root._route.query.eventType
  900. this.$refs['form'].validate(valid => {
  901. if (valid) {
  902. if (this.form.id != null) {
  903. updateEvent(this.form).then(() => {
  904. this.$modal.msgSuccess('修改成功')
  905. this.open = false
  906. this.getList()
  907. })
  908. } else {
  909. addEvent(this.form).then(() => {
  910. this.$modal.msgSuccess('新增成功')
  911. this.open = false
  912. this.getList()
  913. })
  914. }
  915. }
  916. })
  917. },
  918. /** 删除按钮操作 */
  919. handleDelete(row) {
  920. const ids = row.id || this.ids
  921. this.$modal.confirm('是否确认删除活动配置编号为"' + ids + '"的数据项?').then(function() {
  922. return delEvent(ids)
  923. }).then(() => {
  924. this.getList()
  925. this.$modal.msgSuccess('删除成功')
  926. }).catch(() => {
  927. })
  928. },
  929. /** 导出按钮操作 */
  930. handleExport() {
  931. const queryParams = this.queryParams
  932. this.$modal.confirm('是否确认导出所有活动配置数据项?').then(() => {
  933. this.exportLoading = true
  934. return exportEvent(queryParams)
  935. }).then(response => {
  936. this.$download.name(response.msg)
  937. this.exportLoading = false
  938. }).catch(() => {
  939. })
  940. }
  941. }
  942. }
  943. </script>
  944. <style scoped>
  945. .eventDiv {
  946. border: 1px solid #cbcbcb;
  947. padding: 20px 20px 0 20px;
  948. margin: 0 0 10px 0;
  949. border-radius: 10px;
  950. }
  951. </style>