1111

src/views/tentative/acquisition/data.vue

@@ -6,7 +6,7 @@
                     <span class="text-18px">数据采集分类</span>
                 </template>
                 <template #extra>
-                    <el-button _icon hc-btn size="small" type="primary">
+                    <el-button _icon hc-btn size="small" type="primary" @click="addDataFormModal">
                         <hc-icon name="add" />
                     </el-button>
                 </template>
@@ -85,11 +85,35 @@
                 <hc-pages :pages="searchForm" @change="pageChange" />
             </template>
         </hc-card>
+
+        <!-- 新增/编辑 -->
+        <hc-new-dialog v-model="dataFormModal" :title="`${formModel.id ? '编辑' : '新增'}分类`" is-footer-center widths="25rem" @close="dataFormModalClose">
+            <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="top" label-width="auto" size="large">
+                <el-form-item label="上级设备：" prop="key1">
+                    <el-select v-model="formModel.key1" placeholder="父级" filterable block>
+                        <el-option label="测试" value="1" />
+                        <el-option label="测试" value="2" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="分类名称：" prop="key2">
+                    <el-input v-model="formModel.key2" />
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <el-button @click="dataFormModalClose">取消</el-button>
+                <el-button hc-btn type="primary" @click="dataFormSave">确定</el-button>
+            </template>
+        </hc-new-dialog>
     </hc-body>
 </template>
 
 <script setup>
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
+
+//渲染完成
+onMounted(() => {
+
+})
 
 //分割配置
 const bodySplitOptions = {
@@ -200,6 +224,33 @@ const tableCheckedKeys = ref([])
 const tableSelection = (rows) => {
     tableCheckedKeys.value = rows
 }
+
+//表单数据
+const formRef = ref(null)
+const formModel = ref({})
+const formRules = {
+    key1: {
+        required: true,
+        trigger: 'blur',
+        message: '请填写处理原因',
+    },
+}
+
+//弹窗
+const dataFormModal = ref(false)
+const addDataFormModal = () => {
+    dataFormModal.value = true
+}
+
+//确定保存
+const dataFormSave = () => {
+    dataFormModalClose()
+}
+
+//取消弹窗
+const dataFormModalClose = () => {
+    dataFormModal.value = false
+}
 </script>
 
 <style lang="scss">