Merge branch 'master' of http://git.caimei365.com/caimei365/caimei-mall-admin-ui

src/api/order.js

@@ -125,3 +125,34 @@ export function deliverDetails(id) {
     method: 'get'
   })
 }
+/**
+ * 订单备注列表
+ * @param {number} orderId
+ */
+export function orderNotes(orderId) {
+  return request({
+    url: `/order/cmOrderRemark/remarksView/${orderId}`,
+    method: 'get'
+  })
+}
+/**
+ * 文件下载
+ */
+export function fileDownload(params) {
+  return request({
+    url: '/order/cmOrderRemark/download/remark',
+    method: 'get',
+    params,
+    responseType: 'blob'
+  })
+}
+/**
+ * 新增订单备注
+ */
+export function orderAddNote(data) {
+  return request({
+    url: '/order/cmOrderRemark/add/remark',
+    method: 'post',
+    data
+  })
+}

src/store/modules/settings.js

@@ -1,7 +1,12 @@
 import variables from '@/styles/element-variables.scss'
 import defaultSettings from '@/settings'
 
-const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const {
+  showSettings,
+  tagsView,
+  fixedHeader,
+  sidebarLogo
+} = defaultSettings
 
 const state = {
   theme: variables.theme,
@@ -12,7 +17,11 @@ const state = {
 }
 
 const mutations = {
-  CHANGE_SETTING: (state, { key, value }) => {
+  CHANGE_SETTING: (state, {
+    key,
+    value
+  }) => {
+    // eslint-disable-next-line no-prototype-builtins
     if (state.hasOwnProperty(key)) {
       state[key] = value
     }
@@ -20,7 +29,9 @@ const mutations = {
 }
 
 const actions = {
-  changeSetting({ commit }, data) {
+  changeSetting({
+    commit
+  }, data) {
     commit('CHANGE_SETTING', data)
   }
 }
@@ -31,4 +42,3 @@ export default {
   mutations,
   actions
 }
-

src/views/order/add-remarks .vue

@@ -1,73 +1,58 @@
 <template>
   <div class="app-container">
-    <el-card class="box-card" style="margin: 0 auto;">
-      <div class="refund-item" />
-    </el-card>
     <el-card class="box-card" style="margin: 10px auto;">
       <div class="refund-item">
         <el-form ref="logisticFrom" :model="params" :rules="rules" label-width="120px">
-          <el-row v-for="(logistic,index) in params.transportations" :key="index" :gutter="24" class="box-row">
-            <el-col :span="8">
-              <el-form-item label="快递公司：" :prop="`transportations.${index}.logisticsCompanyName`" :rules="rules.logisticsCompanyName">
-                <el-select v-model="logistic.logisticsCompanyName" style="width:250px;" clearable size="mini" @change="hanldeCompny($event,index)">
-                  <el-option value="" label="请选择物流公司" />
-                  <el-option v-for="item in kuaiduLisrt" :key="item.id" :label="item.label" :value="item" />
-                </el-select>
-                <el-button v-if="index === 0" type="primary" icon="el-icon-plus" size="mini" style="margin-left: 10px;" @click="hanldeAddlogis(logistic,index)" />
-                <el-button v-if="(index+1) > 1" type="danger" icon="el-icon-minus" size="mini" style="margin-left: 10px;" @click="handeleDelete(index)" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <div v-for="(sticsNu,numIndex) in logistic.logisticsNu" :key="numIndex">
-                <el-form-item label="物流编号：" :prop="`transportations.${index}.logisticsNu.${numIndex}.num`" :rules="rules.num">
-                  <el-input :key="numIndex" v-model="sticsNu.num" placeholder="请输入物流单号" style="width: 250px" size="mini" />
-                  <el-button v-if="numIndex === 0" type="primary" icon="el-icon-plus" size="mini" style="margin-left: 10px;" @click="hanldeAddNumber(logistic,numIndex)" />
-                  <el-button v-if="(numIndex+1) > 1" type="danger" icon="el-icon-minus" size="mini" style="margin-left: 10px;" @click="handeleDeleteNumber(logistic,numIndex)" />
-                </el-form-item>
-              </div>
-            </el-col>
-          </el-row>
           <el-row :gutter="24" class="box-row">
-            <el-form-item label="图片备注:" prop="logImage">
-              <div class="form-el-upload" style="width: 148px;height: 148px;">
+            <el-form-item label="备注：" prop="remarks">
+              <el-input v-model.trim="params.remarks" type="textarea" show-word-limit placeholder="请输入备注文字，200字以内" maxlength="200" :autosize="{ minRows: 5, maxRows: 6}" style="width: 600px;" />
+            </el-form-item>
+            <el-form-item label="图片：" prop="logImage">
+              <div class="form-el-upload">
                 <el-upload
-                  class="avatar-uploader"
+                  :class="{hide: hideImg}"
                   :action="actionUrl"
                   :headers="getToken"
                   list-type="picture-card"
+                  :before-upload="beforeUploadImg"
                   :on-remove="handleRemove"
                   :on-success="handleSuccess"
+                  :limit="5"
                 >
+                  <div slot="tip" class="el-upload__tip">请上传jgp，jpeg，png格式的图片，每张不超过5M</div>
                   <i class="el-icon-plus" />
                 </el-upload>
-                <p style="margin: 0;line-height: 20px;font-size: 14px;color: red;">注意：请上传jpg / png格式的图片，最大不超过5M，最多可上传10张</p>
               </div>
             </el-form-item>
-            <el-form-item label="备注：" prop="name">
-              <el-input v-model="params.remark" type="textarea" show-word-limit placeholder="请输入备注文字，200字以内" maxlength="200" :autosize="{ minRows: 5, maxRows: 6}" style="width: 600px;" />
+            <el-form-item label="文件：" class="fileUpload" style="margin-bottom: 0;">
+              <el-upload
+                :action="fileUrl"
+                :headers="getToken"
+                :before-upload="beforeUploadFile"
+                :on-remove="handlerFileRemove"
+                :on-success="handleFileSuccess"
+                :limit="5"
+              >
+                <div slot="tip" class="el-upload__tip">请上传pdf，doc，xlsx格式的文件，每个不超过5M</div>
+                <el-button v-if="!hideFile" size="small" type="primary">浏览</el-button>
+              </el-upload>
+            </el-form-item>
+            <el-form-item>
+              <div class="filter-container" style="text-align: left;margin-top: 20px;">
+                <el-button type="primary" @click="HandlerConfirm('logisticFrom')">保存</el-button>
+                <el-button plain @click="backToList">返回</el-button>
+              </div>
             </el-form-item>
           </el-row>
         </el-form>
       </div>
     </el-card>
-    <div class="filter-container" style="text-align: right;margin-top: 20px;">
-      <el-button plain @click="backToList">取消</el-button>
-      <el-button type="primary" :disabled="disabled" @click="hanldeConfirm('logisticFrom')">确认发货</el-button>
-    </div>
   </div>
 </template>
 
 <script>
-import { confirmDeliver, deliverShipCompany } from '@/api/order'
-const defaultForm = () => {
-  return {
-    logisticsCompanyCode: '',
-    logisticsCompanyName: '',
-    logisticsNu: [
-      { num: '' }
-    ]
-  }
-}
+import { orderAddNote } from '@/api/order'
+import { mapState } from 'vuex'
 export default {
   name: 'AddRemarks',
   filters: {
@@ -76,27 +61,22 @@ export default {
     return {
       params: {
         images: [], // 发货图片备注
-        orderProducts: [],
-        remark: '',
-        transportations: [
-          {
-            logisticsCompanyCode: '',
-            logisticsCompanyName: '',
-            logisticsNu: [
-              { num: '' }
-            ]
-          }
-        ]
+        remarks: '',
+        ossFiles: [],
+        orderId: ''
       },
-      islogisticsCompany: false,
-      islogisticsNumber: false,
-      productList: [],
-      kuaiduLisrt: [],
       fileImageList: [], // 上传图片列表
+      fileUrl: process.env.VUE_APP_BASE_API + '/order/cmOrderRemark/upload/remark',
+      fileList: [], // 上传文件列表
       rules: {
-        logisticsCompanyName: [{ required: true, message: '请选择物流公司', trigger: 'blur' }],
-        num: [{ required: true, message: '请输入物流单号', trigger: 'blur' }]
-      }
+        remarks: [{
+          required: true,
+          message: '请输入备注信息',
+          trigger: 'blur'
+        }]
+      },
+      hideImg: false, // 上传图片隐藏
+      hideFile: false // 上传文件隐藏
     }
   },
   computed: {
@@ -111,121 +91,95 @@ export default {
     orderId: function() {
       return this.$route.query.orderId * 1
     },
-    disabled() {
-      return this.params.transportations[0] === ''
-    }
-  },
-  created() {
-    if (this.$route.query.products) {
-      this.params.orderProducts = JSON.parse(this.$route.query.products)
-    }
-    this.deliverShipCompany()
-    console.log('productList', this.params.orderProducts)
+    ...mapState({ adminName: state => state.user.name })
   },
+  created() {},
   methods: {
-    // 付款单详情
-    async deliverShipCompany() {
-      try {
-        const res = await deliverShipCompany()
-        console.log('res', res)
-        this.kuaiduLisrt = res.data
-      } catch (error) {
-        console.log('error', error)
-      }
+    isImage(file) {
+      return file.type === 'image/png' ||
+      file.type === 'image/jpeg' ||
+       file.type === 'image/jpg' ||
+       file.type === 'image/webp'
     },
-    //  选择物流公司
-    hanldeCompny(value, index) {
-      console.log('value', value)
-      this.params.transportations[index].logisticsCompanyName = value.label
-      this.params.transportations[index].logisticsCompanyCode = value.value
-      this.islogisticsCompany = false
+    HandlerConfirm(formName) {
+      this.$refs[formName].validate(async valid => {
+        if (valid) {
+          this.params.orderId = this.$route.query.orderId
+          try {
+            await orderAddNote(this.params)
+            this.$message.success('添加成功')
+            this.backToList()
+          } catch (error) {
+            console.log(error)
+          }
+        }
+      })
     },
-    // 添加一条物流公司
-    hanldeAddlogis() {
-      this.params.transportations.push(defaultForm())
+    // 上传图片事件
+    handleSuccess(res, file, fileList) {
+      this.params.images.push(res.data)
+      this.handleChange()
     },
-    // 删除 一条物流公司
-    handeleDelete(index) {
-      this.params.transportations.splice(index, 1)
+    // 上传文件
+    handleFileSuccess(res, file, fileList) {
+      this.params.ossFiles.push(res.data.ossFiles)
+      this.handleFileChange()
     },
-    // 添加物流单号
-    hanldeAddNumber(logistic, num, numIndex) {
-      logistic.logisticsNu.push({ num: '' })
+    // 删除图片事件
+    handleRemove(file, fileList) {
+      this.params.images = fileList.map(e => e.response.data)
+      this.handleChange()
     },
-    // 删除一条物流编号
-    handeleDeleteNumber(logistic, numIndex) {
-      logistic.logisticsNu.splice(numIndex, 1)
+    // 删除文件
+    handlerFileRemove(file, fileList) {
+      this.params.ossFiles = fileList.map(e => e.response.data.ossFiles)
+      this.handleFileChange()
     },
-    checkedParams() { // 校验参数信息
-      const _this = this
-      this.params.transportations.forEach(function(pros) {
-        pros.logisticsNu.forEach(function(item) {
-          const transpor = {
-            logisticsCompanyCode: pros.logisticsCompanyCode,
-            logisticsCompanyName: pros.logisticsCompanyName,
-            num: item.num
-          }
-          if (transpor.logisticsCompanyCode === '' && transpor.logisticsCompanyName === '') {
-            _this.islogisticsCompany = true
-          } else {
-            _this.islogisticsCompany = false
-          }
-          if (transpor.num === '') {
-            console.log('1111111111')
-            _this.islogisticsNumber = true
-          } else {
-            _this.islogisticsNumber = false
-          }
-        })
-      })
-    },
-    hanldeConfirm(formName) {
-      // 保存编辑
-      // this.checkedParams()
-      this.$refs[formName].validate(valid => {
-        if (valid) {
-          this.fileImageList.forEach((image) => {
-            this.params.images.push(image.response.data)
-          })
-          this.confirmDeliver(this.params)
+    // 文件限制
+    beforeUploadImg(file) {
+      const isUpload = file.size / 1024 / 1024 < 5
+      if (this.isImage(file)) {
+        if (isUpload) {
+          return true
         } else {
+          this.$message.error('文件过大，请重新上传！')
           return false
         }
-      })
-    },
-    async confirmDeliver(params) {
-      try {
-        await confirmDeliver(params)
-        this.$message.success('操作成功')
-        this.backToList()
-      } catch (error) {
-        console.log('error', error)
+      } else {
+        this.$message.error('请上传jgp，jpeg，png格式的图片！')
+        return false
       }
     },
-    // 上传图片事件
-    handleSuccess(res, file, fileList) {
-      this.fileImageList = fileList
-      console.log('images', this.fileImageList)
-    },
-    // 删除图片事件
-    handleRemove(file, fileList) {
-      this.fileImageList = fileList
-      console.log('images', this.fileImageList)
+    beforeUploadFile(file) {
+      const whiteList = ['pdf', 'doc', 'docx', 'xlsx']
+      const isUpload = file.size / 1024 / 1024 < 5
+      if (whiteList.indexOf(file.name.substring(file.name.lastIndexOf('.') + 1)) === -1) {
+        this.$message.error('请上传 pdf、doc、docx、xlsx格式的文件！')
+        return false
+      }
+      if (isUpload) {
+        return true
+      } else {
+        this.$message.error('文件过大，请重新上传！')
+        return false
+      }
     },
-    reloadImage() {
-      this.loadImgLoading = true
-      setTimeout(() => {
-        this.temp.classifyImage = this.temp.classifyImage.split('?')[0] + '?r=' + Math.floor(Math.random() * 1000)
-      }, 1000 * 2)
+    // 文件数量判断
+    handleChange(file, fileList) {
+      this.hideImg = this.params.images.length >= 5
     },
-    loadSucess() {
-      this.loadImgLoading = false
+    // 文件数量判断
+    handleFileChange(file, fileList) {
+      this.hideFile = this.params.ossFiles.length >= 5
     },
     backToList() {
       this.$store.dispatch('tagsView/delView', this.$route).then(() => {
         this.$nextTick(() => {
           this.$router.replace({
-            path: '/order/list'
+            path: '/order/order-remarks',
+            query: {
+              orderId: this.orderId
+            }
           })
         })
       })
@@ -234,7 +188,26 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+::v-deep .el-upload-list {
+  display: inline-flex !important;
+}
+::v-deep .el-upload--picture-card {
+  width: 148px !important;
+  height: 148px !important;
+}
+::v-deep .el-upload__tip {
+  position: static !important;
+}
+
+::v-deep .hide .el-upload--picture-card {
+  display: none;
+}
+.fileUpload {
+  ::v-deep .el-upload-list {
+    flex-direction: column !important;
+  }
+}
   .app-title{
     line-height: 36px;
     font-size: 26px;

src/views/order/order-remarks.vue

@@ -1,27 +1,54 @@
 <template>
   <div class="app-container">
-    <div class="filter-container" style="text-align: right;">
-      <el-button type="primary" @click="handlePayNote">添加订单备注</el-button>
+    <div v-if="orderNoteList.length === 0" class="order_empty">
+      <span>暂无订单备注</span>
+      <el-button type="primary" @click="handlePayNote">添加备注</el-button>
     </div>
-    <el-card class="box-card" style="margin: 0 auto;">
-      <div class="refund-item">
-        订单备注
+    <div v-else>
+      <div class="filter-container" style="text-align: right; padding: 0;">
+        <el-button type="primary" @click="handlePayNote">添加备注</el-button>
       </div>
-    </el-card>
+      <el-card v-for="item in orderNoteList" :key="item.id" class="box-card" style="margin: 0 auto;">
+        <div class="refund-item">
+          <el-form label-width="120px">
+            <el-form-item :label="item.createName">
+              <div class="order_time">
+                {{ item.createDate }}
+              </div>
+            </el-form-item>
+            <el-form-item label="备注内容：">
+              {{ item.remarks }}
+            </el-form-item>
+            <el-form-item label="图片：">
+              <el-image v-for="(img, index) in item.images" :key="index" :preview-src-list="[img]" style="width: 148px;height: 148px;margin-right: 20px;" :src="img" />
+            </el-form-item>
+            <el-form-item label="文件：">
+              <div v-for="file, i in item.ossFiles" :key="i">
+                <span class="order_text">{{ file.name }}</span>
+                <el-button type="text" @click="handlerDownload(file)">下载</el-button>
+              </div>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-card>
+      <div class="goBack">
+        <el-button plain @click="backToList">返回</el-button>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import { orderTodeliver } from '@/api/order'
+import { orderNotes, fileDownload } from '@/api/order'
 export default {
   name: 'OrderRemarks',
   filters: {
-
   },
   data() {
     return {
       orderInfo: {},
-      productRadio: null
+      productRadio: null,
+      orderNoteList: [] // 订单备注列表
     }
   },
   computed: {
@@ -33,23 +60,34 @@ export default {
     }
   },
   created() {
-    this.orderTodeliver(this.orderId)
+    this.orderNotes(this.orderId)
   },
   methods: {
-    // 付款单详情
-    async orderTodeliver(orderId) {
+    // 获取订单备注列表
+    async orderNotes(orderId) {
       try {
-        const res = await orderTodeliver(orderId)
-        console.log('res', res)
-        this.orderInfo = res.data
-        this.orderInfo.orderProduct.map((elem) => {
-          elem.deliveryNum = elem.num
-          return elem
-        })
+        const { data } = await orderNotes(orderId)
+        this.orderNoteList = data
       } catch (error) {
         console.log('error', error)
       }
     },
+    // 文件下载
+    async handlerDownload(res) {
+      try {
+        const response = await fileDownload({ fileId: res.id })
+        // 获取文件流数据
+        const blob = new Blob([response])
+        const link = document.createElement('a')
+        link.href = URL.createObjectURL(blob)
+        link.download = res.name
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+      } catch (error) {
+        console.log(error)
+      }
+    },
     handlePayNote() {
       this.$router.push({ path: '/order/add-remarks ', query: { orderId: this.orderId }})
     },
@@ -57,7 +95,10 @@ export default {
       this.$store.dispatch('tagsView/delView', this.$route).then(() => {
         this.$nextTick(() => {
           this.$router.replace({
-            path: '/finance/payment-list'
+            path: '/order/deliver',
+            query: {
+              orderId: this.orderId
+            }
           })
         })
       })
@@ -66,7 +107,43 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.order_empty {
+  width: 100%;
+  height: 40vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.order_empty span {
+  color: #409EFF;
+  margin: 1vw;
+}
+.order_time {
+  font-weight: 700;
+}
+.order_text {
+  margin-right: 20px;
+}
+.goBack {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+::v-deep .el-form-item__content {
+  margin-left: 130px !important;
+}
+.goBack {
+  margin: 3vw 0;
+  ::v-deep .el-button--medium {
+    width: 100px !important;
+  }
+}
+::v-deep .el-card {
+  margin: 20px auto !important;
+}
   .app-title{
     line-height: 36px;
     font-size: 26px;
@@ -76,7 +153,6 @@ export default {
     margin: 0;
   }
   .box-card{
-    margin-top: 20px;
     font-size: 14px;
   }
   .box-row{