activityList.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424
  1. <template>
  2. <div class="app-container calendar-list-container">
  3. <!-- 查询和其他操作 -->
  4. <div class="filter-container">
  5. <el-input clearable class="filter-item" style="width: 200px;" placeholder="活动名称"
  6. v-model="listQuery.title"></el-input>
  7. <el-date-picker
  8. class="filter-item"
  9. value-format="yyyy-MM-dd"
  10. v-model="listQuery.createTime"
  11. type="date"
  12. placeholder="创建日期">
  13. </el-date-picker>
  14. <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
  15. <el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-edit">添加</el-button>
  16. </div>
  17. <!-- 查询结果 -->
  18. <el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit
  19. highlight-current-row>
  20. <el-table-column type="index" label="序号" header-align="center" align="center">
  21. </el-table-column>
  22. <el-table-column align="center" min-width="100px" label="活动名称" prop="title">
  23. </el-table-column>
  24. <el-table-column align="center" min-width="100px" label="活动开始结束时间">
  25. <template slot-scope="props">
  26. {{ props.row.startTime }}~{{ props.row.endTime }}
  27. </template>
  28. </el-table-column>
  29. <el-table-column align="center" min-width="80px" label="创建人" prop="creater">
  30. </el-table-column>
  31. <el-table-column align="center" min-width="150px" label="创建时间" prop="createTime">
  32. </el-table-column>
  33. <el-table-column align="center" min-width="80px" label="活动状态" prop="statusName">
  34. </el-table-column>
  35. <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
  36. <template slot-scope="scope">
  37. <el-button type="primary" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
  38. <el-button v-if="scope.row.status == 0" type="success" size="small"
  39. @click="changeState(scope.row.actId, 1)">开启</el-button>
  40. <el-button v-if="scope.row.status == 1" type="warning" size="small"
  41. @click="changeState(scope.row.actId, 0)">关闭</el-button>
  42. <el-button type="danger" size="mini" @click="handleDelete(scope.row.welfareId, -1)">删除</el-button>
  43. </template>
  44. </el-table-column>
  45. </el-table>
  46. <!-- 分页 -->
  47. <div class="pagination-container">
  48. <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
  49. :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
  50. layout="total, sizes, prev, pager, next, jumper" :total="total">
  51. </el-pagination>
  52. </div>
  53. <!-- 添加或修改对话框 -->
  54. <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="70%">
  55. <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="100px" style='width:700px;margin-left:50px;'>
  56. <el-form-item label="活动名称" prop="title">
  57. <el-input v-model="dataForm.title" style="width: 350px"></el-input>
  58. </el-form-item>
  59. <el-form-item label="活动连接">
  60. <el-input v-model="dataForm.activityUrl" style="width: 350px"></el-input>
  61. </el-form-item>
  62. <el-form-item style="width: 800px" label="活动图片" prop="imgUrl">
  63. <el-tooltip content="建议图片宽高比260*200" placement="top-start">
  64. <el-upload :action="fileImgUrl" list-type="picture-card" :file-list="dataForm.images" :limit="1"
  65. :on-success="handleGallerySucess" :on-exceed="handleExceed" :before-upload="uploadBannerImg"
  66. :on-remove="handleRemove">
  67. <i class="el-icon-plus"></i>
  68. </el-upload>
  69. </el-tooltip>
  70. </el-form-item>
  71. <el-form-item label="开始日期" prop="startTime">
  72. <el-date-picker value-format="yyyy-MM-dd" :picker-options="setDisabled" v-model="dataForm.startTime" type="date" placeholder="请选择开始时间" style="width: 350px">
  73. </el-date-picker>
  74. </el-form-item>
  75. <el-form-item label="结束日期" prop="endTime">
  76. <el-date-picker value-format="yyyy-MM-dd" :picker-options="setDisabled" v-model="dataForm.endTime" type="date" placeholder="请选择结束时间" style="width: 350px">
  77. </el-date-picker>
  78. </el-form-item>
  79. <el-form-item label="参与人">
  80. <el-select v-model="dataForm.participants" multiple filterable placeholder="请选择" style="width: 350px">
  81. <el-option :key="item.loginId" v-for="item in participantsList" :label="item.userName" :value="item.loginId">
  82. </el-option>
  83. </el-select>
  84. </el-form-item>
  85. <el-form-item style="width: 800px" label="内容" prop="content">
  86. <tinymce v-model="dataForm.content" ref="tinymce"></tinymce>
  87. </el-form-item>
  88. </el-form>
  89. <div slot="footer" class="dialog-footer">
  90. <el-button @click="dialogFormVisible = false">取消</el-button>
  91. <el-button v-if="dialogStatus == 'create'" type="primary" @click="createData">确定</el-button>
  92. <el-button v-else type="primary" @click="updateData">确定</el-button>
  93. </div>
  94. </el-dialog>
  95. </div>
  96. </template>
  97. <style>
  98. .demo-table-expand {
  99. font-size: 0;
  100. }
  101. .demo-table-expand label {
  102. width: 200px;
  103. color: #99a9bf;
  104. }
  105. .demo-table-expand .el-form-item {
  106. margin-right: 0;
  107. margin-bottom: 0;
  108. }
  109. </style>
  110. <script>
  111. import { createItem, updateItem, activityList, activityState } from "@/api/activityManage";
  112. import { allUserList } from "@/api/public";
  113. import waves from "@/directive/waves"; // 水波纹指令
  114. import Tinymce from '@/components/Tinymce'
  115. export default {
  116. components: { Tinymce },
  117. directives: { waves },
  118. data() {
  119. return {
  120. setDisabled: {
  121. disabledDate(time) {
  122. // return time.getTime() > Date.now(); // 可选历史天、可选当前天、不可选未来天
  123. // return time.getTime() > Date.now() - 8.64e7; // 可选历史天、不可选当前天、不可选未来天
  124. // return time.getTime() < Date.now() - 8.64e7; // 不可选历史天、可选当前天、可选未来天
  125. return time.getTime() < Date.now(); // 不可选历史天、不可选当前天、可选未来天
  126. },
  127. },
  128. participantsList: [],
  129. list: [],
  130. total: 0,
  131. listLoading: false,
  132. listQuery: {
  133. page: 1,
  134. limit: 10,
  135. title: '',
  136. createTime: '',
  137. },
  138. dataForm: {
  139. title: '',
  140. imgUrl: '',
  141. activityUrl: '',
  142. startTime: '',
  143. endTime: '',
  144. participants: [],
  145. content: '',
  146. images: [],startTime
  147. },
  148. dialogFormVisible: false,
  149. dialogStatus: '',
  150. textMap: {
  151. update: "编辑",
  152. create: "创建",
  153. },
  154. rules: {
  155. title: [{ required: true, message: "请填写活动名称", trigger: "blur" }],
  156. imgUrl: [{ required: true, message: "图片不能为空", trigger: "blur" }],
  157. startTime: [
  158. { required: true, message: "请选择活动开始时间", trigger: "change" },
  159. { validator: this.checkStartTime, trigger: 'change' }
  160. ],
  161. endTime: [
  162. { required: true, message: "请选择活动结束时间", trigger: "change" },
  163. { validator: this.checkEndTime, trigger: 'change' }
  164. ],
  165. content: [{ required: true, message: "内容不能为空", trigger: "blur" }],
  166. },
  167. fileImgUrl: this.upLoadUrl,
  168. }
  169. },
  170. created() {
  171. this.getAllUserList();
  172. this.getList();
  173. },
  174. methods: {
  175. //校验开始时间
  176. checkStartTime(rule, value, callback) {
  177. if (!value) {
  178. callback(new Error("请选择活动开始时间!"));
  179. } else {
  180. if (this.dataForm.endTime && Date.parse(value) > Date.parse(this.dataForm.endTime)) {
  181. callback(new Error("活动开始时间必须小于等于活动结束时间!"))
  182. this.dataForm.startTime = '';
  183. } else {
  184. callback();
  185. }
  186. }
  187. },
  188. //校验结束时间
  189. checkEndTime(rule, value, callback) {
  190. if (!value) {
  191. callback(new Error("请选择活动结束时间!"));
  192. } else {
  193. if (!this.dataForm.startTime) {
  194. callback(new Error("请选择活动开始时间!"))
  195. this.dataForm.endTime = '';
  196. } else if (Date.parse(this.dataForm.startTime) > Date.parse(value)) {
  197. callback(new Error("活动结束时间必须大于等于活动开始时间!"))
  198. this.dataForm.endTime = '';
  199. } else {
  200. callback();
  201. }
  202. }
  203. },
  204. handleRemove(file, fileList) {
  205. console.log(file, fileList);
  206. let images = [];
  207. for (let i in fileList) {
  208. let response = fileList[i].response;
  209. let url = response.data.url;
  210. images.push(url);
  211. this.dataForm.imgUrl = images.join(",");
  212. }
  213. },
  214. uploadBannerImg(file) {
  215. const isJPGs = file.type === "image/jpeg";
  216. console.log(isJPGs);
  217. },
  218. handleExceed(files, fileList) {
  219. this.$message.warning(
  220. `当前限制选择 1 个文件,本次选择了 ${files.length} 个文件!,共选择了 ${files.length + fileList.length
  221. } 个文件`
  222. );
  223. },
  224. handleGallerySucess(res, file, fileList) {
  225. this.dataForm.imgUrl = ""; // 清空画廊图片数组
  226. let images = [];
  227. for (let i in fileList) {
  228. let response = fileList[i].response;
  229. if (response.errno && response.errno != "0") {
  230. this.$message.error("该图片上传失败,已被移除,请重新上传!");
  231. // 上传失败移除该 file 对象
  232. fileList.splice(i, 1);
  233. } else {
  234. let url = response.data.url;
  235. images.push(url);
  236. }
  237. }
  238. this.dataForm.imgUrl = images.join(",");
  239. },
  240. resetForm() {
  241. this.dataForm = {
  242. title: '',
  243. imgUrl: '',
  244. activityUrl: '',
  245. startTime: '',
  246. endTime: '',
  247. participants: undefined,
  248. content: '',
  249. images: [],
  250. };
  251. },
  252. handleCreate() {
  253. this.resetForm();
  254. this.dialogFormVisible = true;
  255. this.dialogStatus = "create";
  256. this.$nextTick(() => {
  257. this.$refs.tinymce.setContent("");
  258. this.$refs["dataForm"].clearValidate();
  259. });
  260. },
  261. createData() {
  262. this.$refs["dataForm"].validate((valid) => {
  263. if (valid) {
  264. console.log(this.dataForm);
  265. createItem(this.dataForm)
  266. .then((response) => {
  267. this.getList();
  268. this.dialogFormVisible = false;
  269. this.$notify({
  270. title: "成功",
  271. message: "创建成功",
  272. type: "success",
  273. duration: 2000,
  274. });
  275. this.getList();
  276. })
  277. .catch(() => { });
  278. }
  279. });
  280. },
  281. handleUpdate(row) {
  282. this.dataForm = Object.assign({}, row);
  283. let content = this.dataForm.content;
  284. if (this.dataForm.imgUrl) {
  285. let images = this.dataForm.imgUrl.split(",");
  286. this.dataForm.images = [];
  287. for (let i in images) {
  288. let url = images[i];
  289. let name = "image_" + i;
  290. this.dataForm.images.push({
  291. name: name,
  292. url: url,
  293. response: { error: "0", data: { url: url } },
  294. });
  295. }
  296. }
  297. this.dialogStatus = 'update'
  298. this.dialogFormVisible = true
  299. this.$nextTick(() => {
  300. this.$refs.tinymce.setContent(content);
  301. this.$refs['dataForm'].clearValidate()
  302. })
  303. },
  304. updateData() {
  305. this.$refs['dataForm'].validate((valid) => {
  306. if (valid) {
  307. updateItem(this.dataForm).then(() => {
  308. this.dialogFormVisible = false
  309. this.$notify({
  310. title: '成功',
  311. message: '更新成功',
  312. type: 'success',
  313. duration: 2000
  314. })
  315. this.getList()
  316. })
  317. }
  318. })
  319. },
  320. changeState(actId, index) {
  321. activityState({ actId: actId, status: index }).then(response => {
  322. this.$notify({
  323. title: '成功',
  324. message: '活动状态修改成功',
  325. type: 'success',
  326. duration: 2000
  327. })
  328. this.getList()
  329. })
  330. },
  331. handleDelete(welfareId, index) {
  332. this.$confirm('确认删除吗?', '提示', {
  333. confirmButtonText: '确定',
  334. cancelButtonText: '取消',
  335. type: 'warning'
  336. }).then(() => {
  337. activityState({ welfareId: welfareId, status: index }).then(response => {
  338. this.$notify({
  339. title: '成功',
  340. message: '删除成功',
  341. type: 'success',
  342. duration: 2000
  343. })
  344. this.getList();
  345. })
  346. }).catch(() => {})
  347. },
  348. getAllUserList() {
  349. allUserList().then(response => {
  350. this.participantsList = response.data.data;
  351. }).catch(() => {});
  352. },
  353. getList() {
  354. this.listLoading = true
  355. activityList(this.listQuery).then(response => {
  356. this.list = response.data.data.items
  357. this.total = response.data.data.total
  358. this.listLoading = false
  359. }).catch(() => {})
  360. },
  361. handleFilter() {
  362. this.listQuery.page = 1
  363. this.getList()
  364. },
  365. handleSizeChange(val) {
  366. this.listQuery.limit = val
  367. this.getList()
  368. },
  369. handleCurrentChange(val) {
  370. this.listQuery.page = val
  371. this.getList()
  372. },
  373. }
  374. }
  375. </script>
  376. <style>
  377. .ad-avatar-uploader .el-upload {
  378. border: 1px dashed #d9d9d9;
  379. border-radius: 6px;
  380. cursor: pointer;
  381. position: relative;
  382. overflow: hidden;
  383. }
  384. .ad-avatar-uploader .el-upload:hover {
  385. border-color: #409EFF;
  386. }
  387. .ad-avatar-uploader-icon {
  388. font-size: 28px;
  389. color: #8c939d;
  390. width: 178px;
  391. height: 178px;
  392. line-height: 178px;
  393. text-align: center;
  394. }
  395. .ad-avatar {
  396. display: block;
  397. }
  398. </style>