FlashCreate.vue 3.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <template>
  2. <div>
  3. <el-dialog v-model="dialogVisible" title="选择模型" width="30%" @close="sureclose" :close-on-click-modal="false">
  4. <el-form :model="formData" label-width="120px" :rules="dataRule">
  5. <el-form-item label="区域名称" prop="areaName">
  6. <el-input v-model="formData.areaName" />
  7. </el-form-item>
  8. <!-- <el-form-item label="父级区域">
  9. <el-select v-model="formData.pids" placeholder="请选择父级区域">
  10. <el-option v-for="(item, index) in fatherArea" :label="item.title" :value="item.pid" />
  11. </el-select>
  12. </el-form-item>
  13. <el-form-item label="区域类型" prop="areaType">
  14. <el-input v-model="formData.areaType" />
  15. </el-form-item> -->
  16. </el-form>
  17. <template #footer>
  18. <span class="dialog-footer">
  19. <el-button @click="cleanBox">取消</el-button>
  20. <el-button type="primary" @click="sureArr">
  21. 确认
  22. </el-button>
  23. </span>
  24. </template>
  25. </el-dialog>
  26. </div>
  27. </template>
  28. <script>
  29. import { ref, onMounted, toRefs, watch, onBeforeUnmount, reactive } from 'vue'
  30. import flashPower from '@/api/flashPower'
  31. export default {
  32. props: {
  33. fcModal: {
  34. type: Boolean,
  35. required: true
  36. }
  37. },
  38. setup(props, { emit }) {
  39. let dialogVisible = ref(false)
  40. let formData = ref({
  41. pids: "",
  42. areaType: "",
  43. areaName: ""
  44. })
  45. let fatherArea = ref([])
  46. let dataRule = reactive({
  47. areaName: [
  48. { required: true, message: '请输入区域名称', trigger: 'blur' },
  49. ],
  50. areaType: [
  51. { required: true, message: '请输入区域类型', trigger: 'blur' },
  52. ],
  53. })
  54. function reload() {
  55. dialogVisible.value = props.fcModal
  56. flashPower.getAllArea({}).then(res => {
  57. fatherArea.value = res.data
  58. console.log(fatherArea.value);
  59. })
  60. }
  61. function modalClose() {
  62. dialogVisible.value = false
  63. emit("fcBack", dialogVisible.value)
  64. }
  65. function modalTrue() {
  66. flashPower.createFlash({
  67. // pid: formData.value.pids - 0,
  68. // area_type: formData.value.areaType - 0,
  69. area_name: formData.value.areaName,
  70. }).then(res => {
  71. console.log(res, 'tianjia');
  72. })
  73. dialogVisible.value = false
  74. emit("fcBack", dialogVisible.value)
  75. }
  76. onMounted(() => {
  77. reload()
  78. })
  79. return {
  80. dialogVisible,//模态框状态
  81. sureclose: modalClose,
  82. cleanBox: modalClose,
  83. sureArr: modalTrue,
  84. reload,//初始化页面
  85. formData,//表单数据
  86. fatherArea,//父级区域
  87. dataRule,
  88. }
  89. }
  90. }
  91. </script>
  92. <style scoped></style>