导入

src/main.ts

@@ -1,7 +1,7 @@
-import './style/tailwindcss.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import router, { initRoutes } from './router'
+import './style/tailwindcss.css'
 import './style/index.scss'
 import 'virtual:svg-icons-register' // 【svg-icons相关】
 import initComponent from '@/plugins/initComponent'

src/style/index.scss

@@ -5,8 +5,6 @@
   outline: none; // dom元素选中带边框
   -webkit-user-drag: none;
   box-sizing: border-box;
-  margin: 0;
-  padding: 0;
   font-family: 'PingFang SC';
 }
 

src/views/form/business-model/excel-import.vue

@@ -0,0 +1,162 @@
+<template>
+  <CzrDialog
+    :show="show"
+    title="Excel导入许可范围"
+    @onClose="$emit('update:show', false)"
+    @onSubmit="onSubmit"
+    width="auto"
+    :loading="state.loading"
+  >
+    <div class="__normal-form">
+      <CzrForm ref="ref_form" label-width="80px">
+        <CzrFormColumn
+          :span="24"
+          label="下载模板"
+          v-model:param="state.tempVal"
+        >
+          <template #czr>
+            <div class="btn __hover" @click="onDownload">点击下载导入模板</div>
+          </template>
+        </CzrFormColumn>
+        <CzrFormColumn
+          :span="24"
+          label="上传文件"
+          v-model:param="state.tempVal"
+        >
+          <template #czr>
+            <el-upload
+              ref="ref_upload"
+              :limit="1"
+              accept=".xlsx, .xls"
+              :headers="upload.headers"
+              :action="upload.url"
+              :disabled="upload.isUploading"
+              :on-progress="() => (upload.isUploading = true)"
+              :on-success="handleFileSuccess"
+              :before-upload="handleBeforeUpload"
+              :auto-upload="false"
+              drag
+            >
+              <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
+              <div class="el-upload__text">
+                将文件拖到此处，或<em style="color: var(--czr-main-color)"
+                  >点击上传</em
+                >
+              </div>
+            </el-upload>
+          </template>
+        </CzrFormColumn>
+      </CzrForm>
+    </div>
+  </CzrDialog>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  getCurrentInstance,
+  inject,
+  nextTick,
+  reactive,
+  ref,
+  watch,
+} from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { UploadFilled } from '@element-plus/icons-vue'
+
+const emit = defineEmits(['update:show', 'refresh'])
+const { proxy } = getCurrentInstance()
+const props = defineProps({
+  show: { default: false },
+  transfer: {},
+})
+const state: any = reactive({
+  loading: false,
+  tempVal: '',
+  uploaded: false,
+})
+const ref_upload = ref()
+/*** 用户导入参数 */
+const upload = reactive({
+  // 是否禁用上传
+  isUploading: false,
+  // 设置上传的请求头部
+  headers: {
+    'Blade-Auth': inject('token'),
+  },
+  // 上传的地址
+  url: '/business-model-api/api/blade-dcms/hazardouschemicalscatalog/parseBusinessScope',
+})
+watch(
+  () => props.show,
+  (n) => {
+    if (n) {
+      state.uploaded = false
+      upload.isUploading = false
+      state.tempVal = ''
+      nextTick(() => {
+        ref_upload.value.clearFiles()
+      })
+    }
+  },
+)
+const onDownload = () => {
+  window.open(
+    'http://120.226.134.7:8100/cdn/xlsx/businessScopeImport.xlsx',
+    '_blank',
+  )
+}
+const onSubmit = () => {
+  ref_upload.value.submit()
+}
+const handleBeforeUpload = () => {
+  return new Promise((resolve, reject) => {
+    ElMessageBox.confirm(`请确认是否导入?`, '提示', {
+      confirmButtonText: '是',
+      cancelButtonText: '否',
+      type: 'warning',
+    } as any)
+      .then(() => {
+        resolve(true)
+      })
+      .catch(() => {})
+  })
+}
+/** 文件上传成功处理 */
+const handleFileSuccess = (res, file, fileList) => {
+  console.log(res, file, fileList)
+  ElMessageBox.confirm(
+    `成功导入 <span style="color: var(--czr-success-color)">${res.data.data.length}</span> 条数据！`,
+    '导入结果',
+    {
+      dangerouslyUseHTMLString: true,
+      showClose: false,
+      showCancelButton: false,
+    },
+  ).then(() => {
+    if (res.code === 200) {
+      if (res.data.success) {
+        emit('update:show', false)
+        emit('refresh', res.data.data)
+      } else {
+        ElMessage.error(res.data.errorMsg)
+      }
+    } else {
+      ElMessage.error(res.msg)
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.btn {
+  background-color: var(--czr-main-color);
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 6px;
+  border-radius: 4px;
+  flex: none !important;
+}
+</style>

src/views/form/business-model/text-import.vue

@@ -0,0 +1,165 @@
+<template>
+  <CzrDialog
+    :show="show"
+    title="文本导入许可范围"
+    @onClose="$emit('update:show', false)"
+    @onSubmit="onSubmit"
+    width="60%"
+    height="60%"
+    :loading="state.loading"
+  >
+    <div class="form-main">
+      <div class="tips">注意：许可范围之间请用、号分割</div>
+      <CzrForm label-width="auto" ref="ref_form">
+        <CzrFormColumn
+          required
+          :span="24"
+          label="许可范围"
+          v-model:param="state.text"
+          type="textarea"
+          placeholder="请输入许可范围，以、分割"
+        />
+      </CzrForm>
+    </div>
+  </CzrDialog>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  getCurrentInstance,
+  inject,
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+} from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useDictionaryStore } from '@/stores'
+import axios from 'axios'
+
+const DictionaryStore = useDictionaryStore()
+const { proxy } = getCurrentInstance()
+const emit = defineEmits(['update:show', 'refresh'])
+const props = defineProps({
+  show: { default: false },
+  transfer: <any>{},
+})
+const state: any = reactive({
+  loading: false,
+  text: '',
+  token: inject('token'),
+})
+const ref_form = ref()
+watch(
+  () => props.show,
+  (n) => {
+    state.loading = false
+    if (n) {
+      state.text = ''
+    }
+  },
+)
+
+const onSubmit = () => {
+  ref_form.value
+    .submit()
+    .then(() => {
+      state.loading = true
+      axios
+        .post(
+          '/business-model-api/api/blade-dcms/hazardouschemicalscatalog/parseBusinessScopeStr',
+          state.text,
+          {
+            headers: {
+              'Blade-Auth': state.token,
+              'Content-Type': 'text/plain', // 关键：告诉服务器这是纯文本
+            },
+          },
+        )
+        .then((res: any) => {
+          if (res.data.code === 200) {
+            if (res.data.data.success) {
+              ElMessageBox.confirm(
+                `成功导入 <span style="color: var(--czr-success-color)">${res.data.data.data.length}</span> 条数据！`,
+                '导入结果',
+                {
+                  dangerouslyUseHTMLString: true,
+                  showClose: false,
+                  showCancelButton: false,
+                },
+              ).then(() => {
+                if (res.data.code === 200) {
+                  if (res.data.data.success) {
+                    emit('update:show', false)
+                    emit('refresh', res.data.data.data)
+                  } else {
+                    ElMessage.error(res.data.data.errorMsg)
+                  }
+                } else {
+                  ElMessage.error(res.data.msg)
+                }
+              })
+            } else {
+              ElMessage.error(res.data.data.errorMsg)
+            }
+          } else {
+            ElMessage.error(res.data.msg)
+          }
+        })
+        .catch((e) => {
+          ElMessage.error(e.response.data.msg)
+          state.loading = false
+        })
+    })
+    .catch((e) => {
+      ElMessage({
+        message: e[0].message,
+        grouping: true,
+        type: 'warning',
+      })
+    })
+}
+onMounted(() => {})
+</script>
+
+<style lang="scss" scoped>
+.form-main {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  .tips {
+    background-color: rgba(var(--czr-main-color-rgb), 0.2);
+    color: var(--czr-error-color);
+    padding: 6px 10px;
+    border-radius: 4px;
+    margin-bottom: 10px;
+  }
+  :deep(.czr-form) {
+    flex: 1;
+    .el-form {
+      width: 100%;
+      height: 100%;
+      .el-row {
+        width: 100%;
+        height: 100%;
+        .el-form-item {
+          width: 100%;
+          height: 100%;
+          .el-textarea {
+            width: 100%;
+            height: 100%;
+            .el-textarea__inner {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>