细节

src/api/order/event.js

@@ -9,7 +9,25 @@ const api = {
   extract: '/order.event/extract',
   printer: '/order.event/printer'
 }
-
+// 修改商家备注c查看
+export function getRemark (params) {
+  return axios({
+    url: '/order.event/getRemark',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 修改商家备注新增
+ * @param {*} data
+ */
+ export function addRemark (data) {
+  return axios({
+    url: '/order.event/addRemark',
+    method: 'post',
+    data
+  })
+}
 /**
  * 修改订单价格
  * @param {*} data

src/components/Table/STable.js

@@ -158,6 +158,7 @@ export default {
         ...filters
       }
       )
+      console.log(this.data,'KKKKKK')
       // console.log('params', params)
       const result = this.data(params)
       // 对接自己的通用数据接口需要修改下方代码中的 r.page, r.totalCount, r.data

src/views/goods/category/modules/AddForm.vue

@@ -111,7 +111,6 @@ export default {
       confirmLoading: false,
       // 当前表单元素
       form: this.$form.createForm(this),
-
       // 上级分类列表
       categoryListTree: []
     }

src/views/order/Detail.vue

@@ -135,7 +135,7 @@
           <a-descriptions-item label="商家备注">
             <!-- <div v-html="record.merchant_remark" v-if="record.merchant_remark"></div> -->
             <!-- <Ueditor v-if="record.merchant_remark" v-decorator="['record.merchant_remark']" /> -->
-            <span style="color: #d6893b; cursor: pointer" @click="handleMerchantRemark">查看备注</span>
+            <span style="color: #d6893b; cursor: pointer" @click="handleLookRemark">查看备注</span>
           </a-descriptions-item>
           <a-descriptions-item v-if="record.trade" label="第三方支付订单号">
             <span>{{ record.trade ? record.trade.out_trade_no : '-' }}</span>
@@ -278,8 +278,8 @@
                 <div class="deliver-goods-list clearfix">
                   <div class="goods-item" v-for="(goods, idx) in item.goods" :key="idx">
                     <a-tooltip>
-                      <template slot="title">{{ goods.goods_name?goods.goods_name:'' }}</template>
+                      <template slot="title">{{ goods.goods_name ? goods.goods_name : '' }}</template>
-                      <img class="goods-img" :src="goods.goods_image?goods.goods_image:''" alt="商品图片" />
+                      <img class="goods-img" :src="goods.goods_image ? goods.goods_image : ''" alt="商品图片" />
                       <div class="title">共{{ goods.delivery_num }}件</div>
                     </a-tooltip>
                   </div>
@@ -370,7 +370,8 @@
     <CancelForm ref="CancelForm" @handleSubmit="handleRefresh" />
     <PrinterForm ref="PrinterForm" @handleSubmit="handleRefresh" />
     <PriceForm ref="PriceForm" @handleSubmit="handleRefresh" />
-    <RemarkForm ref="RemarkForm" @handleSubmit="handleRefresh" />
+    <RemarkFormEdit ref="RemarkFormEdit" @handleSubmit="handleRefresh" />
+    <RemarkFormAdd ref="RemarkFormAdd" @handleSubmit="handleRefresh" />
     <JingDong ref="JingDong" @handleSubmit="handleRefresh" />
   </div>
 </template>
@@ -379,7 +380,16 @@
 import { inArray } from '@/utils/util'
 import * as Api from '@/api/order'
 import { GoodsItem, UserItem } from '@/components/Table'
-import { DeliveryForm, ExtractForm, CancelForm, PrinterForm, PriceForm, RemarkForm, JingDong } from './modules'
+import {
+  DeliveryForm,
+  ExtractForm,
+  CancelForm,
+  PrinterForm,
+  PriceForm,
+  RemarkFormEdit,
+  JingDong,
+  RemarkFormAdd,
+} from './modules'
 import { Ueditor } from '@/components'
 import {
   OrderTypeEnum,
@@ -435,9 +445,10 @@ export default {
     CancelForm,
     PrinterForm,
     PriceForm,
-    RemarkForm,
     Ueditor,
     JingDong,
+    RemarkFormAdd,
+    RemarkFormEdit,
   },
   data() {
     return {
@@ -584,7 +595,11 @@ export default {
     // 商家备注
     handleMerchantRemark() {
       const { record } = this
-      this.$refs.RemarkForm.show(record)
+      this.$refs.RemarkFormAdd.show(record)
+    },
+    handleLookRemark() {
+      const { record } = this
+      this.$refs.RemarkFormEdit.show(record)
     },
     // 京东链接
     onClickJongDongLink() {

src/views/order/modules/RemarkFormAdd.vue

@@ -11,13 +11,17 @@
   >
     <a-spin :spinning="isLoading">
       <a-form :form="form">
-        <a-form-item
+        <a-form-item label="备注内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
-          label="备注内容"
+          <a-textarea
-          :labelCol="labelCol"
+            v-decorator="['remark', { rules: [{ required: true, message: '备注内容不能为空' }] }]"
-          :wrapperCol="wrapperCol"
+            :autoSize="{ minRows: 4, maxRows: 6 }"
-          extra="商家备注内容仅后台可见，用户端不可见"
+            autocomplete="off"
-        >
+          />
-          <Ueditor v-decorator="['content']" />
+        </a-form-item>
+      </a-form>
+      <a-form :form="form">
+        <a-form-item label="备注图片" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <SelectImage ref="childComponent" multiple :maxNum="10" v-decorator="['image_id']" />
         </a-form-item>
       </a-form>
     </a-spin>
@@ -27,10 +31,10 @@
 <script>
 import _ from 'lodash'
 import * as Api from '@/api/order/event'
-import { Ueditor } from '@/components'
+import { SelectImage } from '@/components'
 export default {
   components: {
-    Ueditor,
+    SelectImage,
   },
   data() {
     return {
@@ -56,25 +60,9 @@ export default {
     show(record) {
       // 显示窗口
       this.visible = true
-      // 当前记录
       this.record = record
-      // 设置默认值
+      // 当前记录
-      this.setFieldsValue()
-    },
-
-    // 设置默认值
-    setFieldsValue() {
-      const {
-        record,
-        $nextTick,
-        form: { setFieldsValue },
-      } = this
-      $nextTick(() => {
-        setFieldsValue({ content: record.merchant_remark })
-        console.log(content)
-      })
     },
-
     // 确认按钮
     handleSubmit(e) {
       e.preventDefault()
@@ -97,7 +85,7 @@ export default {
     // 提交到后端api
     onFormSubmit(values) {
       this.isLoading = true
-      Api.updateRemark({ orderId: this.record.order_id, form: values })
+      Api.addRemark({ orderId: this.record.order_id, form: values })
         .then((result) => {
           // 显示成功
           this.$message.success(result.message, 1.5)

src/views/order/modules/RemarkFormDetails.vue

@@ -0,0 +1,93 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="560"
+    :visible="visible"
+    :isLoading="isLoading"
+    :confirmLoading="isLoading"
+    :maskClosable="false"
+    @cancel="handleCancel"
+    :footer="null"
+  >
+    <a-spin :spinning="isLoading" style="padding-bottom: 30px">
+      <a-form :form="form">
+        <a-form-item label="备注内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-textarea
+            v-decorator="['remark', { rules: [{ required: true, message: '备注内容不能为空' }] }]"
+            :autoSize="{ minRows: 4, maxRows: 6 }"
+            autocomplete="off"
+          />
+        </a-form-item>
+      </a-form>
+      <a-form :form="form">
+        <a-form-item label="备注图片" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <SelectImage
+            ref="childComponent"
+            :defaultList="record.image_url"
+            multiple
+            :maxNum="10"
+            v-decorator="['image_id']"
+          />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import _ from 'lodash'
+import * as Api from '@/api/order/event'
+import { SelectImage } from '@/components'
+export default {
+  components: {
+    SelectImage,
+  },
+  data() {
+    return {
+      // 对话框标题
+      title: '商家备注',
+      // 标签布局属性
+      labelCol: { span: 6 },
+      // 输入框布局属性
+      wrapperCol: { span: 14 },
+      // modal(对话框)是否可见
+      visible: false,
+      // modal(对话框)确定按钮 loading
+      isLoading: false,
+      // 当前表单元素
+      form: this.$form.createForm(this),
+      // 当前记录
+      record: {},
+    }
+  },
+  created() {},
+  methods: {
+    // 显示对话框
+    show(record) {
+      // 显示窗口
+      this.visible = true
+      this.record = record
+      this.setFieldsValue()
+      // 当前记录
+    },
+    // 设置默认值
+    setFieldsValue() {
+      const {
+        form: { setFieldsValue },
+      } = this
+      // 设置表单内容
+      this.$nextTick(() => {
+        setFieldsValue(
+          // eslint-disable-next-line no-undef
+          _.pick(this.record, ['remark'])
+        )
+      })
+    },
+    // 关闭对话框事件
+    handleCancel() {
+      this.visible = false
+      this.form.resetFields()
+    },
+  },
+}
+</script>

src/views/order/modules/RemarkFormEdit.vue

@@ -0,0 +1,128 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="800"
+    :visible="visible"
+    :isLoading="isLoading"
+    :confirmLoading="isLoading"
+    :destroyOnClose="true"
+    @cancel="handleCancel"
+    :footer="null"
+  >
+    <a-spin :spinning="isLoading" style="padding-bottom:30px">
+      <table style="width: 100%">
+        <thead class="ant-table-thead">
+          <tr>
+            <th v-for="(item, index) in columns" :key="index">
+              <span class="ant-table-header-column">
+                <div>
+                  <span class="ant-table-column-title">{{ item.title }}</span>
+                </div>
+              </span>
+            </th>
+          </tr>
+        </thead>
+        <tbody class="ant-table-tbody">
+          <template>
+            <!-- <div :key="`order_${item.order_id}_1`">{{ item.copy_text }}</div> -->
+            <tr v-for="(item, goodsIdx) in remarkList" :key="item.id">
+              <td>
+                <img width="50" height="50" :src="item.image_url[0].preview_url" alt="备注图片" />
+              </td>
+              <td>{{ item.remark }}</td>
+              <td>{{ item.create_time }}</td>
+              <td><a @click="handleLookRemarkDetails(item)">详情</a></td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </a-spin>
+    <RemarkFormDetails ref="RemarkFormDetails" />
+  </a-modal>
+</template>
+
+<script>
+import _ from 'lodash'
+import * as Api from '@/api/order/event'
+import { SelectImage, STable } from '@/components'
+import RemarkFormDetails from './RemarkFormDetails.vue'
+const columns = [
+  {
+    title: '备注图片',
+    dataIndex: 'image_url',
+    scopedSlots: { customRender: 'image_url' },
+  },
+  {
+    title: '备注名称',
+    dataIndex: 'remark',
+  },
+  {
+    title: '添加时间',
+    width: '180px',
+    dataIndex: 'create_time',
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: '150px',
+    scopedSlots: { customRender: 'action' },
+  },
+]
+export default {
+  components: {
+    SelectImage,
+    STable,
+    RemarkFormDetails,
+  },
+  data() {
+    return {
+      // 对话框标题
+      title: '商家备注',
+      // 标签布局属性
+      labelCol: { span: 6 },
+      // 输入框布局属性
+      wrapperCol: { span: 14 },
+      // modal(对话框)是否可见
+      visible: false,
+      // modal(对话框)确定按钮 loading
+      isLoading: false,
+      // 当前表单元素
+      form: this.$form.createForm(this),
+      // 当前记录
+      record: {},
+      columns,
+      remarkList: [],
+    }
+  },
+  created() {},
+  methods: {
+    handleLookRemarkDetails(record) {
+      this.$refs.RemarkFormDetails.show(record)
+    },
+    // 显示对话框
+    show(record) {
+      // 显示窗口
+      this.visible = true
+      // 当前记录
+      this.record = record
+      // 设置默认值
+      this.getRemark()
+    },
+    // 获取列表数据
+    getRemark() {
+      this.isLoading = true
+      return Api.getRemark({ orderId: this.record.order_id })
+        .then((response) => {
+          this.remarkList = response.data.list
+        })
+        .finally(() => (this.isLoading = false))
+    },
+
+    // 关闭对话框事件
+    handleCancel() {
+      this.visible = false
+      this.form.resetFields()
+    },
+  },
+}
+</script>

src/views/order/modules/index.js

@@ -3,7 +3,8 @@ import ExtractForm from './ExtractForm'
 import CancelForm from './CancelForm'
 import PrinterForm from './PrinterForm'
 import PriceForm from './PriceForm'
-import RemarkForm from './RemarkForm'
+import RemarkFormAdd from './RemarkFormAdd'
+import RemarkFormEdit from './RemarkFormEdit'
 import JingDong from './JingDong'
 
-export { DeliveryForm, ExtractForm, CancelForm, PrinterForm, PriceForm, RemarkForm,JingDong }
+export { DeliveryForm, ExtractForm, CancelForm, PrinterForm, PriceForm,RemarkFormEdit, RemarkFormAdd,JingDong }