eidtPostMsg.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. <template>
  2. <div>
  3. <el-dialog
  4. width="500px"
  5. title="消息发送"
  6. :visible.sync="lookVisible"
  7. :before-close="onClose"
  8. >
  9. <el-form :model="formes" label-width="120px" ref="eidtPostMsg">
  10. <el-form-item
  11. label="发送方式"
  12. :rules="[{ required: true, message: '请选择发送方式' }]"
  13. prop="postType"
  14. >
  15. <el-radio-group
  16. v-model="formes.postType"
  17. @change="
  18. () => {
  19. formes.sendTime = '';
  20. }
  21. "
  22. >
  23. <el-radio label="0">即时发送</el-radio>
  24. <el-radio label="1">定时发送</el-radio>
  25. </el-radio-group>
  26. </el-form-item>
  27. <el-form-item
  28. label="发送时间"
  29. v-if="formes.postType == '1'"
  30. :rules="[{ required: true, message: '请选择发送时间' }]"
  31. prop="sendTime"
  32. >
  33. <el-date-picker
  34. v-model="formes.sendTime"
  35. type="datetime"
  36. placeholder="请选择发送时间"
  37. format="yyyy-MM-dd HH:mm:ss"
  38. value-format="yyyy-MM-dd HH:mm:ss"
  39. :picker-options="payDate()"
  40. >
  41. </el-date-picker>
  42. </el-form-item>
  43. <el-form-item
  44. label="发送内容"
  45. :rules="[{ required: true, message: '请输入发送内容' }]"
  46. prop="messageContent"
  47. >
  48. <el-input
  49. class="w100"
  50. v-model="formes.messageContent"
  51. type="textarea"
  52. :rows="3"
  53. ></el-input>
  54. </el-form-item>
  55. <el-form-item label="消息类型" prop="messageType">
  56. <el-radio-group
  57. v-model="formes.messageType"
  58. @change="
  59. () => {
  60. formes.fileUrl = '';
  61. formes.fileName = '';
  62. }
  63. "
  64. >
  65. <el-radio label="IMG">图片消息</el-radio>
  66. <el-radio label="FILE">文件消息</el-radio>
  67. </el-radio-group>
  68. </el-form-item>
  69. <el-form-item
  70. label="附件(图片)"
  71. prop="fileUrl"
  72. v-if="formes.messageType === 'IMG'"
  73. :rules="[{ required: true, message: '请上传图片' }]"
  74. >
  75. <singe-file-upload
  76. tips="仅支持上传 PNG/JPG"
  77. accept=".png, .jpg"
  78. v-model="formes.fileUrl"
  79. @getName="getName"
  80. />
  81. </el-form-item>
  82. <el-form-item
  83. label="附件(PDF)"
  84. prop="fileUrl"
  85. v-if="formes.messageType === 'FILE'"
  86. :rules="[{ required: true, message: '请上传文件' }]"
  87. >
  88. <singe-file-upload
  89. tips="仅支持上传PDF文件"
  90. accept=".pdf"
  91. v-model="formes.fileUrl"
  92. @getName="getName"
  93. />
  94. </el-form-item>
  95. </el-form>
  96. <div slot="footer" class="dialog-footer">
  97. <el-button @click="onClose">取 消</el-button>
  98. <el-button type="primary" @click="submitMsg">确 定</el-button>
  99. </div>
  100. </el-dialog>
  101. </div>
  102. </template>
  103. <script>
  104. import { sendGroupMsg, resetGroupMessageList } from "../api";
  105. export default {
  106. name: "eidtPostMsg",
  107. data() {
  108. return {
  109. formes: {
  110. id: "",
  111. postType: "0",
  112. sendTime: "",
  113. messageContent: "",
  114. messageType: "TXT",
  115. fileName: ""
  116. },
  117. lookVisible: false,
  118. chioseIdList: null,
  119. activeRow: null,
  120. type: ""
  121. };
  122. },
  123. mounted() {
  124. this.init();
  125. },
  126. methods: {
  127. init() {},
  128. openDioag(chioseIdList, type) {
  129. this.chioseIdList = chioseIdList;
  130. this.type = type;
  131. this.lookVisible = true;
  132. },
  133. openResetDioag(row, type) {
  134. if (row.sendTime) {
  135. row.postType = "1";
  136. }
  137. this.activeRow = row;
  138. this.type = type;
  139. this.formes = { ...row };
  140. this.lookVisible = true;
  141. },
  142. onClose() {
  143. this.formes = {
  144. id: "",
  145. postType: "0",
  146. sendTime: "",
  147. messageContent: "",
  148. messageType: "",
  149. fileName: ""
  150. };
  151. this.$refs["eidtPostMsg"].resetFields();
  152. this.lookVisible = false;
  153. },
  154. submitMsg() {
  155. this.$refs.eidtPostMsg.validate(async flag => {
  156. if (flag) {
  157. try {
  158. if (this.activeRow && this.activeRow.id) {
  159. let obj = { ...this.formes };
  160. console.log(this.type, "type");
  161. if (this.type) {
  162. obj.isIncludeSender = 0;
  163. }
  164. const res = await resetGroupMessageList({ ...obj });
  165. this.$message.success("修改成功");
  166. this.$emit("clear");
  167. this.onClose();
  168. } else {
  169. let idList = this.chioseIdList
  170. .map(group => {
  171. return group.id;
  172. })
  173. .join(",");
  174. let obj = { ...this.formes, targetIds: idList };
  175. if (this.type) {
  176. obj.isIncludeSender = 0;
  177. }
  178. const res = await sendGroupMsg({ ...obj });
  179. this.$message.success("发送成功");
  180. this.$emit("clear");
  181. this.onClose();
  182. }
  183. } catch (e) {
  184. console.log(e);
  185. }
  186. }
  187. });
  188. },
  189. getName(val) {
  190. this.formes.fileName = val.data.name;
  191. },
  192. payDate() {
  193. let self = this;
  194. return {
  195. firstDayOfWeek: 1,
  196. disabledDate(time) {
  197. return time.getTime() + 86400000 < new Date().getTime();
  198. }
  199. };
  200. }
  201. }
  202. };
  203. </script>
  204. <style lang="scss" scoped>
  205. .w100 {
  206. width: 100%;
  207. }
  208. </style>