|
|
@@ -0,0 +1,183 @@
|
|
|
+<template>
|
|
|
+ <hc-new-dialog ui="hc-order-import-upload-file-box" widths="1200px" :show="isShow" title="材料计量单导入" @close="modalClose">
|
|
|
+ <div class="hc-upload-box">
|
|
|
+ <el-upload
|
|
|
+ ref="uploadRef" :headers="getHeader()" drag :data="formData" accept=".xls,.xlsx"
|
|
|
+ :limit="1" :auto-upload="false" action="/api/blade-meter/materialMeterForm/importExcel"
|
|
|
+ :on-exceed="handleExceed" :on-success="handleSuccess" :on-error="handleError"
|
|
|
+ >
|
|
|
+ <div class="text-80px text-gray">
|
|
|
+ <i class="ri-upload-cloud-line" />
|
|
|
+ </div>
|
|
|
+ <div class="mt-24px text-black">将文件拖动到此处，或点击上传</div>
|
|
|
+ <div class="mt-8px text-12px">支持的文件格式：Excel(xls、xlsx)</div>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ <hc-card-item class="hc-upload-card-item">
|
|
|
+ <template #header>
|
|
|
+ <span class="mr-10px">选择材料</span>
|
|
|
+ <span class="text-12px" style="color: #FF7D43">温馨提示：可多选材料进行批量上传附件</span>
|
|
|
+ </template>
|
|
|
+ <hc-table
|
|
|
+ ref="tableRef" :column="tableColumn" :datas="tableData" :is-current-row="false"
|
|
|
+ is-check :check-style="{ width: 29 }" :index-style="{ width: 60 }"
|
|
|
+ @selection-change="tableCheckChange"
|
|
|
+ />
|
|
|
+ </hc-card-item>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="modalClose">取消</el-button>
|
|
|
+ <el-button type="primary" :loading="confirmLoading">确认并继续</el-button>
|
|
|
+ <el-button type="primary" :loading="confirmLoading" @click="confirmClick">确认并退出</el-button>
|
|
|
+ </template>
|
|
|
+ </hc-new-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, watch } from 'vue'
|
|
|
+import { useAppStore } from '~src/store'
|
|
|
+import { getHeader } from 'hc-vue3-ui'
|
|
|
+import { genFileId } from 'element-plus'
|
|
|
+import { getArrValue, isNullES, newWindow } from 'js-fast-way'
|
|
|
+import mainApi from '~api/debit-pay/material/order'
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ ids: {
|
|
|
+ type: [String, Number],
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ data: {
|
|
|
+ type: Array,
|
|
|
+ default: () => ([]),
|
|
|
+ },
|
|
|
+})
|
|
|
+
|
|
|
+//事件
|
|
|
+const emit = defineEmits(['finish', 'close'])
|
|
|
+const store = useAppStore()
|
|
|
+
|
|
|
+//监听数据
|
|
|
+const contractId = ref(store.getContractId)
|
|
|
+const projectId = ref(store.getProjectId)
|
|
|
+watch(() => [store.getContractId, store.getProjectId], ([cid, pid]) => {
|
|
|
+ contractId.value = cid
|
|
|
+ projectId.value = pid
|
|
|
+}, { immediate: true, deep: true })
|
|
|
+
|
|
|
+//监听
|
|
|
+const ids = ref(props.ids)
|
|
|
+watch(() => props.ids, (id) => {
|
|
|
+ ids.value = id
|
|
|
+}, { immediate: true, deep: true })
|
|
|
+
|
|
|
+//监听数据
|
|
|
+const tableData = ref([])
|
|
|
+watch(() => props.data, (data) => {
|
|
|
+ tableData.value = getArrValue(data)
|
|
|
+}, { deep: true, immediate: true })
|
|
|
+
|
|
|
+//双向绑定
|
|
|
+// eslint-disable-next-line no-undef
|
|
|
+const isShow = defineModel('modelValue', {
|
|
|
+ default: false,
|
|
|
+})
|
|
|
+
|
|
|
+//上传文件
|
|
|
+const uploadRef = ref(null)
|
|
|
+
|
|
|
+//附加数据
|
|
|
+const formData = ref({})
|
|
|
+
|
|
|
+const handleExceed = (files) => {
|
|
|
+ uploadRef.value?.clearFiles()
|
|
|
+ const file = files[0]
|
|
|
+ file.uid = genFileId()
|
|
|
+ uploadRef.value?.handleStart(file)
|
|
|
+}
|
|
|
+
|
|
|
+//确认导入
|
|
|
+const confirmLoading = ref(false)
|
|
|
+const confirmClick = async () => {
|
|
|
+ formData.value = {
|
|
|
+ meterPeriodId: ids.value,
|
|
|
+ projectId: projectId.value,
|
|
|
+ contractId: contractId.value,
|
|
|
+ }
|
|
|
+ confirmLoading.value = true
|
|
|
+ uploadRef.value?.submit()
|
|
|
+}
|
|
|
+
|
|
|
+//上传成功
|
|
|
+const handleSuccess = (res) => {
|
|
|
+ confirmLoading.value = false
|
|
|
+ if (res.code === 200) {
|
|
|
+ window.$message.success('上传成功')
|
|
|
+ modalClose()
|
|
|
+ emit('finish')
|
|
|
+ } else {
|
|
|
+ window.$message.error(res.msg || '上传失败')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//上传失败
|
|
|
+const handleError = (error) => {
|
|
|
+ confirmLoading.value = false
|
|
|
+ const { msg } = !isNullES(error.message) ? JSON.parse(error.message) : {}
|
|
|
+ if (isNullES(msg)) {
|
|
|
+ window.$message.error('上传失败')
|
|
|
+ } else {
|
|
|
+ window.$message.error(msg)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//下载模板
|
|
|
+const downloadTemp = async () => {
|
|
|
+ const { data } = await mainApi.getImportTemplate()
|
|
|
+ if (isNullES(data)) {
|
|
|
+ window.$message.warning('暂无相关模板')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ newWindow(data)
|
|
|
+}
|
|
|
+
|
|
|
+//选择材料
|
|
|
+const tableRef = ref(null)
|
|
|
+const tableColumn = [
|
|
|
+ { key: 'contractMaterialName', name: '合同材料' },
|
|
|
+ { key: 'materialArriveNumber', name: '材料到场编号' },
|
|
|
+ { key: 'businessDate', name: '业务日期' },
|
|
|
+ { key: 'meterMoney', name: '计量金额' },
|
|
|
+]
|
|
|
+
|
|
|
+//表格选择
|
|
|
+const tableKeys = ref([])
|
|
|
+const tableCheckChange = (rows) => {
|
|
|
+ tableKeys.value = rows
|
|
|
+}
|
|
|
+
|
|
|
+//关闭弹窗
|
|
|
+const modalClose = () => {
|
|
|
+ isShow.value = false
|
|
|
+ emit('close')
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.hc-upload-box :deep(.el-upload) {
|
|
|
+ --el-upload-dragger-padding-horizontal: 20px;
|
|
|
+}
|
|
|
+.hc-upload-text-tip {
|
|
|
+ color: #FF7D43;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.el-overlay-dialog .el-dialog.hc-new-dialog.hc-order-import-upload-file-box .el-dialog__body {
|
|
|
+ padding: 14px 4px;
|
|
|
+}
|
|
|
+.hc-card-item-box.hc-upload-card-item {
|
|
|
+ padding: 10px;
|
|
|
+ .hc-card-item-header {
|
|
|
+ color: unset;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
