上传文件

src/components/EditPop/ExpressionEditor.vue

@@ -73,11 +73,11 @@ const change = (val) => {
           </div>
         </div>
       </div>
-    </template>
-    <template #footer>
-      <el-button type="primary" style="width: 150px;" @click="test">测试</el-button>
-      <el-button type="info" style="width: 150px;" @click="cancel">取消</el-button>
-      <el-button type="primary" style="width: 150px;" @click="confirm">确认</el-button>
+      <div style="display: flex; justify-content: center; padding-top: 20px;">
+        <el-button type="primary" style="width: 150px;" @click="test">测试</el-button>
+        <el-button type="info" style="width: 150px;" @click="cancel">取消</el-button>
+        <el-button type="primary" style="width: 150px;" @click="confirm">确认</el-button>
+      </div>
     </template>
   </ModalPop>
 </template>

src/components/EditPop/ModalPop.vue

@@ -22,18 +22,13 @@ const change = (visible: boolean) => {
 </script>
 
 <template>
-  <Modal class="ModalPop" v-model="props.modelValue" :width="width" draggable scrollable sticky @on-cancel="cancel" @on-visible-change="change">
+  <Modal class="ModalPop" footer-hide :mask-closable="false" v-model="props.modelValue" :width="width" draggable scrollable sticky @on-cancel="cancel" @on-visible-change="change">
     <template #header>
       <span style="font-size: 16px; font-weight: bold;color: #7A8495;">{{ props.title }}</span>
     </template>
     <div class="slot-warpper">
       <slot name="content"></slot>
     </div>
-    <template #footer>
-      <div style="display: flex; justify-content: center; padding-top: 20px;">
-        <slot name="footer"></slot>
-      </div>
-    </template>
   </Modal>
 </template>
 
@@ -59,7 +54,7 @@ const change = (visible: boolean) => {
     background: rgb(255, 255, 255);
     padding: 30px;
     border-radius: 4px;
-    max-height: 500px;
+    max-height: 550px;
   }
 }
 </style>
\ No newline at end of file

src/views/ruleConfig/Dictionary/index.vue

@@ -5,6 +5,7 @@ import { Split } from 'view-ui-plus';
 import ModalPop from "@/components/EditPop/ModalPop.vue"
 import AddClass from './modules/AddClass.vue' // 分类
 import AddValue from './modules/AddValue.vue' // 值
+import uploadModule from './modules/uploadModule.vue' // 上传模块
 
 const splitNum = ref(0.31) // 左右分割比例
 
@@ -28,7 +29,7 @@ const modalData = reactive({
   show: false,
   text: '',
   icon: 'error',
-  cancel: true,
+  cancel: false,
   type: ''
 })
 
@@ -96,7 +97,6 @@ const addValueClick = (type, item) => {
 const valueDelete = (item) => {
   console.log('删除值', item)
   modalData.type = 'value'
-  modalData.cancel = true
   modalData.icon = 'error'
   modalData.text = '删除后无法恢复，是否确认删除[' + item.name + ']?'
   modalData.show = true
@@ -106,7 +106,6 @@ const valueDelete = (item) => {
 const classDelete = (item) => {
   console.log('删除分类事件', item)
   modalData.type = 'class'
-  modalData.cancel = false
   modalData.icon = 'error'
   modalData.text = '删除后无法恢复，是否确认删除[' + item.name + ']?'
   modalData.show = true
@@ -133,10 +132,19 @@ const AddDomainConfirm = (item) => {
     console.log('新增分类确认', item)
   } else if (modalPopData.type === 'value') {
     console.log('新增值确认', item)
+  } else if (modalPopData.type === 'upload') {
+    console.log('导入', item)
   }
   modalPopData.show = false
 }
 
+// 导入功能
+const importClick = () => {
+  modalPopData.title = '上传文件'
+  modalPopData.type = 'upload'
+  modalPopData.show = true
+}
+
 // 获取列表数据
 const getList = () => { 
 
@@ -189,7 +197,7 @@ onMounted(() => {
                 </el-input>
               </el-form-item>
               <div style="display: flex;">
-                <el-button icon="Upload" type="primary">导入</el-button>
+                <el-button icon="Upload" type="primary" @click="importClick">导入</el-button>
                 <el-button icon="Download" type="success">导出</el-button>
                 <el-button icon="Plus" type="primary" @click="addValueClick('add')">新增值</el-button>
               </div>
@@ -232,6 +240,7 @@ onMounted(() => {
           v-if="modalPopData.type === 'class'" />
         <AddValue v-model="addValueForm" :type="modalPopData.operation" @cancel="modalPopCancel" @confirm="AddDomainConfirm"
           v-if="modalPopData.type === 'value'" />
+        <uploadModule @cancel="modalPopCancel" @confirm="AddDomainConfirm" v-if="modalPopData.type === 'upload'" />
       </template>
     </ModalPop>
   </div>

src/views/ruleConfig/Dictionary/modules/UploadModule.vue

+<script setup lang="ts" name="AddClass">
+import { ref } from "vue";
+import CustomUpload from "@/components/CustomUpload/index.vue"
+
+const emit = defineEmits(["update:modelValue", "cancel", "confirm"]);
+
+const radioValue = ref(1);
+const fileList = ref<File[]>([]);
+
+// 取消
+const cancel = () => {
+  emit("cancel");
+};
+
+// 确认
+const confirm = () => {
+  console.log(fileList.value);
+  // emit("confirm");
+};
+
+const handleUpload = (file: File) => {
+  console.log(file);
+  // 上传文件
+  // 处理上传结果
+  // 更新modelValue
+};
+</script>
+
+<template>
+  <div>
+    <div class="mb20">
+      <CustomUpload v-model:file-list="fileList" :limit="1" :needType="false" :needSize="false"  :listShow="false"  prompt='点击或拖拽文件到此处上传' />
+    </div>
+    <el-form-item label="上传方式" label-width="200px">
+      <el-radio-group v-model="radioValue">
+        <el-radio :label="1">覆盖原数据</el-radio>
+        <el-radio :label="2">追加数据</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <div class="btn">
+      <el-button type="info" style="width: 150px;" @click="cancel">取消</el-button>
+      <el-button type="primary" style="width: 150px;" @click="confirm">确认</el-button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.btn {
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+}
+</style>
\ No newline at end of file