feat: 设备台账新增附件上传和详情查看

gongchunyi

6 天以前 6a4ca55df9aa84ca256ec118cf1d1601817e5c99

feat: 设备台账新增附件上传和详情查看

 src/views/equipmentManagement/ledger/Form.vue

@@ -156,6 +156,16 @@
                    />
                </el-form-item>
            </el-col>
      <el-col :span="24">
        <el-form-item label="设备图片" prop="storageBlobDTOs">
          <AttachmentUploadImage
            v-model:fileList="fileList"
            :limit="20"
            :fileSize="5"
            :buttonText="'上传图片'"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
@@ -170,7 +180,8 @@
  calculateTaxExclusiveTotalPrice,
} from "@/utils/summarizeTable";
import { ElMessage } from "element-plus";
import {ref, getCurrentInstance} from "vue";
import { ref, getCurrentInstance, computed } from "vue";
import AttachmentUploadImage from '@/components/AttachmentUpload/image/index.vue';

const { proxy } = getCurrentInstance();
const { tax_rate } = proxy.useDict("tax_rate");
@@ -230,6 +241,18 @@
  // createUser: useUserStore().nickName, // 录入人
  createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), // 录入日期
    planRuntimeTime: dayjs().format("YYYY-MM-DD"), // 录入日期
  storageBlobDTOs: undefined, // 设备图片提交
  storageBlobVOs: undefined, // 设备图片展示
});

const fileList = computed({
  get() {
    return form.storageBlobVOs || [];
  },
  set(val) {
    form.storageBlobDTOs = val;
    form.storageBlobVOs = val;
  }
});

const loadForm = async (id) => {
@@ -259,6 +282,8 @@
    } else {
      form.planRuntimeTime = undefined;
    }
    form.storageBlobVOs = data.storageBlobVOs;
    form.storageBlobDTOs = data.storageBlobVOs;
  }
};


 src/views/equipmentManagement/ledger/index.vue

@@ -109,13 +109,52 @@
        </div>
      </template>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="设备台账详情" width="60%" draggable>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="设备名称">{{ detailData.deviceName }}</el-descriptions-item>
        <el-descriptions-item label="规格型号">{{ detailData.deviceModel }}</el-descriptions-item>
        <el-descriptions-item label="设备品牌">{{ detailData.deviceBrand }}</el-descriptions-item>
        <el-descriptions-item label="设备类型">{{ detailData.type }}</el-descriptions-item>
        <el-descriptions-item label="供应商">{{ detailData.supplierName }}</el-descriptions-item>
        <el-descriptions-item label="存放位置">{{ detailData.storageLocation }}</el-descriptions-item>
        <el-descriptions-item label="单位">{{ detailData.unit }}</el-descriptions-item>
        <el-descriptions-item label="数量">{{ detailData.number }}</el-descriptions-item>
        <el-descriptions-item label="启用折旧">{{ detailData.isDepr === 1 ? '是' : '否' }}</el-descriptions-item>
        <el-descriptions-item label="每年折旧金额">{{ detailData.annualDepreciationAmount }}</el-descriptions-item>
        <el-descriptions-item label="含税单价">{{ detailData.taxIncludingPriceUnit }}</el-descriptions-item>
        <el-descriptions-item label="含税总价">{{ detailData.taxIncludingPriceTotal }}</el-descriptions-item>
        <el-descriptions-item label="税率(%)">{{ detailData.taxRate }}</el-descriptions-item>
        <el-descriptions-item label="不含税总价">{{ detailData.unTaxIncludingPriceTotal }}</el-descriptions-item>
        <el-descriptions-item label="录入日期">{{ detailData.createTime }}</el-descriptions-item>
        <el-descriptions-item label="预计运行时间">{{ detailData.planRuntimeTime ? dayjs(detailData.planRuntimeTime).format('YYYY-MM-DD') : '' }}</el-descriptions-item>
        <el-descriptions-item label="设备图片" :span="2">
          <div v-if="detailData.storageBlobVOs && detailData.storageBlobVOs.length > 0" style="display: flex; gap: 10px; flex-wrap: wrap;">
            <el-image 
              v-for="(file, index) in detailData.storageBlobVOs" 
              :key="index" 
              :src="file.previewURL || file.url" 
              :preview-src-list="detailData.storageBlobVOs.map(u => u.previewURL || u.url)"
              :initial-index="index"
              style="width: 100px; height: 100px" 
              fit="cover" 
            />
          </div>
          <span v-else>无图片</span>
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { usePaginationApi } from "@/hooks/usePaginationApi";
// import { Search } from "@element-plus/icons-vue";
import { getLedgerPage, delLedger } from "@/api/equipmentManagement/ledger";
import { getLedgerPage, delLedger, getLedgerById } from "@/api/equipmentManagement/ledger";
import { onMounted, getCurrentInstance, ref, reactive } from "vue";
import Modal from "./Modal.vue";
import { ElMessageBox, ElMessage } from "element-plus";
@@ -135,6 +174,9 @@
const qrDialogVisible = ref(false);
const qrCodeUrl = ref("");
const qrRowData = ref(null);

const detailDialogVisible = ref(false);
const detailData = ref({});

// 导入相关
const uploadRef = ref(null)
@@ -218,8 +260,14 @@
            label: "操作",
            align: "center",
            fixed: 'right',
            width: 150,
            width: 180,
            operation: [
        {
          name: "详情",
          clickFun: (row) => {
            handleDetail(row);
          },
        },
                {
                    name: "编辑",
                    clickFun: (row) => {
@@ -227,7 +275,7 @@
                    },
                },
                {
                    name: "生成二维码",
                    name: "二维码",
                    clickFun: (row) => {
                        showQRCode(row)
                    },
@@ -248,6 +296,13 @@
const edit = (id) => {
  modalRef.value.loadForm(id);
};
const handleDetail = async (row) => {
  const { code, data } = await getLedgerById(row.id);
  if (code == 200) {
    detailData.value = data;
    detailDialogVisible.value = true;
  }
};
const changePage = ({ page, limit }) => {
  pagination.currentPage = page;
    pagination.pageSize = limit;