修改bug

src/components/line2Hidden/index.vue

+<template>
+  <el-tooltip :placement="placement" trigger="click">
+    <template slot="content">
+      {{ text ? text : "" }}
+    </template>
+    <div class="line2Hidden">
+      {{ text ? text : "" }}
+    </div>
+  </el-tooltip>
+</template>
+<script>
+export default {
+  name: 'Lin2Hidden',
+  props: {
+    text: {
+      required: true,
+      type: String
+    },
+    placement: {
+      type: String,
+      default: 'top'
+    }
+  }
+}
+</script>
+<style lang="scss" scoped >
+.line2Hidden {
+  width: 100%;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+</style>

src/views/mall/dealRecord.vue

@@ -2,15 +2,15 @@
   <div class="app-container">
     <div class="page__header flex f-ai-c f-jc-sb">
       <el-button type="primary" size="mini" class="mr10" @click="onBack">返回</el-button>
-      <el-button type="danger" size="mini" class="mr10" @click="onAdd">添加记录</el-button>
+      <el-button type="danger" size="mini" class="mr10" @click="onAdd">添加成交记录</el-button>
     </div>
     <el-form ref="searchForm" :inline="true" :model="searchForm" class="demo-form-inline">
       <el-form-item label="价格范围" prop="startPrice">
-        <el-input-number v-model="searchForm.startPrice" :precision="2" :step="1" controls-position="right" size="small"/>
+        <el-input-number v-model="searchForm.startPrice" :step="1" placeholder="最小价格" controls-position="right" size="small" />
       </el-form-item>
       <el-form-item prop="endPrice">
         ~
-        <el-input-number v-model="searchForm.endPrice" :precision="2" :step="1" controls-position="right" size="small"/>
+        <el-input-number v-model="searchForm.endPrice" :step="1" placeholder="最大价格" controls-position="right" size="small" />
       </el-form-item>
       <el-form-item label="交易日期" prop="dateRange">
         <el-date-picker
@@ -32,13 +32,22 @@
       <el-table-column align="center" label="ID" prop="id"/>
       <el-table-column align="center" label="商品图片" width="120px">
         <template slot-scope="scope">
-          <img v-if="scope.row.images.length>0" :src="scope.row.images[0]" class="row-img">
+          <img v-if="scope.row.images.length>0" :src="scope.row.images[0]" class="row-img" @click="handlePictureCardPreview({url:scope.row.images[0]})">
           <!-- <img v-for="(item,index) in scope.row.images" :src="item" :key="index" class="row-img"> -->
         </template>
       </el-table-column>
-      <el-table-column align="center" label="成交价格" prop="price"/>
-      <el-table-column align="center" label="钱币描述" prop="extra"/>
-      <el-table-column align="center" label="成交平台" prop="platform"/>
+      <el-table-column align="center" label="成交价格" prop="price">
+        <template slot-scope="scope" >
+          <div >¥ {{ scope.row.price }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="钱币描述" prop="extra">
+        <template slot-scope="scope" >
+          <div v-if="scope.row.extra.length <21">{{ scope.row.extra }}</div>
+          <div v-else><Line2Hidden :text="scope.row.extra" /></div>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="成交平台" prop="platform" />
       <el-table-column align="center" label="链接地址" prop="link"/>
 
       <el-table-column align="center" label="交易日期" prop="bidTime">
@@ -72,6 +81,7 @@
             :action="uploadPath"
             :show-file-list="true"
             :file-list="fileList"
+            :on-preview="handlePictureCardPreview"
             :on-success="uploadIconUrl"
             :on-remove="handleRemove"
             :on-exceed="uploadOverrun"
@@ -88,19 +98,19 @@
           </el-upload>
         </el-form-item>
         <el-form-item label="成交价格" prop="price">
-          <el-input v-model="dataForm.price"/>
+          <el-input v-model="dataForm.price" placeholder="请输入成交价格"/>
         </el-form-item>
         <el-form-item label="钱币描述" prop="extra">
-          <el-input v-model="dataForm.extra"/>
+          <el-input v-model="dataForm.extra" placeholder="请输入钱币描述"/>
         </el-form-item>
         <el-form-item label="购买人" prop="buyer">
-          <el-input v-model="dataForm.buyer"/>
+          <el-input v-model="dataForm.buyer" placeholder="请输入购买人"/>
         </el-form-item>
         <el-form-item label="成交平台" prop="platform">
-          <el-input v-model="dataForm.platform"/>
+          <el-input v-model="dataForm.platform" placeholder="请输入成交平台"/>
         </el-form-item>
         <el-form-item label="链接地址" prop="link">
-          <el-input v-model="dataForm.link"/>
+          <el-input v-model="dataForm.link" placeholder="请输入链接地址"/>
         </el-form-item>
         <el-form-item label="交易日期" prop="bidTime">
           <!-- <el-input v-model="dataForm.bidtime"/> -->
@@ -120,6 +130,9 @@
       </div>
     </el-dialog>
 
+    <el-dialog :visible.sync="previewVisible">
+      <img :src="previewImageUrl" width="100%" alt="">
+    </el-dialog>
   </div>
 </template>
 
@@ -129,16 +142,10 @@ import { getToken } from '@/utils/auth'
 import { uploadPath } from '@/api/business/storage'
 import moment from 'moment'
 import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
-// const validateIcon = (rule, value, callback) => {
-//   if (!this.dataForm.images.length === 0) {
-//     callback(new Error('请至少上传一张商品图片'))
-//   } else {
-//     callback()
-//   }
-// }
+import Line2Hidden from '@/components/line2Hidden'
 export default {
   name: 'Category',
-  components: { Pagination },
+  components: { Pagination, Line2Hidden },
   filters: {
     filterTime(val) {
       let time = ''
@@ -150,6 +157,9 @@ export default {
   },
   data() {
     return {
+      previewImageUrl: '',
+      previewVisible: false,
+      delDialogVisible: false,
       listLoading: false,
       uploadPath,
       dataForm: {
@@ -171,8 +181,8 @@ export default {
       dialogFormVisible: false,
       dialogStatus: '',
       textMap: {
-        create: '创建',
-        edit: '修改'
+        create: '新增成交记录',
+        edit: '编辑成交记录'
       },
       rules: {
         icon: [
@@ -269,6 +279,10 @@ export default {
     }
   },
   methods: {
+    handlePictureCardPreview(file) {
+      this.previewImageUrl = file.url
+      this.previewVisible = true
+    },
     handleOk(state) {
       switch (state) {
         case 'create':
@@ -418,9 +432,14 @@ export default {
         }
       })
     },
-    handleDelete(row) {
+    handleDelete({ id }) {
+      this.$confirm('你确定删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
         const data = {
-        id: row.id
+          id
         }
         deleteDealRecord(data).then((res) => {
           this.$notify.success({
@@ -442,6 +461,7 @@ export default {
             })
           }
         })
+      })
     }
   }
 }