branchErp/.history/src/views/artwork1/components/digitize_20250306135304.vue

<script setup>
import { artShowDetail } from "@/api-norm/art-manage/index.js";
import { digiInfo } from '@/api-norm/artwork/index.js';
import xNUpload from "@/components/x-n-upload/index.vue";
import { convertEmptyToNull, getImageDimensions, hasPermission } from "@/utils/common.js";
import { cloneDeep } from "lodash-es";
import { computed, ref } from "vue";
const props = defineProps({
  artworkUuid: {
    type: String,
    default: null
  },
  currentStatus: Number
});
const resetForm = ref({});
const formData = ref({
  ArtworkUuid: null, //画作ID
  SprayPosition: null, //喷涂位置
  SprayRemark: null, //喷涂备注
  DigiDate: null, //数字化拍摄时间
  DigiArtImg: null, //数字化画作图
  DigiArtCopyrightImg: null, //数字化画作版权图
  CopyrightHash: null, //版权哈希
  RealrightHash: null, //物权哈希
  AuthDataHash: null, //鉴证数据
  WtRealHash: null, //泰丰艺术区块链存证交易hash
  CxRealHash: null, //澄信链交易hash
  BaiduRealHash: null, //百度超级链交易hash
  DigiCopyrightInfo: null,
  DefineCopyrightHash: null,
  Rate: null
});
//0 新增 1 编辑  2 查看
const indepStatus = ref(0);
const initData = () => {
  getData()
  indepStatus.value = props.currentStatus;
};
const getData = async () => {
  const res = await artShowDetail({ ArtworkUuid: props.artworkUuid, Type: "5" });
  if (res.status === 0) {
    formData.value = convertEmptyToNull(res.data.DigiInfo);
  }
};
const digetPermission = computed(() => {
  return !hasPermission("r_artwork_view_btn_digetedit");
});
const cancel = () => {
  indepStatus.value = 2;
  formData.value = cloneDeep(resetForm.value);
};
const changeEdit = () => {
  resetForm.value = cloneDeep(formData.value);
  indepStatus.value = 1;
};
const finish=async (file)=>{
  const { width,height } = await getImageDimensions(file);
  const max = Math.max(width, height);
  const min = Math.min(width, height);
  formData.value.Rate = (Math.floor((max / min) * 100) / 100).toFixed(2);
}
const saveData=async ()=>{
 const res=await digiInfo(formData.value)
 if(res.status===0){
  indepStatus.value=2
  getData()
  message.success(res.msg);
 }
}
initData();
</script>
<template>
  <div class="flex flex-col flex-1 flex-nowrap overflow-hidden">
    <n-scrollbar class="flex-1 overflow-y-auto">
      <div class="bg-[#fff] px-[24px] pb-[35px]">
        <div class="h-[474px] rounded-[3px] border-[1px] border-[#e5e5e5] px-[23px] w-[100%] pb-[20px] mb-[20px]">
          <div class="h-[54px] border-b-[1px] border-[#e5e5e5] flex align-center mb-[20px]">
            hash值
          </div>
          <div class="flex flex-nowrap mb-[20px]">
            <div class="w-[150px] flex-shrink-0">版权hash值</div>
            <div class=" text-[#333639] text-[14px] flex flex-nowrap justify-between w-[100%]">
              <div class="text-[#8B8B8B] text-[14px]">{{ formData.CopyrightHash || "—" }}</div>
            </div>
          </div>
          <div class="flex flex-nowrap align-center mb-[20px]">
            <div class="w-[150px] flex-shrink-0">自定义版权hash值</div>
            <div class="text-[#8B8B8B] w-[100%]">
              <template v-if="[0,1].includes(indepStatus)">
                <n-input placeholder="请输入" v-model:value="formData.DefineCopyrightHash"
                         :disabled="digetPermission" clearable></n-input>
              </template>
              <template v-else>
                {{ formData.DefineCopyrightHash || "—" }}
              </template>
            </div>
          </div>
          <div class="flex flex-nowrap mb-[20px]">
            <div class="w-[150px] flex-shrink-0">物权hash值</div>
            <div class=" w-[100%]">
              <div class="mb-[10px] ">{{ formData.RealrightHash || "—" }}</div>
              <div class="flex flex-nowrap">
                <div class="w-[50%] mr-[30px]">
                  <div class="text-[#333639] text-[14px] mb-[5px]">
                    喷漆位置
                  </div>
                  <div class="text-[#8B8B8B]">
                    <template v-if="[0,1].includes(indepStatus)">
                      <n-input placeholder="请输入" v-model:value="formData.SprayPosition"
                               :disabled="digetPermission" clearable></n-input>
                    </template>
                    <template v-else>
                      {{ formData.SprayPosition || "—" }}
                    </template>
                  </div>
                </div>
                <div class="w-[50%]">
                  <div class="text-[#333639] text-[14px] mb-[5px]">
                    备注
                  </div>
                  <div class="text-[#8B8B8B]">
                    <template v-if="[0,1].includes(indepStatus)">
                      <n-input placeholder="请输入" v-model:value="formData.SprayRemark"
                               :disabled="digetPermission" clearable></n-input>
                    </template>
                    <template v-else>
                      {{ formData.SprayRemark || "—" }}
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex flex-nowrap mb-[20px]">
            <div class="w-[150px] flex-shrink-0">鉴证数据hash值</div>
            <div class="text-[#8B8B8B]">{{ formData.AuthDataHash || "—" }}</div>
          </div>
          <div class="flex flex-nowrap mb-[20px]">
            <div class="w-[150px] flex-shrink-0">泰丰艺术区块链存证交易hash</div>
            <div class=" text-[#8B8B8B] text-[14px] flex flex-nowrap justify-between w-[100%]">
              <div>{{ formData.WtRealHash || "—" }}</div>
              <div>{{ formData.TransactionhashTime }}</div>
            </div>
          </div>
          <div class="flex flex-nowrap mb-[20px]">
            <div class="w-[150px] flex-shrink-0">澄信链交易hash</div>
            <div class=" text-[#8B8B8B] text-[14px] flex flex-nowrap justify-between w-[100%]">
              <div>{{ formData.CxRealHash || "—" }}</div>
              <div>{{ formData?.ChangtransactionhashTime }}</div>
            </div>
          </div>
          <div class="flex flex-nowrap mb-[20px]">
            <div class="w-[150px] flex-shrink-0">百度超级链交易hash</div>
            <div class=" text-[#8B8B8B] text-[14px] flex flex-nowrap justify-between w-[100%]">
              <div>{{ formData.BaiduRealHash }}</div>
              <div>{{ formData?.TransactionhashTime }}</div>
            </div>
          </div>
        </div>
        <div class="rounded-[3px] border-[1px] border-[#e5e5e5] px-[23px] w-[100%] pb-[20px] mb-[20px]">
          <div class="h-[54px] border-b-[1px] border-[#e5e5e5] flex align-center mb-[20px]">
            数字化数据
          </div>
          <div class="flex flex-nowrap align-center text-[14px]">
            <div class="">
             <div class="flex">
               <div class="w-[150px]">数字化时间</div>
               <div>
                 <template v-if="[0,1].includes(indepStatus)">
                   <n-date-picker v-model:formatted-value="formData.DigiDate"
                                  format="yyyy-MM-dd"
                                  class="w-[421px]"
                                  :disabled="digetPermission" type="date"
                                  clearable></n-date-picker>
                 </template>
                 <template v-else>
                   <div class="text-[#8B8B8B]">{{ formData.DigiDate || "—" }}</div>
                 </template>
               </div>
             </div>
              <div class="flex mt-[10px]">
                <div class="w-[150px]">比值:</div>
                <div>{{formData.Rate||'—'}}</div>
              </div>
            </div>
            <div class="ml-auto">
              <div class="flex flex-col align-center">
           
                <x-n-upload v-model:value="formData.DigiArtImg" accept="image/*"
                          :disabled="digetPermission||indepStatus===2" :max="1"
                          @update:value="finish"
                          value-format="simple"
                          item-height="101px" item-width="186px">
                </x-n-upload>
                <div class="mt-[5px]">画作图（内部拍摄）</div>

              </div>
            </div>
          </div>
        </div>
        <div class="h-[171px] rounded-[3px] border-[1px] border-[#e5e5e5] px-[23px] w-[100%] pb-[20px]">
          <div class="h-[54px] border-b-[1px] border-[#e5e5e5] flex align-center mb-[20px]">
            版权数据
          </div>
          <div class="flex flex-nowrap align-center mb-[20px]">
            <div class="w-[150px] flex-shrink-0">版权信息</div>
            <div class="text-[#8B8B8B] w-[100%]">
              <template v-if="[0,1].includes(indepStatus)">
                <n-input placeholder="请输入" v-model:value="formData.DigiCopyrightInfo"
                         :disabled="digetPermission" clearable></n-input>
              </template>
              <template v-else>
                {{ formData.DigiCopyrightInfo || "—" }}
              </template>
            </div>
          </div>
          <div class="flex flex-nowrap mb-[20px]">
            <div class="w-[150px] flex-shrink-0">版权路径</div>
            <div class="text-[#8B8B8B]">{{ formData.DigiArtCopyrightImg || "—" }}</div>
          </div>
        </div>
      </div>
    </n-scrollbar>
    <div class="flex justify-center  align-center   mt-[7px] h-[50px] pb-[10px]">
      <template v-if="[0,1].includes(indepStatus)">
        <n-button
          class="w-[161px] h-[34px] mr-[20px]"
          color="#C7C7C9"
          @click="cancel"
        >取消
        </n-button
        >
        <n-button
          class="w-[161px] h-[34px]"
          color="#46299D"
          @click="saveData"
        >保存
        </n-button
        >
      </template>
      <n-button
        v-if="indepStatus===2"
        class="w-[161px] h-[34px]"
        @click="changeEdit"
        color="#46299D"
      >编辑
      </n-button
      >
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>