Pārlūkot izejas kodu

发货管理-送达;图片预览

landydb 5 dienas atpakaļ
vecāks
revīzija
582528638c

+ 2 - 0
package.json

@@ -40,7 +40,9 @@
     "qs": "^6.10.5",
     "svg-pathdata": "5.0.5",
     "svg-sprite-loader": "3.7.3",
+    "v-viewer": "^1.7.4",
     "view-design": "^4.5.0-beta.3",
+    "viewerjs": "^1.11.7",
     "vue": "2.5.16",
     "vue-click-outside": "^1.1.0",
     "vue-contextmenujs": "^1.3.13",

+ 1 - 1
src/assets/scss/_base.scss

@@ -377,4 +377,4 @@ img {
   .el-table__indent {
     padding-left: 48px !important;
   }
-}
+}

+ 14 - 0
src/main.js

@@ -21,6 +21,8 @@ import Contextmenu from 'vue-contextmenujs'
 // import 'element-ui/lib/theme-chalk/index.css'
 import preventReClick from '@/utils/preventReClick'
 import loadmore from '@/utils/loadMore'
+import Viewer from 'v-viewer';
+import 'viewerjs/dist/viewer.css'; // 引入样式
 
 Vue.use(VueCookie)
 Vue.use(SuperFlow)
@@ -32,6 +34,18 @@ Vue.use(preventReClick) // 防止重复提交
 Vue.use(loadmore) // 防止重复提交
 Vue.config.productionTip = false
 
+// 注册插件并设置默认配置
+Vue.use(Viewer, {
+  defaultOptions: {
+    zIndex: 9999,       // 解决弹窗层级问题
+    movable: true,      // 允许拖拽
+    zoomable: true,     // 允许缩放
+    rotatable: true,    // 允许旋转
+    fullscreen: true,   // 支持全屏
+    keyboard: true,     // 启用键盘操作
+  }
+});
+
 // 非生产环境, 适配mockjs模拟数据                 // api: https://github.com/nuysoft/Mock
 if (process.env.NODE_ENV !== 'production') {
   require('@/mock')

+ 11 - 2
src/views/modules/common/preview-component.vue

@@ -2,7 +2,9 @@
     <section>
       <!-- 图片预览 -->
       <el-dialog title="图片预览" :append-to-body="true" :visible.sync="previewVisible" width="50%">
-        <img :src="previewPath" :alt="previewName" style="width:100%;height:100%" />
+        <div v-viewer>
+          <img :src="previewPath" :alt="previewName" style="width:100%;height:100%" />
+        </div>
       </el-dialog>
     </section>
 </template>
@@ -10,8 +12,10 @@
 <script>
   import { downloadUrl } from '@/api/file'
   import { getFileExt } from '@/api/util'
+  import { component as Viewer } from 'v-viewer';
 export default {
     name: 'preview-component',
+    components: { Viewer },
     data () {
       return {
         previewPath: '',
@@ -33,7 +37,12 @@ export default {
         if (ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif') {
           this.previewPath = downloadUrl + url
           this.previewName = fileName
-          this.previewVisible = true
+          this.previewVisible = false
+
+          this.$viewerApi({
+            images: [this.previewPath],
+            options: { toolbar: false } // 隐藏工具栏
+          });
         } else {
           // 弹出新页面显示下载文件
           window.open(downloadUrl + url, '_blank')

+ 134 - 46
src/views/modules/order/dispatch-arrived.vue

@@ -1,33 +1,105 @@
 <template>
   <div>
-    <el-dialog
-      title="任务单送达"
-      width="50%"
-      :close-on-click-modal="false"
-      :visible.sync="visible">
+      <div class="my-title">送达</div>
       <!-- 表单 -->
       <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="auto">
-        <el-row class="my-row">
-          <el-col>
-            <el-form-item label="送达数量" prop="cnt">
-              <el-input-number v-model="dataForm.cnt" :min="0" :max="Number(max)"></el-input-number>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row class="my-row">
-          <upload-component :display="false" :title="'签收附件'" :accept="'*'" :file-obj-list="fileList" @uploadSuccess="uploadSuccess"/>
-        </el-row>
+        <el-table :data="dataForm.list" border>
+          <el-table-column
+            label="序号"
+            type="index"
+            width="50"
+            align="center">
+          </el-table-column>
+          <el-table-column
+            prop="productName"
+            header-align="center"
+            align="center"
+            min-width="140"
+            :show-tooltip-when-overflow="true"
+            label="名称">
+          </el-table-column>
+          <el-table-column
+            prop="productSpec"
+            header-align="center"
+            align="center"
+            min-width="140"
+            :show-tooltip-when-overflow="true"
+            label="型号/规格">
+          </el-table-column>
+          <el-table-column
+            prop="productNumber"
+            header-align="center"
+            align="center"
+            min-width="140"
+            :show-tooltip-when-overflow="true"
+            label="编号">
+          </el-table-column>
+          <el-table-column
+            prop="batchNumber"
+            header-align="center"
+            align="center"
+            min-width="140"
+            :show-tooltip-when-overflow="true"
+            label="批次号">
+          </el-table-column>
+          <el-table-column
+            prop="deliverCnt"
+            header-align="center"
+            align="center"
+            min-width="140"
+            :show-tooltip-when-overflow="true"
+            label="数量">
+          </el-table-column>
+          <el-table-column
+            prop="price"
+            header-align="center"
+            align="center"
+            min-width="140"
+            :show-tooltip-when-overflow="true"
+            label="单价">
+          </el-table-column>
+          <el-table-column
+            prop="amount"
+            header-align="center"
+            align="center"
+            min-width="140"
+            :show-tooltip-when-overflow="true"
+            label="总价">
+          </el-table-column>
+          <el-table-column
+            prop="notes"
+            header-align="center"
+            align="center"
+            min-width="140"
+            :show-tooltip-when-overflow="true"
+            label="备注">
+          </el-table-column>
+          <el-table-column
+            fixed="right"
+            prop="arriveCnt"
+            header-align="center"
+            align="center"
+            min-width="140"
+            :show-tooltip-when-overflow="true"
+            label="送达数量">
+            <template slot-scope="scope">
+              <el-input-number v-model="scope.row.arriveCnt" size="mini"></el-input-number>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-form-item label="签收附件" prop="attachList">
+            <upload-component :accept="'*'" v-model="dataForm.attachList" />
+          </el-form-item>
       </el-form>
-      <span slot="footer">
-          <el-button @click="onChose">取消</el-button>
-          <el-button type="primary" @click="dataFormSubmit()" v-reClick>确定</el-button>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="onChose">取消</el-button>
+        <el-button type="primary" @click="dataFormSubmit()" v-reClick>确定</el-button>
       </span>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-  import UploadComponent from '../common/upload-component'
+  import UploadComponent from '../common/upload-component-v2'
 
 export default {
     name: 'dispatch-arrived',
@@ -35,11 +107,15 @@ export default {
     data () {
       return {
         visible: false,
+        id: 0,
         fileList: [],
-        dataForm: {},
+        dataForm: {
+          list:[],
+          attachList:[]
+        },
         max: 0,
         dataRule: {
-          cnt: [{ required: true, message: '请输入送达数量', trigger: 'change' }]
+          attachList: [{ required: true, message: '请上传签收附件', trigger: 'blur' }]
         }
       }
     },
@@ -48,14 +124,22 @@ export default {
         this.visible = false
         this.$emit('onChose')
       },
-      async init (deliverId, max) {
-        if (!deliverId) return
-        this.max = max
-        this.fileList = []
-        this.dataForm = {
-          deliverId: deliverId
-        }
-        this.visible = true
+      async init (id) {
+        this.id = id
+        this.getDetails()
+      },
+      getDetails () {
+        this.$http({
+            url: this.$http.adornUrl(`/biz-service/deliver/info/${this.id}`),
+            method: 'get',
+          }).then(({data}) => {
+            if (data && data.code === '200') {
+                this.dataForm.list = data.data
+                this.dataForm.list.map(t => t.arriveCnt = t.deliverCnt)
+            } else {
+                this.$message.error(data.msg)
+            }
+          })
       },
       uploadSuccess (fileList) {
         this.fileList = fileList
@@ -67,24 +151,26 @@ export default {
       dataFormSubmit () {
         this.$refs['dataForm'].validate((valid) => {
           if (valid) {
-            // 附件检查
-            let fList = this.fileList
-            if (fList.length > 0) {
-              this.dataForm.attachList = []
-              for (let i = 0; i < fList.length; i++) {
-                this.dataForm.attachList.push({
-                  fileName: fList[i].name,
-                  url: fList[i].url
-                })
-              }
-            } else {
-              this.$message.error('请上传文件')
-              return
+            let submitData = this.dataForm.list.map(t => ({
+              arriveCnt: t.arriveCnt,
+              deliverId: t.deliverId,
+              contractId: t.contractId
+            }))
+            let attachList = []
+
+            for (let i = 0; i < this.dataForm.attachList.length; i++) {
+              attachList.push({
+                fileName: this.dataForm.attachList[i].name,
+                url: this.dataForm.attachList[i].url
+              })
             }
+
+            submitData.map(t => t.attachList = attachList)
+   
             this.$http({
               url: this.$http.adornUrl(`/biz-service/deliver/arrive`),
               method: 'post',
-              data: this.$http.adornData({...this.dataForm})
+              data: this.$http.adornData(submitData)
             }).then(({data}) => {
               if (data && data.code === '200') {
                 this.$message({
@@ -107,6 +193,8 @@ export default {
   }
 </script>
 
-<style scoped>
-
+<style scoped lang="scss">
+/deep/ .el-input-number--mini {
+    width:100px;
+}
 </style>

+ 1 - 1
src/views/modules/order/dispatch-detail.vue

@@ -48,7 +48,7 @@
           label="批次号">
         </el-table-column>
         <el-table-column
-          prop="arriveCnt"
+          prop="deliverCnt"
           header-align="center"
           align="center"
           min-width="140"

+ 5 - 5
src/views/modules/order/dispatch.vue

@@ -137,9 +137,9 @@
           label="操作">
           <template slot-scope="scope">
             <el-button v-if="isAuth('order:deliver:info')" type="text" size="small" @click="detailHandle(scope.row)">查看</el-button>
-            <el-button v-if="isAuth('order:deliver:send') && Number(scope.row.state) === 1" type="text" size="small" @click="sendHandle(scope.row.deliverId, scope.row.cnt)">导出</el-button>
-            <el-button v-if="isAuth('order:deliver:arrive') && Number(scope.row.state) === 1" type="text" size="small" @click="arriveHandle(scope.row.deliverId, scope.row.cnt)">送达</el-button>
-            <el-button v-if="isAuth('order:deliver:delete') && Number(scope.row.state) === 1" type="text" size="small" @click="arriveHandle(scope.row.deliverId, scope.row.cnt)">删除</el-button>
+            <el-button v-if="isAuth('order:deliver:send') && Number(scope.row.state) === 1" type="text" size="small" @click="sendHandle(scope.row.deliverId)">导出</el-button>
+            <el-button v-if="isAuth('order:deliver:arrive') && Number(scope.row.state) === 1" type="text" size="small" @click="arriveHandle(scope.row.deliverId)">送达</el-button>
+            <el-button v-if="isAuth('order:deliver:delete') && Number(scope.row.state) === 1" type="text" size="small" @click="arriveHandle(scope.row.deliverId)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -298,10 +298,10 @@ export default {
       })
     },
     // 送达
-    arriveHandle (deliverId, cnt) {
+    arriveHandle (deliverId) {
       this.arrivedVisible = true
       this.$nextTick(() => {
-        this.$refs.arrivedPage.init(deliverId, cnt)
+        this.$refs.arrivedPage.init(deliverId)
       })
     },
     // 发货