index.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <script lang="ts">
  2. // 声明额外的选项
  3. export default {
  4. name: "Edit"
  5. };
  6. </script>
  7. <script setup lang="ts">
  8. import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
  9. // 接口列表实例
  10. let UrlList = reactive(null)
  11. // 获取当前板块接口列表
  12. onMounted(async () => {
  13. UrlList = await getGroupUrl(["kxsConfigServer"]);
  14. })
  15. const props = defineProps<{
  16. editVisible: {
  17. type: Boolean;
  18. default: false;
  19. };
  20. width: {
  21. type: Number;
  22. default: 50;
  23. };
  24. formData: {
  25. id: any;
  26. type: any;
  27. default: {};
  28. };
  29. }>();
  30. // 表单数据
  31. const UpdateForm: any = ref({
  32. });
  33. // 表单实例
  34. const ruleFormRef = ref()
  35. // 选项卡参数(默认值为列表某项的id)
  36. const activeId = ref('1')
  37. // 提交函数
  38. const submit = async (formEl) => {
  39. // 表单校验拦截
  40. if (!formEl) return
  41. await formEl.validate(async (valid, fields) => {
  42. if (valid) {
  43. //表单校验成功回调
  44. console.log('submit!')
  45. // 需动态生成接口
  46. const { status, msg }: any = await http.Request({
  47. method: UrlList.kxsConfigServer.pageUpdateInfoupdate.method,
  48. url: UrlList.kxsConfigServer.pageUpdateInfoupdate.url,
  49. params: UpdateForm.value
  50. });
  51. if (status === 1) {
  52. //业务成功回调
  53. ElMessage({
  54. message: "修改成功",
  55. type: "success"
  56. });
  57. UpdateForm.value = {
  58. };
  59. // 关闭修改弹窗;
  60. closeUpdateVisible();
  61. } else {
  62. //业务失败回调
  63. ElMessageBox.alert(msg, "提示", {
  64. confirmButtonText: "关闭",
  65. type: "warning"
  66. });
  67. }
  68. } else {
  69. //表单校验失败回调
  70. ElMessage({
  71. message: "请输入完整信息",
  72. type: "error"
  73. });
  74. }
  75. })
  76. };
  77. // 表单校验规则
  78. const rules = reactive({
  79. })
  80. // 关闭弹窗回调函数
  81. const closeFn: any = inject('closeEditUpdateVisible');
  82. const openVisible = async () => {
  83. //通过ID获取表格数据
  84. const { status, data }: any = await http.Request({ method: UrlList.kxsConfigServer.pageUpdateInfoquery.method, url: UrlList.kxsConfigServer.pageUpdateInfoquery.url, params: { id: props.formData.id } });
  85. if (status === 1) {
  86. UpdateForm.value = data;
  87. }
  88. };
  89. // 关闭弹窗回调函数
  90. const closeUpdateVisible = () => {
  91. UpdateForm.value = {
  92. };
  93. closeFn();
  94. };
  95. // 弹窗是否全屏
  96. const isFullscreen = ref(false)
  97. </script>
  98. <template lang="pug">
  99. .main
  100. el-dialog(v-model='props.editVisible' draggable width="50%" :fullscreen="isFullscreen" title="修改" @close="closeUpdateVisible" @open="openVisible")
  101. .flex.justify-end
  102. el-button(
  103. :icon="useRenderIcon(Close)",
  104. :loading="loading",
  105. @click="closeUpdateVisible()"
  106. ) 关闭
  107. el-button(
  108. type="primary",
  109. :icon="useRenderIcon(Upload)",
  110. @click="submit(ruleFormRef)"
  111. ) 确认提交
  112. </template>
  113. <style scoped lang="scss">
  114. :deep(.el-dropdown-menu__item i) {
  115. margin: 0;
  116. }
  117. :deep(.el-form-item__label) {
  118. font-weight: 700;
  119. }
  120. :deep(.el-pagination) {
  121. flex-flow: wrap;
  122. }
  123. :deep(.is-draggable) {
  124. max-height: 80vh;
  125. overflow: auto;
  126. }
  127. :deep(.el-dialog__header) {
  128. position: sticky;
  129. top: 0;
  130. z-index: 2;
  131. background: #fff;
  132. }
  133. .collapsedom {
  134. padding: 0 20px;
  135. background-color: #fff;
  136. }
  137. .ovh-x {
  138. height: 40vh;
  139. overflow-y: auto;
  140. }
  141. :deep(.el-descriptions__header) {
  142. margin: 16px 0 !important;
  143. }
  144. .el-select {
  145. width: 100%;
  146. }
  147. </style>