index.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <template>
  2. <div class="airportInfo">
  3. <div class="wrap">
  4. <Minheader :is-auth="true" :is-statuser="true" @addForm="addForm">
  5. <template #header>
  6. <div class="status flex-wrap">
  7. <div class="manageTitle">航司信息维护</div>
  8. </div>
  9. </template></Minheader
  10. >
  11. <DataTable @editDialog="editDialog" @eleDialog="eleDialog" />
  12. <Dialog
  13. :flag="flag"
  14. :type="type"
  15. :msgTitle="msgTitle"
  16. @resetForm="resetForm"
  17. @delRest="delRest"
  18. >
  19. <div class="diacont">
  20. <el-form :model="tableForm">
  21. <el-row :gutter="24">
  22. <el-col>
  23. <el-form-item label="航司名称">
  24. <el-input
  25. v-model="tableForm.name"
  26. placeholder="请输入航司名称"
  27. />
  28. </el-form-item>
  29. </el-col>
  30. <el-col>
  31. <el-form-item label="中文简称">
  32. <el-input
  33. v-model="tableForm.china"
  34. placeholder="请输入中文简称"
  35. />
  36. </el-form-item>
  37. </el-col>
  38. <el-col>
  39. <el-form-item label="英文简称">
  40. <el-input
  41. v-model="tableForm.englin"
  42. placeholder="请输入英文简称"
  43. />
  44. </el-form-item>
  45. </el-col>
  46. <el-col>
  47. <el-form-item label="航司二字码">
  48. <el-input
  49. v-model="tableForm.two"
  50. placeholder="请输入航司二字码"
  51. />
  52. </el-form-item>
  53. </el-col>
  54. <el-col>
  55. <el-form-item label="航司三字码">
  56. <el-input
  57. v-model="tableForm.three"
  58. placeholder="请输入航司三字码"
  59. />
  60. </el-form-item>
  61. </el-col>
  62. <el-col>
  63. <el-form-item label="备注">
  64. <el-input
  65. type="textarea"
  66. v-model="tableForm.text"
  67. placeholder="请输入备注"
  68. />
  69. </el-form-item>
  70. </el-col>
  71. </el-row>
  72. </el-form>
  73. </div>
  74. </Dialog>
  75. </div>
  76. </div>
  77. </template>
  78. <script setup lang="ts">
  79. import DataTable from "@/views/table/index.vue";
  80. import Minheader from "@/components/minheader/index.vue";
  81. import Dialog from "@/components/dialog/index.vue";
  82. const flag = ref<Boolean>(false); //弹窗开关
  83. const type = ref<String>(""); //判断是否删除
  84. const msgTitle = ref<String>("新增航司信息维护"); //弹窗标题
  85. const tableColsCopys = reactive<Object>({}); //弹窗
  86. const tableForm = reactive<Object>({
  87. name: "",
  88. china: "",
  89. englin: "",
  90. two: "",
  91. three: "",
  92. text: "",
  93. }); //弹窗内容
  94. //新增
  95. const addForm = () => {
  96. msgTitle.value = "新增航司信息维护";
  97. flag.value = true;
  98. type.value = "";
  99. };
  100. //取消
  101. const resetForm = () => {
  102. flag.value = false;
  103. };
  104. //编辑
  105. const editDialog = () => {
  106. msgTitle.value = "编辑航司信息维护";
  107. flag.value = true;
  108. type.value = "";
  109. };
  110. //删除
  111. const eleDialog = () => {
  112. msgTitle.value = "删除航司信息维护";
  113. flag.value = true;
  114. type.value = "del";
  115. };
  116. //删除
  117. const delRest = () => {
  118. flag.value = false;
  119. };
  120. </script>
  121. <style lang="scss" scoped>
  122. ::v-deep .el-form-item__label {
  123. width: 100px;
  124. }
  125. </style>