...

src/assets/style/main.scss

@@ -782,11 +782,11 @@ img {
 }
 
 .blue, a.blue {
-  color: #3caaff;
+  color: #3978F1;
 }
 
 .blue-bg {
-  background-color: #3caaff;
+  background-color: #3978F1;
 }
 
 .light-blue, a.light-blue {

src/components/base-button.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="type === '1' ? 'btn' : 'btn1'" :style='`width:${width}px`' class="flex flex-center mr-5 font-12 pointer">
-    <el-icon color="#E9A956">
+    <el-icon color="white" size="16px">
       <component :is="icon"></component>
     </el-icon>
     <div class="ml-5 nowrap"> {{ title }}</div>
@@ -29,7 +29,7 @@ export default {
     }
   },
   methods: {
-    click () {
+    click() {
       console.log(new Date().getTime())
       // this.$nextTick(this.$emit('click'))
     }

src/components/uploads.vue

@@ -1,22 +1,23 @@
 <template>
   <div>
-    <el-upload :accept="accept"
+    <el-upload ref='upload'
+               :accept="accept"
                :action="action"
-               :before-upload="beforeUpload"
                :data='data'
+               :auto-upload='false'
                :drag="drag"
-               :file-list="fileList"
+               :file-list="tmpFileList"
                :headers="headers"
                :limit="max"
                :list-type="listType"
                :multiple="max > 1"
-               :on-error="onError"
+               :on-change="handleChange"
                :on-exceed="maxChange"
                :on-progress="progress"
                :on-remove="remove"
                :on-success="success"
                :show-file-list="showList"
-               class='custom-upload flex flex-col'>
+               style='width: 100%;'>
       <div v-if="drag">
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件/图片拖到此处，或<em>点击上传</em></div>
@@ -32,6 +33,7 @@
 </template>
 
 <script>
+import {ref} from "vue";
 import {Base64} from 'js-base64'
 import {getToken} from '../utils/auth.js'
 import website from '@/config/website'
@@ -86,6 +88,7 @@ export default {
   },
   data() {
     return {
+      tmpFileList: [],
       fileList: [],
       headers: {
         'Authorization': `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`,
@@ -127,6 +130,9 @@ export default {
 
       this.$emit('progress')
     },
+    handleChange(file, fileList) {
+      this.tmpFileList = fileList
+    },
     maxChange() {
       if (this.max === 1) { // 只有一张图的时候超出进行覆盖
         this.fileList = []
@@ -139,24 +145,18 @@ export default {
       console.log(file)
       this.$emit('before', file)
     },
-    success(response, file, fileList) {
-      let ids = ''
-      if (fileList && fileList.length > 0) {
-        console.log(fileList)
-        ids = fileList.map(e => e.response.data.id)
-      }
-      this.loading = false
-      if (response.code === 200) {
-        this.$message.success('上传完成')
+    success() {
+      const finishList = this.tmpFileList.filter(sub => sub.status === 'success')
+      if (finishList.length === this.tmpFileList.length) {
         this.$emit('success', {
-          file: file,
-          fileList: fileList,
-          ids: ids
+          fileList: this.tmpFileList
         })
-      } else {
-        this.$message.error(response.msg)
+        setTimeout(() => {
+          this.$refs.upload.clearFiles()
+          this.tmpFileList = []
+          this.speed = ''
+        }, 2000)
       }
-
     },
     remove(file, fileList) {
       let ids = fileList.map(e => e.response.data[0].id)

src/views/home/component/dash.vue

@@ -6,21 +6,23 @@
           <WarningFilled/>
         </el-icon>
         <span class="ml-5">项目总投资额<span
-            class="main-color bold">{{ num ? Number.parseFloat(num).toLocaleString() :'-'}}</span>万元</span>
+            class="main-color bold">{{ num ? Number.parseFloat(num).toLocaleString() : '-' }}</span>万元</span>
       </div>
       <div class="flex ml-20 hide-scrollbar" style="overflow-x: scroll;width: 86vw" v-show='stage && stage.length > 0'>
-        <div v-for="(item,index) in stage" :key='item.id' :class="active === index ? 'total-s' : 'total'"
-             class="flex flex-col  flex-center mt-20 bold font-16 pointer" @click='switchTab(item,index)'
-             >
+        <div v-for="(item,index) in proType" :key='item.id' :class="active === index ? 'total-s' : 'total'"
+             class="flex flex-center flex-justify-between mt-20 bold font-16 pointer" @click='switchTab(item,index)'
+        >
           <span class=" sp">{{ item.name }}</span>
-          <span class=" sp1 mt-5">{{ item.count }}<span class="grey font-14 ml-5">个</span></span>
+          <span class=" sp1 ">{{ 33 }}<span class="grey font-13">个</span></span>
         </div>
       </div>
       <div class='flex flex-center flex-justify-start'>
         <base-button class="ml-20 mt-20" icon="Plus" title="新增"
                      @click="showAdd = true"/>
-<!--        <base-button class="ml-20 mt-20" icon="Edit" title="项目导入"-->
-<!--                     @click="showImport = true"/>-->
+        <base-button class="ml-20 mt-20" icon="el-icon-upload" title="数据导入"
+                     @click="showImport = true"/>
+        <base-button class="ml-20 mt-20" icon="el-icon-download" title="数据导出"
+                     @click="showImport = true"/>
       </div>
     </div>
     <avue-crud ref="crud"
@@ -41,7 +43,7 @@
       <!--        <el-button icon="Operation" text @click="track(row.id)">跟踪审计</el-button>-->
       <!--      </template>-->
     </avue-crud>
-<!--    新增-->
+    <!--    新增-->
     <el-dialog v-model="showAdd"
                append-to-body
                center
@@ -107,32 +109,58 @@
             </el-form-item>
             <div class="flex flex-center mt-10">
               <base-button class="mr-20" icon="Close" title="取消" type="0" @click="showAdd = false"/>
-              <base-button icon="Check" title="保存"  @click="projectSave"/>
+              <base-button icon="Check" title="保存" @click="projectSave"/>
             </div>
           </div>
         </el-form>
       </div>
     </el-dialog>
-<!--    导入-->
+    <!--    表格导入-->
     <el-dialog v-model='showImport'
                append-to-body
                center
-               title="项目导入"
+               title="数据表格导入"
                width="50%">
-      <div class='flex flex-justify-start flex-align-center'>
-        <span>模版下载:</span>
-        <el-button type='primary' plain class='ml-20'>模  版</el-button>
-      </div>
-
-      <div class='flex flex-justify-start flex-align-center mt-20'>
-        <upload-file type='primary' max='1'
-                     @close='showImport = false'
-                     accept='.xls,.xlsx'
-                     :data='{isCovered:0}'
-                     action='/api/blade-project-manage-v2/project/import-project'
-                     @success='success'>确 定</upload-file>
+      <div class='flex flex-center flex-col'>
+        <img src="../../../assets/img/import.png" style="width: 196px;height: 154px"/>
+        <div class="flex flex-center full-width flex-justify-start">
+          <span class="bold mr-20">文件上传</span>
+          <el-upload
+              v-model:file-list="fileList"
+              class="upload-demo"
+              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+              multiple
+              :on-preview="handlePreview"
+              :on-remove="handleRemove"
+              :before-remove="beforeRemove"
+              :limit="3"
+              :on-exceed="handleExceed"
+          >
+            <el-button type="primary">Click to upload</el-button>
+            <template #tip>
+              <div class="el-upload__tip">
+                jpg/png files with a size less than 500KB.
+              </div>
+            </template>
+          </el-upload>
+        </div>
+        <div class="flex flex-justify-start full-width">
+          <span class="font-12 mt-10"
+                style="color:#E24141">注意：文件格式需要为Excel表格，表格必须要有项目名称及责任单位名称两项内容，才能确保系统成功解析文件。</span>
+        </div>
       </div>
       <el-divider/>
+      <div class="hide-scrollbar full-width" style="height: 20vh;overflow-x: scroll">
+        <!--        <div v-if='attaches.length === 0' class='full-width flex flex-center '>-->
+        <!--          <el-empty image-size='100'/>-->
+        <!--        </div>-->
+        <div class="flex flex-justify-between flex-center">
+          <span class="blue font-12">文件名</span>
+          <el-icon color="#DCAE64" size="16px">
+            <CircleCloseFilled/>
+          </el-icon>
+        </div>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -140,18 +168,18 @@
 <script>
 import BaseButton from '../../../components/base-button.vue'
 import permissionStore from '@/store/permission.js'
-import { vaildData } from '@/utils/tools.js'
-import uploadFile from '@/components/upload-file.vue'
+import {vaildData} from '@/utils/tools.js'
 
 export default {
   name: 'dash',
-  components: { BaseButton, uploadFile },
-  setup () {
+  components: {BaseButton},
+  setup() {
     const permissions = permissionStore()
-    return { permissions }
+    return {permissions}
   },
-  data () {
+  data() {
     return {
+      attaches: [],
       disable: false,
       showAdd: false,
       showImport: false,
@@ -232,6 +260,28 @@ export default {
         total: 0
       },
       stage: [],
+      proType: [
+        {
+          name: '全部项目',
+          index: 0
+        },
+        {
+          name: '储备项目',
+          index: 1
+        },
+        {
+          name: '正式项目',
+          index: 2
+        },
+        {
+          name: '在建项目',
+          index: 3
+        },
+        {
+          name: '完工项目',
+          index: 4
+        }
+      ],
       typeList: [],
       tagsList: [],
       num: '',
@@ -244,7 +294,7 @@ export default {
       },
       rules: {
         name: [
-          { required: true, message: '请输入项目名称', trigger: 'blur' }
+          {required: true, message: '请输入项目名称', trigger: 'blur'}
         ],
         projectType: [
           {
@@ -263,27 +313,27 @@ export default {
       }
     }
   },
-  created () {
+  created() {
     this.getTypeList()
     this.$bus.on('serach', (res) => {
       this.onLoad(res)
     })
   },
   computed: {
-    permissionList () {
+    permissionList() {
       return {
         delBtn: vaildData(this.permissions.permissions.home_del, false)
       }
     }
   },
   methods: {
-    switchTab (item, index) {
+    switchTab(item, index) {
       this.active = index
-      this.onLoad({ stageName: item.name === '全部阶段' ? '' : item.name })
+      this.onLoad({stageName: item.name === '全部阶段' ? '' : item.name})
     },
-    onLoad (query = {}) {
+    onLoad(query = {}) {
       this.loading = true
-      const data = { ...query }
+      const data = {...query}
       this.$api.project.projectList(this.page.currentPage, this.page.pageSize, data).then(res => {
         this.loading = false
         if (res.code === 200) {
@@ -295,11 +345,11 @@ export default {
         this.getTotalAmount(data)
       })
     },
-    beforeOpen (done, type) {
+    beforeOpen(done, type) {
       if (['view'].includes(type)) {
         this.$router.push({
           path: '/home/details',
-          query: { id: this.form.id, type: '0', ownerId: this.form.createUser }
+          query: {id: this.form.id, type: '0', ownerId: this.form.createUser}
         })
       } else if (type === 'edit') {
         this.$alert('功能建设中，尽情期待...', '消息提醒', {
@@ -311,40 +361,40 @@ export default {
         // })
       }
     },
-    currentChange (currentPage) {
+    currentChange(currentPage) {
       this.page.current = currentPage
     },
-    sizeChange (pageSize) {
+    sizeChange(pageSize) {
       this.page.size = pageSize
     },
-    refreshChange () {
+    refreshChange() {
       this.onLoad()
     },
-    rowDel (row) {
+    rowDel(row) {
       this.$confirm('确定删除选择的项目?', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       })
-        .then(() => {
-          this.$api.project.projectRemove({ ids: row.id }).then(res => {
-            if (res.code === 200) {
-              this.$message.success(res.msg)
-              this.onLoad()
-            } else {
-              this.$message.error(res.msg)
-            }
+          .then(() => {
+            this.$api.project.projectRemove({ids: row.id}).then(res => {
+              if (res.code === 200) {
+                this.$message.success(res.msg)
+                this.onLoad()
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
           })
-        })
     },
-    getStageList () {
+    getStageList() {
       this.$api.project.userStageList().then(res => {
         if (res.code === 200) {
           this.stage = res.data
         }
       })
     },
-    getTotalAmount (data) {
+    getTotalAmount(data) {
       this.$api.project.totalAmount(Object.assign(data, this.query)).then(res => {
         if (res.code === 200) {
           this.num = res.data
@@ -353,17 +403,17 @@ export default {
         }
       })
     },
-    getTypeList () {
-      this.$api.project.typeList({ type: 1, size: 999, current: 1 }).then(res => {
+    getTypeList() {
+      this.$api.project.typeList({type: 1, size: 999, current: 1}).then(res => {
         this.typeList = res.data.records
       })
-      this.$api.common.dicList({ code: 'project-tags' }).then(res => {
+      this.$api.common.dicList({code: 'project-tags'}).then(res => {
         if (res.code === 200) {
           this.tagsList = res.data
         }
       })
     },
-    projectSave () {
+    projectSave() {
       if (this.disable) {
         this.$message.error('正在处理，请稍后...')
         return
@@ -387,10 +437,8 @@ export default {
         }
       })
     },
-    success (res) {
-      this.showImport = false
-      this.$message.success('上传成功')
-      this.onLoad()
+    upload(res) {
+      console.log(res)
     }
   }
 }
@@ -407,8 +455,8 @@ export default {
 }
 
 .total-s {
-  width: 220px;
-  height: 70px;
+  width: 200px;
+  height: 50px;
   border: 1px solid #825618;
   border-radius: 10px;
   margin-right: 20px;
@@ -417,16 +465,18 @@ export default {
   .sp {
     color: #ECAB56;
     white-space: nowrap;
+    margin-left: 20px;
   }
 
   .sp1 {
     color: #ECAB56;
+    margin-right: 20px;
   }
 }
 
 .total {
-  width: 220px;
-  height: 70px;
+  width: 200px;
+  height: 50px;
   border-radius: 10px;
   margin-right: 20px;
   background-color: #F0F2F7;
@@ -434,11 +484,12 @@ export default {
   .sp {
     color: #707070;
     white-space: nowrap;
-    margin-right: 20px;
+    margin-left: 20px;
   }
 
   .sp1 {
     color: #825618;
+    margin-right: 20px;
   }
 }