index.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <script lang="ts">
  2. // 声明额外的选项
  3. export default {
  4. name: "Add"
  5. };
  6. </script>
  7. <script setup lang="ts">
  8. import { inject, ref } from "vue";
  9. import { useRenderIcon } from "@/components/ReIcon/src/hooks";
  10. import { ElMessage, ElMessageBox } from "element-plus";
  11. import { http } from "@/utils/http";
  12. // 获取当前板块接口列表
  13. import Upload from "@iconify-icons/ri/upload-2-fill";
  14. import Close from "@iconify-icons/ri/close-fill";
  15. // 获取URLLIST
  16. import { getGroupUrl } from "@/utils/getUrl/getUrl";
  17. const props = defineProps<{
  18. submit: {
  19. type: Function;
  20. default: () => {};
  21. };
  22. addVisible: {
  23. type: Boolean;
  24. default: false;
  25. };
  26. width: {
  27. type: Number;
  28. default: 50;
  29. };
  30. }>();
  31. // 表单数据
  32. let UpdateForm = ref({
  33. dictId: "", //字典ID
  34. itemValue: "", //字典项值
  35. label: "", //字典项名称
  36. dictType: "", //字典类型
  37. description: "", //字典项描述
  38. sortOrder: "", //排序(升序)
  39. remarks: "", //备注信息
  40. });
  41. // 选项卡参数(默认值为列表某项的id)
  42. const activeId = ref('1')
  43. // 提交函数
  44. const submit = async () => {
  45. const UrlList = await getGroupUrl(['kxsConfigServer']);
  46. const { status, msg }: any = await http.Request({ method: UrlList.kxsConfigServer.sysDictItemadd.method, url: UrlList.kxsConfigServer.sysDictItemadd.url, params: UpdateForm.value});
  47. if (status === 1) {
  48. ElMessage({
  49. message: "新增成功",
  50. type: "success"
  51. });
  52. UpdateForm.value = {
  53. dictId: "", //字典ID
  54. itemValue: "", //字典项值
  55. label: "", //字典项名称
  56. dictType: "", //字典类型
  57. description: "", //字典项描述
  58. sortOrder: "", //排序(升序)
  59. remarks: "", //备注信息
  60. };
  61. closeVisible();
  62. } else {
  63. ElMessageBox.alert(msg, "提示", {
  64. confirmButtonText: "关闭",
  65. type: "warning"
  66. });
  67. };
  68. };
  69. const closeFn: any = inject('closeAddVisible');
  70. // 关闭弹窗回调函数
  71. const closeVisible = () => {
  72. UpdateForm.value = {
  73. dictId: "", //字典ID
  74. itemValue: "", //字典项值
  75. label: "", //字典项名称
  76. dictType: "", //字典类型
  77. description: "", //字典项描述
  78. sortOrder: "", //排序(升序)
  79. remarks: "", //备注信息
  80. };
  81. closeFn();
  82. };
  83. </script>
  84. <template lang="pug">
  85. .main
  86. el-dialog(v-model='props.addVisible' width="50%" title="新增" @close="closeVisible()")
  87. el-form(:model='UpdateForm' label-position="right" label-width="100px")
  88. el-form-item(label='字典ID' prop="dictId")
  89. el-input(v-model='UpdateForm.dictId' autocomplete='off' class="!w-[230px]"
  90. placeholder="请输入字典ID")
  91. el-form-item(label='字典项值' prop="itemValue")
  92. el-input(v-model='UpdateForm.itemValue' autocomplete='off' class="!w-[230px]"
  93. placeholder="请输入字典项值")
  94. el-form-item(label='字典项名称' prop="label")
  95. el-input(v-model='UpdateForm.label' autocomplete='off' class="!w-[230px]"
  96. placeholder="请输入字典项名称")
  97. el-form-item(label='字典类型' prop="dictType")
  98. el-input(v-model='UpdateForm.dictType' autocomplete='off' class="!w-[230px]"
  99. placeholder="请输入字典类型")
  100. el-form-item(label='字典项描述' prop="description")
  101. el-input(v-model='UpdateForm.description' autocomplete='off' class="!w-[230px]"
  102. placeholder="请输入字典项描述")
  103. el-form-item(label='排序(升序)' prop="sortOrder")
  104. el-input(v-model='UpdateForm.sortOrder' autocomplete='off' class="!w-[230px]"
  105. placeholder="请输入排序(升序)")
  106. el-form-item(label='备注信息' prop="remarks")
  107. el-input(v-model='UpdateForm.remarks' autocomplete='off' class="!w-[230px]"
  108. placeholder="请输入备注信息")
  109. el-button(
  110. :icon="useRenderIcon(Close)",
  111. :loading="loading",
  112. @click="closeVisible()"
  113. ) 关闭
  114. el-button(
  115. type="primary",
  116. :icon="useRenderIcon(Upload)",
  117. :loading="loading",
  118. @click="submit"
  119. ) 确认提交
  120. </template>
  121. <style scoped lang="scss">
  122. :deep(.el-dropdown-menu__item i) {
  123. margin: 0;
  124. }
  125. :deep(.el-form-item__label) {
  126. font-weight: 700;
  127. }
  128. :deep(.el-pagination) {
  129. flex-flow: wrap;
  130. }
  131. :deep(.is-draggable) {
  132. max-height: 80vh;
  133. overflow: auto;
  134. }
  135. :deep(.el-dialog__header) {
  136. position: sticky;
  137. top: 0;
  138. z-index: 2;
  139. background: #fff;
  140. }
  141. .collapsedom {
  142. padding: 0 20px;
  143. background-color: #fff;
  144. }
  145. .ovh-x {
  146. height: 40vh;
  147. overflow-y: auto;
  148. }
  149. :deep(.el-descriptions__header) {
  150. margin: 16px 0 !important;
  151. }
  152. </style>