archives/src/views/archives/components/meta-info.vue

<template>
    <el-drawer v-model="showModal"  v-if="showModal" title="元数据信息" class="hc-modal-border" draggable destroy-on-close @closed="cancelClick" :size="size"
    ref="drawerRef" :modal-class="uis" :class="`hc-drawer-box ${ui}`"   >

       <metaTable  :isEdit="isEdit" :loading="tabeloading" :metaDataTable="metaDataTable" @changemeDataTable="changemeDataTable"  v-if="metaDataTable.length>0"/>
       <HcNoData v-if="metaDataTable.length==0"/>
        <template #footer>

            <div class="dialog-footer" style="margin-top: 20px" v-if="isEdit">
                <el-button size="large" @click="gobackClick">
                    <HcIcon name="close"/>
                    <span>返回</span>
                </el-button>
                <el-button type="primary" hc-btn  @click="confirmClick">
                    <HcIcon name="check"/>
                    <span>编辑</span>
                </el-button>
            </div>
            <div class="dialog-footer" style="margin-top: 20px" v-else>
                <el-button size="large" @click="cancelClick">
                    <HcIcon name="close"/>
                    <span>取消</span>
                </el-button>
                <el-button type="primary" hc-btn :loading="saveloading" @click="saveClick">
                    <HcIcon name="check"/>
                    <span>提交</span>
                </el-button>
            </div>
        </template>
    </el-drawer>


</template>

<script setup>
import {ref, watch,toRefs} from "vue"
import {useAppStore} from "~src/store";
import metaTable from './meta-table.vue'
import tuningApi from "~api/archiveConfig/tuning.js";
import {getArrValue} from "js-fast-way"
//参数
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },

    uis: {
        type: String,
        default: ''
    },
    ui: {
        type: String,
        default: ''
    },
    fileId:{
        type: String,
        default: ''
    },
    loading:{
        type: String,
        default: ''
    }

})

//变量
const userStore = useAppStore()


const showModal = ref(props.show)
const isLoading = ref(props.loading)
const fileIdval=ref(props.fileId)
const isEdit =ref(true)

const size = ref('70%')
//监听
watch(() => [
    props.show,
   
], ([show,  loading, user]) => {
    showModal.value = show
    isLoading.value = loading
    if (show) {
        isEdit.value=true
        getmetaInfo()
    }
})
//获取元数据信息
const tabeloading=ref(false)
const metaDataTable=ref([])
const getmetaInfo=async()=>{
    tabeloading.value = true
    const {error, code, data} = await tuningApi.getMetadataFileByid({
        fileId:props.fileId,
    })
    tabeloading.value = false
    if (!error && code === 200) {
        console.log(data,'data');
        metaDataTable.value=getArrValue(data)
    } else {
        metaDataTable.value=[]
    }
}
const updateInfo=ref('')
const changemeDataTable=(val)=>{
    updateInfo.value=val
}

const emits = defineEmits(['upshowModal','getTableData'])
//返回  
const gobackClick = () => {
    isEdit.value=true
      emits('upshowModal', false)
}
//取消
const cancelClick = () => {
    isEdit.value=true
}

//编辑
const confirmClick = async () => {
    isEdit.value=false
}
//提交
const saveloading=ref(false)
const saveClick = async () => {
    isEdit.value=false
    saveloading.value = true
    const {error, code, msg} = await tuningApi.updateMetadata({
        list:updateInfo.value
    })
    saveloading.value = false
    if (!error && code === 200) {
        window.$message.success(msg)
        emits('getTableData')
   
    } else {
     
    }
    emits('upshowModal', false)
}

</script>
<style lang="scss">
.modalbox{
 .m20{
     margin-top: 20px;
 }
 .fsize{
     font-size: 1.25rem;
 }
}

</style>