You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

116 lines
2.3 KiB

5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
  1. <script setup lang="ts">
  2. import { add, update } from 'apis/matrix'
  3. import FtDialog from 'components/common/FTDialog/index.vue'
  4. import { FtMessage } from 'libs/message'
  5. import { onMounted, ref } from 'vue'
  6. const props = defineProps({
  7. formData: {
  8. type: Object,
  9. default: () => ({}),
  10. },
  11. })
  12. const emits = defineEmits(['ok', 'cancel'])
  13. onMounted(() => {
  14. if (props.formData.id) {
  15. form.value = { ...props.formData }
  16. }
  17. })
  18. const form = ref({})
  19. const rules = {
  20. name: [
  21. { required: true, message: '请输入基质名称', trigger: 'blur' },
  22. ],
  23. }
  24. const formRef = ref()
  25. const okLoading = ref(false)
  26. const okHandle = () => {
  27. formRef.value.validate(async (valid: any) => {
  28. if (!valid) {
  29. return
  30. }
  31. okLoading.value = true
  32. // TODO 调用保存接口
  33. if (form.value.id) {
  34. await update(form.value)
  35. }
  36. else {
  37. await add(form.value)
  38. }
  39. setTimeout(() => {
  40. okLoading.value = false
  41. FtMessage.success('保存成功')
  42. emits('ok')
  43. }, 300)
  44. })
  45. }
  46. const cancel = () => {
  47. emits('cancel')
  48. }
  49. </script>
  50. <template>
  51. <FtDialog visible :title="form.id ? '编辑基质' : '新增基质'" width="40%" :ok-handle="okHandle" @cancel="cancel">
  52. <div class="dialog-content">
  53. <el-form ref="formRef" label-width="120" :model="form" :rules="rules">
  54. <el-form-item
  55. label="基质名称" prop="name" :rules="[
  56. {
  57. required: true,
  58. message: '请输入基质名称',
  59. trigger: 'blur',
  60. },
  61. {
  62. min: 1,
  63. max: 20,
  64. message: '1-20个字符',
  65. trigger: ['blur', 'change'],
  66. },
  67. ]"
  68. >
  69. <el-input v-model="form.name" placeholder="" />
  70. </el-form-item>
  71. </el-form>
  72. </div>
  73. </FtDialog>
  74. </template>
  75. <style scoped lang="scss">
  76. :deep(.el-form-item__error) {
  77. font-size: 40px;
  78. }
  79. .dialog-content {
  80. display: flex;
  81. align-items: center; /* 垂直居中 */
  82. justify-content: center; /* 水平居中 */
  83. height: 400px; /* 确保容器高度撑开 */
  84. }
  85. .el-select {
  86. width: 80%;
  87. }
  88. .el-input {
  89. width: 80%;
  90. }
  91. .unit-text {
  92. font-size: 40px;
  93. color: #0349A8;
  94. font-weight: 500;
  95. margin-left: 20px;
  96. }
  97. .select-box {
  98. display: flex;
  99. margin: 40px;
  100. }
  101. .route-img {
  102. display: flex;
  103. img {
  104. width: 70px;
  105. }
  106. }
  107. </style>