index.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579
  1. <template>
  2. <div class="pageIndexClass">
  3. <!-- <Banner /> -->
  4. <div class="content">
  5. <byTable :source="sourceList.data" :pagination="sourceList.pagination" :config="config" :loading="loading" highlight-current-row
  6. :selectConfig="selectConfig" :table-events="{
  7. //element talbe事件都能传
  8. select: select,
  9. }" :action-list="[
  10. {
  11. text: '邮箱域名管理',
  12. action: () => openModalOne(),
  13. },
  14. {
  15. text: '添加邮箱',
  16. action: () => openModal('10'),
  17. },
  18. ]" @get-list="getList">
  19. <template #mialAddress="{ item }">
  20. {{ item.mailUserPrefix }}@{{ item.domainName }}
  21. </template>
  22. </byTable>
  23. </div>
  24. <el-dialog :title="titleText" v-model="dialogVisible" width="450" v-loading="loading">
  25. <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="byform">
  26. <template #mailAddress>
  27. <el-row style="width: 100%">
  28. <el-col :span="11">
  29. <el-input v-model="formData.data.mailUserPrefix" placeholder="请输入">
  30. </el-input>
  31. </el-col>
  32. <el-col :span="2" style="text-align: center"> @ </el-col>
  33. <el-col :span="11">
  34. <el-select v-model="formData.data.domainId" placeholder="请选择" style="width: 100%">
  35. <el-option v-for="item in sourceListOne.data" :label="item.domainName" :value="item.id">
  36. </el-option>
  37. </el-select>
  38. </el-col>
  39. </el-row>
  40. </template>
  41. <template #rSlot>
  42. <el-row style="width: 100%" :gutter="15">
  43. <el-col :span="10">
  44. <el-select v-model="formData.data.receiveProtocol" placeholder="收件协议" disabled>
  45. </el-select>
  46. </el-col>
  47. <el-col :span="10">
  48. <el-input v-model="formData.data.receivePort" placeholder="请输入">
  49. </el-input>
  50. </el-col>
  51. </el-row>
  52. </template>
  53. <template #sSlot>
  54. <el-row style="width: 100%" :gutter="15">
  55. <el-col :span="10">
  56. <el-select v-model="formData.data.sendProtocol" placeholder="发件协议" disabled>
  57. </el-select>
  58. </el-col>
  59. <el-col :span="10">
  60. <el-input v-model="formData.data.sendPort" placeholder="请输入">
  61. </el-input>
  62. </el-col>
  63. </el-row>
  64. </template>
  65. </byForm>
  66. <template #footer>
  67. <el-button @click="dialogVisible = false" size="default">取 消</el-button>
  68. <el-button type="primary" @click="submitForm('byform')" size="default" :loading="submitLoading">
  69. 确 定
  70. </el-button>
  71. </template>
  72. </el-dialog>
  73. <el-dialog title="邮箱域名管理" v-model="dialogVisibleOne" width="800" v-loading="loading">
  74. <div style="width: 100%">
  75. <div style="padding: 0px 20px">
  76. <el-button type="primary" @click="openModal('20')">
  77. 添加域名
  78. </el-button>
  79. </div>
  80. <byTable :source="sourceListOne.data" :config="configOne" :loading="loading" highlight-current-row :hidePagination="true" :hideSearch="true">
  81. </byTable>
  82. </div>
  83. <template #footer>
  84. <el-button @click="dialogVisibleOne = false" size="default">取 消</el-button>
  85. <!-- <el-button
  86. type="primary"
  87. @click="submitForm('byform')"
  88. size="default"
  89. :loading="submitLoading"
  90. >
  91. 确 定
  92. </el-button> -->
  93. </template>
  94. </el-dialog>
  95. </div>
  96. </template>
  97. <script setup>
  98. /* eslint-disable vue/no-unused-components */
  99. import { ElMessage, ElMessageBox } from "element-plus";
  100. import byTable from "@/components/byTable/index";
  101. import byForm from "@/components/byForm/index";
  102. import { computed, defineComponent, ref } from "vue";
  103. import useUserStore from "@/store/modules/user";
  104. const loading = ref(false);
  105. const submitLoading = ref(false);
  106. const sourceList = ref({
  107. data: [],
  108. pagination: {
  109. total: 3,
  110. pageNum: 1,
  111. pageSize: 10,
  112. },
  113. });
  114. const sourceListOne = ref({
  115. data: [],
  116. });
  117. let dialogVisible = ref(false);
  118. let dialogVisibleOne = ref(false);
  119. let modalType = ref("add");
  120. let submitType = ref("");
  121. let titleText = ref("");
  122. let rules = ref({
  123. mailUserPrefix: [{ required: true, message: "请输入地址", trigger: "blur" }],
  124. domainName: [{ required: true, message: "请输入邮箱域名", trigger: "blur" }],
  125. type: [{ required: true, message: "请选择邮箱类型", trigger: "change" }],
  126. mailPassword: [{ required: true, message: "请输入授权码", trigger: "blur" }],
  127. receiveHost: [
  128. { required: true, message: "请输入收件服务器地址", trigger: "blur" },
  129. ],
  130. receivePort: [{ required: true, message: "请输入收件端口", trigger: "blur" }],
  131. receiveProtocol: [
  132. { required: true, message: "请输入收件协议", trigger: "blur" },
  133. ],
  134. sendHost: [
  135. { required: true, message: "请输入发件服务器地址", trigger: "blur" },
  136. ],
  137. sendPort: [{ required: true, message: "请输入发件端口", trigger: "blur" }],
  138. sendProtocol: [
  139. { required: true, message: "请输入发件协议", trigger: "blur" },
  140. ],
  141. });
  142. const { proxy } = getCurrentInstance();
  143. const selectConfig = [];
  144. const config = computed(() => {
  145. return [
  146. {
  147. attrs: {
  148. type: "slot",
  149. slot: "mialAddress",
  150. label: "邮箱地址",
  151. },
  152. },
  153. {
  154. attrs: {
  155. label: "授权码",
  156. prop: "mailPassword",
  157. },
  158. },
  159. {
  160. attrs: {
  161. label: "绑定用户",
  162. prop: "userName",
  163. },
  164. },
  165. {
  166. attrs: {
  167. label: "收件协议",
  168. prop: "receiveProtocol",
  169. },
  170. },
  171. {
  172. attrs: {
  173. label: "收件端口号",
  174. prop: "receivePort",
  175. },
  176. },
  177. {
  178. attrs: {
  179. label: "发件协议",
  180. prop: "sendProtocol",
  181. },
  182. },
  183. {
  184. attrs: {
  185. label: "发件端口号",
  186. prop: "sendPort",
  187. },
  188. },
  189. {
  190. attrs: {
  191. label: "操作",
  192. width: "130",
  193. align: "right",
  194. },
  195. // 渲染 el-button,一般用在最后一列。
  196. renderHTML(row) {
  197. return [
  198. {
  199. attrs: {
  200. label: "修改",
  201. type: "primary",
  202. text: true,
  203. },
  204. el: "button",
  205. click() {
  206. getDtl(row, "10");
  207. },
  208. },
  209. {
  210. attrs: {
  211. label: "删除",
  212. type: "danger",
  213. text: true,
  214. },
  215. el: "button",
  216. click() {
  217. // 弹窗提示是否删除
  218. ElMessageBox.confirm(
  219. "此操作将永久删除该数据, 是否继续?",
  220. "提示",
  221. {
  222. confirmButtonText: "确定",
  223. cancelButtonText: "取消",
  224. type: "warning",
  225. }
  226. ).then(() => {
  227. // 删除
  228. proxy
  229. .post("/enterpriseMailbox/delete", {
  230. id: row.id,
  231. })
  232. .then((res) => {
  233. ElMessage({
  234. message: "删除成功",
  235. type: "success",
  236. });
  237. getList();
  238. });
  239. });
  240. },
  241. },
  242. ];
  243. },
  244. },
  245. ];
  246. });
  247. const configOne = computed(() => {
  248. return [
  249. {
  250. attrs: {
  251. label: "邮箱域名",
  252. prop: "domainName",
  253. },
  254. },
  255. {
  256. attrs: {
  257. label: "海外邮箱",
  258. prop: "type",
  259. },
  260. render(type) {
  261. return type == 2 ? "是" : "否";
  262. },
  263. },
  264. {
  265. attrs: {
  266. label: "收件协议",
  267. prop: "receiveProtocol",
  268. },
  269. },
  270. {
  271. attrs: {
  272. label: "收件端口号",
  273. prop: "receivePort",
  274. },
  275. },
  276. {
  277. attrs: {
  278. label: "发件协议",
  279. prop: "sendProtocol",
  280. },
  281. },
  282. {
  283. attrs: {
  284. label: "发件端口号",
  285. prop: "sendPort",
  286. },
  287. },
  288. {
  289. attrs: {
  290. label: "操作",
  291. width: "130",
  292. align: "right",
  293. },
  294. // 渲染 el-button,一般用在最后一列。
  295. renderHTML(row) {
  296. return [
  297. {
  298. attrs: {
  299. label: "修改",
  300. type: "primary",
  301. text: true,
  302. },
  303. el: "button",
  304. click() {
  305. getDtl(row, "20");
  306. },
  307. },
  308. {
  309. attrs: {
  310. label: "删除",
  311. type: "danger",
  312. text: true,
  313. },
  314. el: "button",
  315. click() {
  316. // 弹窗提示是否删除
  317. ElMessageBox.confirm(
  318. "此操作将永久删除该数据, 是否继续?",
  319. "提示",
  320. {
  321. confirmButtonText: "确定",
  322. cancelButtonText: "取消",
  323. type: "warning",
  324. }
  325. ).then(() => {
  326. // 删除
  327. proxy
  328. .post("/enterpriseDomain/delete", {
  329. id: row.id,
  330. })
  331. .then((res) => {
  332. ElMessage({
  333. message: "删除成功",
  334. type: "success",
  335. });
  336. getListOne();
  337. });
  338. });
  339. },
  340. },
  341. ];
  342. },
  343. },
  344. ];
  345. });
  346. let formData = reactive({
  347. data: {},
  348. });
  349. const formOption = reactive({
  350. inline: true,
  351. labelWidth: 100,
  352. itemWidth: 100,
  353. });
  354. const byform = ref(null);
  355. const treeData = ref([]);
  356. let formConfig = ref({});
  357. const userList = ref([]);
  358. const configData = computed(() => [
  359. [
  360. {
  361. type: "slot",
  362. slotName: "mailAddress",
  363. prop: "mailUserPrefix",
  364. label: "邮箱地址",
  365. required: true,
  366. },
  367. {
  368. type: "input",
  369. prop: "mailPassword",
  370. label: "授权码",
  371. required: true,
  372. },
  373. {
  374. type: "select",
  375. prop: "userId",
  376. label: "绑定用户",
  377. data: userList.value,
  378. },
  379. ],
  380. [
  381. {
  382. type: "input",
  383. prop: "domainName",
  384. label: "邮箱域名",
  385. required: true,
  386. },
  387. {
  388. type: "radio",
  389. prop: "type",
  390. label: "是否海外邮箱",
  391. required: true,
  392. border: true,
  393. data: [
  394. { label: "是", value: "2" },
  395. { label: "否", value: "1" },
  396. ],
  397. },
  398. {
  399. type: "input",
  400. prop: "receiveHost",
  401. label: "收件服务器地址",
  402. required: true,
  403. },
  404. {
  405. type: "select",
  406. label: "收件协议",
  407. prop: "receiveProtocol",
  408. itemWidth: 33,
  409. disabled: true,
  410. style: {
  411. width: "100%",
  412. "margin-right": "10px",
  413. },
  414. },
  415. {
  416. type: "input",
  417. prop: "receivePort",
  418. label: " ",
  419. itemWidth: 33.33,
  420. },
  421. {
  422. type: "input",
  423. prop: "sendHost",
  424. label: "发件服务器地址",
  425. required: true,
  426. },
  427. {
  428. type: "select",
  429. label: "发件协议",
  430. prop: "sendProtocol",
  431. itemWidth: 33,
  432. disabled: true,
  433. style: {
  434. width: "100%",
  435. "margin-right": "10px",
  436. },
  437. },
  438. {
  439. type: "input",
  440. prop: "sendPort",
  441. label: " ",
  442. itemWidth: 33.33,
  443. },
  444. ],
  445. ]);
  446. const getList = async (req) => {
  447. sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  448. loading.value = true;
  449. proxy
  450. .post("/enterpriseMailbox/page", sourceList.value.pagination)
  451. .then((message) => {
  452. console.log(message);
  453. sourceList.value.data = message.rows;
  454. sourceList.value.pagination.total = message.total;
  455. setTimeout(() => {
  456. loading.value = false;
  457. }, 200);
  458. });
  459. };
  460. const getListOne = async () => {
  461. loading.value = true;
  462. proxy
  463. .post("/enterpriseDomain/page", { pageNum: 1, pageSize: 9999 })
  464. .then((message) => {
  465. sourceListOne.value.data = message.rows;
  466. setTimeout(() => {
  467. loading.value = false;
  468. }, 200);
  469. });
  470. };
  471. const openModal = (type) => {
  472. formData.data = {};
  473. dialogVisible.value = true;
  474. modalType.value = "add";
  475. submitType.value = type;
  476. if (type === "10") {
  477. titleText.value = "添加邮箱";
  478. formConfig.value = configData.value[0];
  479. } else if (type === "20") {
  480. titleText.value = "添加域名";
  481. formConfig.value = configData.value[1];
  482. formData.data = {
  483. type: "1",
  484. receiveProtocol: "IMAP",
  485. sendProtocol: "SMTP",
  486. };
  487. }
  488. };
  489. const openModalOne = () => {
  490. dialogVisibleOne.value = true;
  491. modalType.value = "add";
  492. };
  493. const submitForm = () => {
  494. byform.value.handleSubmit((valid) => {
  495. submitLoading.value = true;
  496. if (submitType.value === "10") {
  497. proxy.post("/enterpriseMailbox/" + modalType.value, formData.data).then(
  498. (res) => {
  499. ElMessage({
  500. message: modalType.value == "add" ? "添加成功" : "编辑成功",
  501. type: "success",
  502. });
  503. dialogVisible.value = false;
  504. submitLoading.value = false;
  505. getList();
  506. },
  507. (err) => (submitLoading.value = false)
  508. );
  509. } else if (submitType.value === "20") {
  510. proxy.post("/enterpriseDomain/" + modalType.value, formData.data).then(
  511. (res) => {
  512. ElMessage({
  513. message: modalType.value == "add" ? "添加成功" : "编辑成功",
  514. type: "success",
  515. });
  516. dialogVisible.value = false;
  517. submitLoading.value = false;
  518. getListOne();
  519. },
  520. (err) => (submitLoading.value = false)
  521. );
  522. }
  523. });
  524. };
  525. const getDtl = (row, type) => {
  526. modalType.value = "edit";
  527. submitType.value = type;
  528. if (type === "10") {
  529. proxy.post("/enterpriseMailbox/detail", { id: row.id }).then((res) => {
  530. formConfig.value = configData.value[0];
  531. formData.data = res;
  532. });
  533. } else if (type === "20") {
  534. proxy.post("/enterpriseDomain/detail", { id: row.id }).then((res) => {
  535. formConfig.value = configData.value[1];
  536. res.type = res.type + "";
  537. formData.data = res;
  538. });
  539. }
  540. dialogVisible.value = true;
  541. };
  542. const getDict = () => {
  543. proxy
  544. .get(
  545. `/tenantUser/list?pageNum=1&pageSize=9999&tenantId=${
  546. useUserStore().user.tenantId
  547. }`
  548. )
  549. .then((res) => {
  550. userList.value = res.rows.map((x) => ({
  551. label: x.nickName,
  552. value: x.userId,
  553. }));
  554. });
  555. };
  556. getList();
  557. getListOne();
  558. getDict();
  559. </script>
  560. <style lang="scss" scoped>
  561. .tenant {
  562. padding: 20px;
  563. }
  564. </style>