systemMessage.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. <template>
  2. <div class="search bg-white p-3">
  3. <el-form :model="searchForm" label-width="100px">
  4. <el-row>
  5. <el-col :span="5">
  6. <el-form-item label="状态">
  7. <el-select v-model="searchForm.enable_status" clearable placeholder="请选择模板状态">
  8. <el-option label="启用" :value="true" />
  9. <el-option label="禁用" :value="false" />
  10. </el-select>
  11. </el-form-item>
  12. </el-col>
  13. <el-col :span="5">
  14. <el-form-item label="模板名称">
  15. <el-input v-model="searchForm.name" clearable placeholder="请输入模板名称"></el-input>
  16. </el-form-item>
  17. </el-col>
  18. <el-col :span="5">
  19. <el-form-item label="模板code">
  20. <el-input v-model="searchForm.code" clearable placeholder="请输入模板code"></el-input>
  21. </el-form-item>
  22. </el-col>
  23. </el-row>
  24. </el-form>
  25. <div class="flex justify-end">
  26. <el-button class="mr-3" @click="searchEvent"> 搜索 </el-button>
  27. </div>
  28. </div>
  29. <en-table-layout :tableData="tableData.records" :loading="loading">
  30. <template #toolbar>
  31. <div class="inner-toolbar w-11/12 flex justify-between">
  32. <div class="toolbar-btns">
  33. <el-button size="mini" type="primary" :icon="CirclePlus" v-if="checkPermission([''])" @click="handleAddRole">添加</el-button>
  34. </div>
  35. <!-- <div class="toolbar-search">
  36. <en-table-search @search="searchEvent" placeholder="请输入关键字" />
  37. </div> -->
  38. </div>
  39. </template>
  40. <template #table-columns>
  41. <el-table-column prop="name" label="模版名称" />
  42. <!-- <el-table-column prop="template_type" label="短信类型" /> -->
  43. <el-table-column prop="remark" label="模版说明" />
  44. <!-- <el-table-column prop="audit_status" label="审核状态" /> -->
  45. <el-table-column prop="enable_status" label="状态">
  46. <template #default="scope">
  47. <el-switch v-model="scope.row.enable_status" inline-prompt active-text="启用" inactive-text="禁用" @change="switchEnableStatus($event, scope.row)" />
  48. </template>
  49. </el-table-column>
  50. <el-table-column label="操作">
  51. <template #default="scope">
  52. <el-button size="mini" @click="handleView(scope.row)" v-if="checkPermission([''])">查看</el-button>
  53. <el-button size="mini" type="primary" @click="handleEditRole(scope.row)" v-if="checkPermission([''])">编辑</el-button>
  54. <el-button size="mini" type="danger" @click="handleDeleteRole(scope.row)" v-if="checkPermission([''])">删除</el-button>
  55. </template>
  56. </el-table-column>
  57. </template>
  58. <template #pagination>
  59. <el-pagination
  60. v-if="tableData"
  61. @size-change="handlePageSizeChange"
  62. @current-change="handlePageCurrentChange"
  63. :current-page="tableData.pages"
  64. :page-sizes="[10, 20, 50, 100]"
  65. :page-size="tableData.size"
  66. layout="total, sizes, prev, pager, next, jumper"
  67. :total="tableData.total"
  68. >
  69. </el-pagination>
  70. </template>
  71. </en-table-layout>
  72. <el-dialog
  73. :title="templateTitle"
  74. v-model="systemVisible"
  75. width="500px"
  76. :modal-append-to-body="false"
  77. :close-on-click-modal="false"
  78. :close-on-press-escape="false"
  79. >
  80. <el-form :model="systemForm" :rules="systemFormRules" ref="systemFormRef" label-width="120px">
  81. <el-form-item label="模版名称:" prop="name">
  82. <el-input v-model="systemForm.name" :minlength="2" :maxlength="20" :disabled="disabled" clearable placeholder="请输入模版名称"></el-input>
  83. </el-form-item>
  84. <el-form-item label="模版内容:" prop="content">
  85. <el-input v-model="systemForm.content" :minlength="2" :maxlength="20" :disabled="disabled" clearable placeholder="请输入模版内容"></el-input>
  86. </el-form-item>
  87. <el-form-item label="模版code:" prop="code">
  88. <el-input v-model="systemForm.code" :minlength="2" :maxlength="20" :disabled="disabled" clearable placeholder="请输入模版code"></el-input>
  89. </el-form-item>
  90. <el-form-item label="是否启用:" prop="enable_status">
  91. <el-switch v-model="systemForm.enable_status" inline-prompt :disabled="disabled" active-text="启用" inactive-text="禁用" />
  92. </el-form-item>
  93. <el-form-item label="模版说明:" prop="remark">
  94. <el-input
  95. v-model="systemForm.remark"
  96. type="textarea"
  97. :disabled="disabled"
  98. :autosize="{ minRows: 3, maxRows: 4 }"
  99. placeholder="请输入模版说明"
  100. ></el-input>
  101. </el-form-item>
  102. </el-form>
  103. <template #footer>
  104. <div class="dialog-footer">
  105. <el-button @click="systemVisible = false">取 消</el-button>
  106. <el-button type="primary" @click="submitsystemForm" :disabled="disabled">确 定</el-button>
  107. </div>
  108. </template>
  109. </el-dialog>
  110. </template>
  111. <script lang="ts" setup>
  112. import { ref, onMounted, reactive } from 'vue';
  113. import { useRouter } from 'vue-router';
  114. import { ElMessage, ElMessageBox } from 'element-plus';
  115. import { Delete, Edit, Search, Share, Upload, CirclePlus } from '@element-plus/icons-vue';
  116. import * as API_Template from '@/api/templateManage';
  117. const router = useRouter();
  118. /* 模版表单 */
  119. const disabled = ref(false);
  120. let templateTitle = ref('');
  121. const systemFormRef = ref();
  122. const systemVisible = ref(false);
  123. const systemForm = ref<any>({
  124. name: '',
  125. content: '',
  126. code: '',
  127. enable_status: false,
  128. remark: '',
  129. type: 'SYSTEM',
  130. });
  131. const systemFormRules = ref<any>({
  132. name: [{ required: true, message: '请输入模版名称', trigger: 'blur' }],
  133. content: [{ required: true, message: '请输入模版内容', trigger: 'blur' }],
  134. code: [
  135. { required: true, message: '请输入模版code', trigger: 'blur' },
  136. { pattern: /^[a-zA-Z0-9]+$/, message: '只能输入英文和数字,不能包含空格', trigger: 'blur' },
  137. ],
  138. /* enable_status: [{ required: true, message: '请选择状态', trigger: 'change' }],
  139. user_num: [{ required: true, message: '请输入可创建用户数', trigger: 'blur' }], */
  140. });
  141. /* 新增 */
  142. const handleAddRole = () => {
  143. templateTitle.value = '添加模版';
  144. disabled.value = false;
  145. systemForm.value = {};
  146. systemForm.value.type = 'SYSTEM';
  147. (systemForm.value.enable_status = false), (systemVisible.value = true);
  148. };
  149. /* 表单提交 */
  150. const submitsystemForm = () => {
  151. systemFormRef.value.validate((valid: boolean) => {
  152. if (valid) {
  153. const { id } = systemForm.value;
  154. const params = { ...systemForm.value };
  155. if (id) {
  156. API_Template.editTemplate(id, params).then(() => {
  157. systemVisible.value = false;
  158. ElMessage.success('修改成功!');
  159. GET_systemList();
  160. });
  161. } else {
  162. API_Template.addTemplate(params).then(() => {
  163. systemVisible.value = false;
  164. ElMessage.success('创建成功!');
  165. GET_systemList();
  166. });
  167. }
  168. } else {
  169. ElMessage.error('表单填写有误,请核对!');
  170. /* store.dispatch('showMessage', { message: '表单填写有误,请核对!', type: 'error' }); */
  171. return false;
  172. }
  173. });
  174. };
  175. /* 修改状态 */
  176. const switchEnableStatus = (event, row) => {
  177. API_Template.editStatus(row.id).then((res) => {
  178. ElMessage.success('状态修改成功!');
  179. GET_systemList();
  180. });
  181. };
  182. /* 查看模版 */
  183. const handleView = (row) => {
  184. templateTitle.value = '查看模版';
  185. systemForm.value = { ...row };
  186. disabled.value = true;
  187. systemVisible.value = true;
  188. };
  189. /* 编辑模版 */
  190. const handleEditRole = (row: any) => {
  191. templateTitle.value = '编辑模版';
  192. disabled.value = false;
  193. systemForm.value = { ...row };
  194. systemForm.value.type = 'SYSTEM';
  195. systemVisible.value = true;
  196. };
  197. /* 删除模版 */
  198. const handleDeleteRole = (row: any) => {
  199. ElMessageBox.confirm('确定要删除这个模版吗?', '提示', { type: 'warning' })
  200. .then(() => {
  201. API_Template.delTemplate(row.id).then(() => {
  202. ElMessage.success('删除成功!');
  203. GET_systemList();
  204. });
  205. })
  206. .catch(() => {});
  207. };
  208. const loading = ref(false);
  209. const params = ref({
  210. page_no: 1,
  211. page_size: 10,
  212. type: 'SYSTEM',
  213. });
  214. const tableData = ref<any>({});
  215. /* 搜索 */
  216. const searchForm = reactive({
  217. enable_status: '',
  218. name: '',
  219. code: '',
  220. type: 'SYSTEM',
  221. });
  222. const checkPermission = (permissions: string[]): boolean => {
  223. return true;
  224. };
  225. const handlePageSizeChange = (size: number) => {
  226. params.value.page_size = size;
  227. GET_systemList();
  228. };
  229. const handlePageCurrentChange = (page: number) => {
  230. params.value.page_no = page;
  231. GET_systemList();
  232. };
  233. const searchEvent = (data: string) => {
  234. Object.assign(params.value, searchForm);
  235. params.value.page_no = 1;
  236. GET_systemList();
  237. };
  238. const GET_systemList = () => {
  239. loading.value = true;
  240. API_Template.getSMSList(params.value)
  241. .then((response) => {
  242. loading.value = false;
  243. tableData.value = response;
  244. })
  245. .catch(() => {
  246. loading.value = false;
  247. });
  248. };
  249. onMounted(() => {
  250. GET_systemList();
  251. });
  252. </script>