11

src/api/modules/debit-pay/material/order.js

@@ -36,9 +36,17 @@ export default {
     //删除
     async remove(form) {
         return HcApi({
-            url: '/api//blade-meter/materialMeterForm/remove',
+            url: '/api/blade-meter/materialMeterForm/remove',
             method: 'post',
             params: form,
         }, false)
     },
+    //获取材料计量单导入模板
+    async getImportTemplate(form) {
+        return HcApi({
+            url: '/api/blade-meter/materialMeterForm/getImportTemplate',
+            method: 'get',
+            params: form,
+        }, false)
+    },
 }

src/config/index.json

@@ -1,8 +1,8 @@
 {
     "version": "20230607160059",
     "target1": "http://127.0.0.1:8090",
-    "target2": "http://192.168.0.125:8090",
-    "target": "http://39.108.216.210:8090",
+    "target": "http://192.168.0.125:8090",
+    "target3": "http://39.108.216.210:8090",
     "target4": "http://192.168.0.109:8090",
     "target5": "http://192.168.0.102:8090",
     "smsPhone": "",

src/views/debit-pay/material/components/order/importFile.vue

@@ -0,0 +1,189 @@
+<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>范例模板</span>
+            </template>
+            <template #extra>
+                <el-link type="primary" @click="downloadTemp">下载范例模板.xls</el-link>
+            </template>
+            <hc-table :column="tableColumn" :datas="tableData" :is-current-row="false" :is-index="false" />
+        </hc-card-item>
+        <div class="hc-upload-text-tip mt-20px">
+            <div>温馨提示：</div>
+            <div class="mt-5px pl-14px">1.请提前联系管理员设置材料预付款比例；</div>
+            <div class="mt-5px pl-14px">2.计量金额和合同规定预付款金额，导入后将自动计算；</div>
+            <div class="mt-5px pl-14px">3.单价和数量无小数位数限制；</div>
+            <div class="mt-5px pl-14px">4.若“材料编号”中填写001，但回显1时，请将单元格类型调整为：文本。</div>
+        </div>
+        <template #footer>
+            <el-button @click="modalClose">取消</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 { isNullES, newWindow } from 'js-fast-way'
+import mainApi from '~api/debit-pay/material/order'
+
+const props = defineProps({
+    ids: {
+        type: [String, Number],
+        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 })
+
+//双向绑定
+// 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 tableColumn = [
+    { key: 'key1', name: '材料编号' },
+    { key: 'key2', name: '材料到场编号' },
+    { key: 'key3', name: '合同材料' },
+    { key: 'key4', name: '单价' },
+    { key: 'key5', name: '数量' },
+    { key: 'key6', name: '业务日期' },
+    { key: 'key7', name: '材料来源' },
+    { key: 'key8', name: '材料是否符合要求' },
+    { key: 'key9', name: '进料发票（单据）号' },
+    { key: 'key10', name: '质保书编号' },
+    { key: 'key11', name: '存储方法是否符合要求' },
+    { key: 'key12', name: '抽检报告编号' },
+    { key: 'key13', name: '备注' },
+]
+const tableData = [
+    {
+        key1:'01', key2:'001', key3: '水泥', key4:'2.33', key5:'1.22', key6:'2024年1月1日', key7:'xx供应商',
+        key8:'是', key9:'BG01', key10:'GEP001', key11:'是', key12: 'BG-2004-XX', key13: 'XX',
+    },
+    {
+        key1:'02', key2:'002', key3: '钢筋', key4:'3.44', key5:'2.33', key6:'2024年2月1日', key7:'xx供应商',
+        key8:'是', key9:'BG02', key10:'GEP002', key11:'是', key12: 'BG-2004-XX', key13: 'XX',
+    },
+]
+
+//关闭弹窗
+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>

src/views/debit-pay/material/order.vue

@@ -14,7 +14,7 @@
         </template>
         <template #extra>
             <el-button hc-btn type="primary" @click="importClick">
-                <hc-icon name="add" />
+                <hc-icon name="upload-cloud" />
                 <span>导入</span>
             </el-button>
             <el-button hc-btn type="primary" :disabled="approveStatus !== 0" @click="addModalClick">
@@ -119,6 +119,9 @@
 
         <!-- 任务流程 -->
         <HcTaskModal v-model="isTaskModal" :ids="taskDataId" @close="taskDataId = ''" />
+
+        <!-- 导入 -->
+        <HcImportFile v-model="isImportShow" :ids="searchForm.meterPeriodId" @finish="getTableData" />
     </hc-new-card>
 </template>
 
@@ -131,6 +134,7 @@ import { HcDelMsg } from 'hc-vue3-ui'
 import { getArrValue, getObjValue, isNullES } from 'js-fast-way'
 import HcDataModal from './components/order/dataModal.vue'
 import HcTaskModal from '~src/components/task-modal/task-modal.vue'
+import HcImportFile from './components/order/importFile.vue'
 import mainApi from '~api/debit-pay/material/order.js'
 import periodApi from '~api/debit-pay/material/periods.js'
 
@@ -194,8 +198,7 @@ const tableColumn = ref([
     { key: 'approveStatusName', name: '审核状态' },
     { key: 'action', name: '操作', width: 94 },
 ])
-const tableData = ref([
-])
+const tableData = ref([])
 const getTableData = async () => {
     tableLoading.value = true
     console.log(searchForm.value, 'searchForm.value')
@@ -340,7 +343,7 @@ const undoReportClick = async () => {
 //导入
 const isImportShow = ref(false)
 const importClick = () => {
-
+    isImportShow.value = true
 }
 </script>