名片解析

src/App.vue

@@ -9,9 +9,9 @@ import autoRefresh from './update'
 export default {
   name: 'App',
   created () {
-    // if (process.env.NODE_ENV !== 'production') {
-    //   return
-    // }
+    if (process.env.NODE_ENV !== 'production') {
+      return
+    }
     autoRefresh()
   }
 }

src/router/routes.js

@@ -993,11 +993,11 @@ export default {
                     hidden: 0,
                     icon: '',
                     id: 1322,
-                    label: '图片导入',
+                    label: '名片解析',
                     level: 3,
                     local: '',
                     meta: null,
-                    metastr: '{"enName":"Image Import","title":"图片导入","target":false}',
+                    metastr: '{"enName":"Image Import","title":"名片解析","target":false}',
                     meun: '',
                     name: 'imageImport',
                     open: 0,

src/views/dataOrigin/unstructuredData/manualCollection/components/imageImportEdit.vue

@@ -0,0 +1,246 @@
+<template>
+  <m-dialog title="名片解析" :visible.sync="show" showDrawer :footer="false">
+    <div class="fullBox box-2">
+      <v-card class="upload-card d-flex flex-column align-center justify-center overflow-hidden" elevation="5">
+        <template v-if="file">
+          <div class="fullBox overflow-auto">
+            <div class="change d-flex align-center justify-end pr-3 pt-3">
+              <UploadBtn
+                :loading="loading"
+                :disabled="loading"
+                color="primary"
+                class="white--text"
+                @change="handleImport"
+              >
+                <v-icon
+                  left
+                  dark
+                >
+                  mdi-cloud-upload
+                </v-icon>
+                更换名片
+              </UploadBtn>
+              <v-btn color="primary" rounded class="buttons white--text ml-2" @click="handleAnalysis">
+                <v-icon
+                  left
+                  dark
+                >
+                  mdi-file-arrow-left-right
+                </v-icon>
+                解析
+              </v-btn>
+            </div>
+            <img width="100%" :src="previewUrl" />
+          </div>
+        </template>
+        <template v-else>
+          <div>
+            <UploadBtn
+              :loading="loading"
+              :disabled="loading"
+              color="primary"
+              class="ma-2 white--text"
+              @change="handleImport"
+            >
+              <v-icon
+                left
+                dark
+              >
+                mdi-cloud-upload
+              </v-icon>
+              点击上传
+            </UploadBtn>
+          </div>
+          <div>
+            <v-chip>请选择文件解析</v-chip>
+          </div>
+        </template>
+      </v-card>
+      <MCard class="show-card d-flex flex-column" title="名片解析" v-loading="loading">
+        <template #title>
+          <v-btn color="primary" class="buttons" rounded>
+            <v-icon left>mdi-send</v-icon>
+            提交
+          </v-btn>
+        </template>
+        <div class="fullBox overflow-auto">
+          <MForm class="mt-3" :items="formItems" v-model="formQuery">
+            <template #baseInfo>
+              <div>
+                <v-subheader>基础信息</v-subheader>
+                <v-menu
+                  attach
+                  :nudge-width="200"
+                  offset-x
+                >
+                  <template v-slot:activator="{ on, attrs }">
+                    <v-avatar
+                      class="ma-3"
+                      v-bind="attrs"
+                      v-on="on">
+                      <img
+                        src="https://cdn.vuetifyjs.com/images/john.jpg"
+                        alt="John"
+                      >
+                    </v-avatar>
+                  </template>
+
+                  <v-card>
+                    <img
+                      style="display: block;"
+                      src="https://cdn.vuetifyjs.com/images/john.jpg"
+                      width="300"
+                      alt="John"
+                    >
+                  </v-card>
+                </v-menu>
+              </div>
+            </template>
+            <template #companyInfo>
+              <v-subheader>公司/酒店信息</v-subheader>
+            </template>
+            <template #relationship>
+              <v-subheader>联系方式</v-subheader>
+            </template>
+            <template #addressInfo>
+              <v-subheader>地址信息</v-subheader>
+            </template>
+            <template #systemInfo>
+              <div class="pb-3">
+                <v-subheader>系统信息</v-subheader>
+                  <div class="px-3 infoBox">
+                    <div class="mb-3">
+                      <span class="label">状态</span>
+                      <v-chip small color="success">开启</v-chip>
+                    </div>
+                    <div class="mb-3">
+                      <span class="label">创建时间</span>
+                      <v-chip small color="info">2025/03/31 10:06</v-chip>
+                    </div>
+                    <div class="mb-3">
+                      <span class="label">更新时间</span>
+                      <v-chip small color="info">2025/03/31 11:48</v-chip>
+                    </div>
+                  </div>
+              </div>
+            </template>
+          </MForm>
+        </div>
+      </MCard>
+    </div>
+    <Linear text="解析中..." :visible.sync="linearLoading"></Linear>
+  </m-dialog>
+</template>
+
+<script>
+import Linear from '@/components/Progress/linear.vue'
+import UploadBtn from '@/components/UploadBtn'
+import MDialog from '@/components/Dialog'
+import MCard from '@/components/MCard'
+import MForm from '@/components/MForm'
+export default {
+  name: 'imageImportEdit',
+  components: {
+    MDialog,
+    MCard,
+    UploadBtn,
+    Linear,
+    MForm
+  },
+  data () {
+    return {
+      linearLoading: false,
+      loading: false,
+      show: false,
+      file: null,
+      previewUrl: null,
+      formItems: [
+        { slotName: 'baseInfo' },
+        { label: '姓名（中）', key: 'name', type: 'text', outlined: true, dense: true, col: 6 },
+        { label: '姓名（英）', key: 'name', type: 'text', outlined: true, dense: true, col: 6 },
+        { label: '职位（中）', key: 'post', type: 'text', outlined: true, dense: true, col: 6 },
+        { label: '职位（英）', key: 'post', type: 'text', outlined: true, dense: true, col: 6 },
+        { slotName: 'relationship' },
+        { label: '手机', key: 'post', type: 'text', outlined: true, dense: true, col: 4 },
+        { label: '电话', key: 'post', type: 'text', outlined: true, dense: true, col: 4 },
+        { label: '邮箱', key: 'post', type: 'text', outlined: true, dense: true, col: 4 },
+        { slotName: 'companyInfo' },
+        { label: '酒店名称（中）', key: 'post', type: 'text', outlined: true, dense: true, col: 6 },
+        { label: '酒店名称（英）', key: 'post', type: 'text', outlined: true, dense: true, col: 6 },
+        { label: '品牌名称（中）', key: 'post', type: 'text', outlined: true, dense: true, col: 6 },
+        { label: '品牌名称（英）', key: 'post', type: 'text', outlined: true, dense: true, col: 6 },
+        { slotName: 'addressInfo' },
+        { label: '详细地址（中）', key: 'post', type: 'text', outlined: true, dense: true, col: 6 },
+        { label: '详细地址（英）', key: 'post', type: 'text', outlined: true, dense: true, col: 6 },
+        { slotName: 'systemInfo' }
+      ],
+      formQuery: {}
+    }
+  },
+  methods: {
+    open (item) {
+      this.show = true
+      this.loading = false
+      if (!item) {
+        this.file = null
+        this.previewUrl = null
+        return
+      }
+      // 获取文件内容
+      this.file = null
+      this.handlePreview(this.file)
+    },
+    async handleImport (file) {
+      this.loading = true
+      this.file = file
+      this.handlePreview(file, () => {
+        this.loading = false
+      })
+    },
+    handlePreview (file, cb) {
+      // 创建预览
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        this.previewUrl = e.target.result
+        cb()
+      }
+      reader.readAsDataURL(file)
+    },
+    handleAnalysis () {
+      this.linearLoading = true
+      setTimeout(() => {
+        this.linearLoading = false
+      }, 2000)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.fullBox {
+  width: 100%;
+  height: 100%;
+}
+.upload-card {
+  // position: relative;
+  .change {
+    position: sticky;
+    top: 0;
+  }
+
+}
+.box-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 15px;
+}
+.infoBox {
+  .label {
+    width: 100px;
+    display: inline-block;
+    text-align: right;
+    margin-right: 10px;
+    color: #666;
+  }
+}
+</style>

src/views/dataOrigin/unstructuredData/manualCollection/dynamic/imageImport.vue

@@ -13,39 +13,36 @@
       @pageHandleChange="pageHandleChange"
       @sort="handleSort"
     >
+      <template #status="{ item }">
+        <v-chip small :color="item.status === 1 ? 'success' : 'error'">{{ item.status === 1 ? '已启用' : '已禁用'}}</v-chip>
+      </template>
       <template #navBtn>
-        <!-- <v-btn class="buttons mr-3" rounded elevation="5" color="primary" @click="handleTake" :loading="takeLoading">
-          <v-icon left>mdi-camera</v-icon>
-          拍照
-        </v-btn> -->
-        <UploadBtn
-          class="buttons"
-          rounded
-          elevation="5"
-          color="primary"
-          accept="image/*"
-          @change="handleImport"
-        >
-          <v-icon left>mdi-import</v-icon>
-          导入
-        </UploadBtn>
+        <v-btn class="buttons" rounded elevation="5" color="primary" @click="handleAdd">
+          <v-icon left>mdi-plus</v-icon>
+          新增解析
+        </v-btn>
+      </template>
+      <template #actions="{ item }">
+        <v-btn color="primary" text @click="handleEdit(item)">编辑</v-btn>
+        <v-btn :color="item.status === 1 ? 'warning' : 'success'" text @click="handleStatus(item)">
+          {{ item.status === 1 ? '禁用' : '启用'}}
+        </v-btn>
+        <v-btn color="error" text @click="handleDelete(item)">删除</v-btn>
       </template>
     </m-table>
-    <m-camera ref="camera" @rendered="takeLoading  = false"></m-camera>
+    <ImageImportEdit ref="imageImportEditRefs"></ImageImportEdit>
   </div>
 </template>
 
 <script>
-import UploadBtn from '@/components/UploadBtn'
 import MFilter from '@/components/Filter'
 import MTable from '@/components/List/table.vue'
-import MCamera from '../components/MCamera'
+import ImageImportEdit from '../components/imageImportEdit'
 export default {
   name: 'image-import',
-  components: { MFilter, MTable, MCamera, UploadBtn },
+  components: { MFilter, MTable, ImageImportEdit },
   data () {
     return {
-      takeLoading: false,
       loading: false,
       show: false,
       filter: {
@@ -58,20 +55,28 @@ export default {
         name: null
       },
       headers: [
-        { text: '标题', align: 'start', value: 'title' },
         { text: '姓名', align: 'start', value: 'name' },
-        { text: '来源', align: 'start', value: 'source' },
+        { text: '职位', align: 'start', value: 'source' },
+        { text: '酒店/公司', align: 'start', value: 'company' },
         { text: '创建日期', align: 'start', value: 'createDate' },
+        { text: '状态', align: 'start', value: 'status' },
         { text: '操作', align: 'start', value: 'actions' }
       ],
-      itemData: {},
-      items: [],
+      items: [
+        {
+          name: '张三',
+          source: '总经理',
+          company: 'UrCove by HYATT 上海静安',
+          createDate: '2025/03/31 10:06',
+          status: 1
+        }
+      ],
       orders: [],
       pageInfo: {
         size: 10,
         current: 1
       },
-      total: 0
+      total: 1
     }
   },
   created () {
@@ -84,19 +89,17 @@ export default {
       this.pageInfo.current = 1
       this.init()
     },
-    handleImport () {
-      this.itemData = {}
-    },
-    handleTake () {
-      this.takeLoading = true
-      this.$refs.camera.open()
+    handleAdd () {
+      this.$refs.imageImportEditRefs.open()
     },
     async handleEdit (item) {
-      this.itemData = item
+      this.$refs.imageImportEditRefs.open(item)
+    },
+    async handleStatus (item) {
+      item.status = item.status === 1 ? 0 : 1
     },
-    handleDelete (ids) {
-      if (Array.isArray(ids) && !ids.length) return this.$snackbar.warning('请选择要删除的选项')
-      this.$confirm('提示', '是否删除该选项')
+    handleDelete (item) {
+      this.$confirm('提示', `是否删除 [ ${item.name} ]`)
         .then(async () => {
           try {
             this.$snackbar.success('删除成功')