Web/admin.ui.plus-master/src/views/admin/product/qrBook/components/qrbook-edit.vue

<template>
    <div class="admin-authorize-editInfo">
      <el-dialog :title="formData.titleText" v-model="formData.isShowDialog" draggable width="769px">
        <el-form :model="formData.editData"
                 :rules="rules"
                 ref="formRef"
                 v-loading="formData.loading"
                 size="default"
                 label-width="80px">
          <el-row :gutter="35">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="文件名" prop="fileName">
                <el-input v-model="formData.editData.fileName" disabled placeholder="上传文件会自动填写文件名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="上传人" prop="author">
                <!-- <el-input v-model="formData.editData.author" placeholder="请输入上传人" clearable></el-input> -->
                
                  <span v-if="injectedNickName">{{ injectedNickName }}</span>
                  <span v-else>暂未获取到上传人昵称</span>
              
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="状态" prop="status">
              <el-select  v-model="formData.editData.status" placeholder="请设置文件状态" >
                <el-option v-for="(value, key) in statusType" :key="key" :label="value[1].name"  :value="Number(value[1].value)" />
              </el-select>
            </el-form-item>
          </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="formData.editData.remark" placeholder="请输入备注" rows="6" clearable type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <QRBookUpload v-model="formData.fileValue" ref="uploadFileRef" :file="{fileName:formData.editData.fileName}" @onUpload="onUpload"/>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="onCancel" icon="ele-CircleClose" size="default">取 消</el-button>
            <el-button type="primary" :icon="formData.editIcon" @click="onSubmit" size="default">{{formData.buttonText}}</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup lang="ts">
  import {defineAsyncComponent, reactive, ref, watch, inject, computed} from "vue";
  import {FormRules} from "element-plus";
  import { usePersonalStore } from "/@/stores/personalStore"; // 引入新的 Store
  import {useGlobalCacheStore} from "/@/stores/globalCacheStore";
  import { QRBookFileInfoRequset, QRBookTableInfo } from "/@/api/admin/productionManagement/QRBookDto";
  import { QRBookApi } from "/@/api/admin/productionManagement/qrBookApi";
  import eventBus from "/@/utils/mitt";
  import {}from"@\views\admin\personal\index.vue"
import { log } from "console";
  
  /** 引入组件 */
  const QRBookUpload = defineAsyncComponent(() => import('./qrbook-upload.vue'))
  
  /** 获取全局缓存 */
  const globalCacheStore = useGlobalCacheStore()
  /** 获取文件状态 */
  const statusType = ref(globalCacheStore.getGlobalStore().get('qrBookFileStatus'))
  
  const personalStore = usePersonalStore();
  // 使用computed确保数据变化时能及时更新
  const injectedNickName = computed(() => personalStore.personalFormNickName);

  // 可以添加watch用于调试，观察数据变化
  watch(injectedNickName, (newValue) => {
    console.log('上传人昵称已更新:', newValue);
  });


// 打印日志进行调试
console.log('injectedNickName:', injectedNickName.value);


  /**数据对象 */
  const formData = reactive({
    loading: false,
    titleText:'',
    editIcon:'',
    buttonText:'',
    isShowDialog: false,
    editData:{} as QRBookTableInfo,
    fileValue: null
  })

  /**表单校验*/
  const rules = reactive<FormRules>({
    fileName: [
      { required: true, message: '请输入文件名', trigger: 'blur' },
    ]
  })
  
  /**
   * 表单对象
   */
  const formRef = ref()
  
  const openDialog = (val) => {
    formData.isShowDialog = true
    if(val){
      formData.editData = JSON.parse(JSON.stringify(val))
      formData.titleText = '更新说明书'
      formData.buttonText = '更新'
      formData.editIcon = 'ele-Refresh'
    }else {
      formData.editData = {} as QRBookTableInfo
      formData.titleText = '添加说明书'
      formData.buttonText = '添加'
      formData.editData.status = 1
      formData.editIcon = 'ele-CirclePlus'
    }
  }
  
  const onCancel = () => {
    formData.editData = {} as QRBookTableInfo
    formData.isShowDialog = false
  }
  
  /***监听弹窗关   闭表单验证*/
  watch(() => formData.isShowDialog,(newVal) => {
    if(newVal) formRef.value?.resetFields()
  })
  
  const onUpload = (val) => {
    formData.editData.guid = val.guid
    formData.editData.fileName = val.fileName + val.extension
    formData.editData.extension = val.extension
  }
  
  const uploadFileRef = ref(null);
  
  const onSubmit =  () => {
    formRef.value.validate(async (valid: boolean) =>{
      if(!valid) return
  
      formData.loading = true
      let request = JSON.parse(JSON.stringify(formData.editData)) 
      let res = await new QRBookApi().uploadFile(request as QRBookFileInfoRequset)
      if(res?.data?.value) eventBus.emit('refreshView')

      formData.editData = {} as QRBookTableInfo
      formData.isShowDialog = false
      formData.loading = false
    })
  }
  
  defineExpose({
    openDialog,
  })
  </script>
  <style scoped lang="scss">
  
  </style>