调整页面

src/api/product.js

@@ -21,4 +21,7 @@ export default {
   doDelete(query) {
     return micro_request.postRequest(basePath, 'Product', 'DeleteByIds', query)
   },
+  doGetEntityById(query) {
+    return micro_request.postRequest(basePath, 'Product', 'GetEntityById', query)
+  },
 }

src/views/customer/components/Allocate.vue

@@ -20,7 +20,11 @@
       <el-button size="mini" @click="visible = false">取消</el-button>
     </span>
     <!--    <Transfer ref="transfer" />-->
-    <select-user ref="selectUser" :query-params="{ roles: ['Sales', 'SalesManager'] }" @save="selectUser" />
+    <select-user
+      ref="selectUser"
+      :multiple="true"
+      :query-params="{ roles: ['Sales', 'SalesManager'] }"
+      @save="selectUser" />
   </el-dialog>
 </template>
 
@@ -56,6 +60,7 @@
         allocate: [],
         data: generateData(),
         options: [],
+        salesId: '',
       }
     },
     methods: {

src/views/product/detail.vue

@@ -0,0 +1,422 @@
+<template>
+  <div class="detail">
+    <el-row :gutter="10">
+      <el-col :span="16">
+        <div class="title">
+          <p>产品名称</p>
+          <h3>
+            {{ detail.prodName }}
+          </h3>
+        </div>
+        <header>
+          <el-descriptions :colon="false" :column="6" direction="vertical">
+            <el-descriptions-item content-class-name="my-content" label="产品分类" label-class-name="my-label">
+              {{ detail.prodClass }}
+            </el-descriptions-item>
+            <el-descriptions-item content-class-name="my-content" label="建议成交价" label-class-name="my-label">
+              {{ detail.guidPrice }}
+            </el-descriptions-item>
+            <el-descriptions-item content-class-name="my-content" label="经销商价" label-class-name="my-label">
+              {{ detail.distPrice }}
+            </el-descriptions-item>
+            <el-descriptions-item content-class-name="my-content" label="签约代理价" label-class-name="my-label">
+              {{ detail.agentPrice }}
+            </el-descriptions-item>
+            <el-descriptions-item content-class-name="my-content" label="市场报价" label-class-name="my-label">
+              {{ detail.marketPrice }}
+            </el-descriptions-item>
+            <el-descriptions-item content-class-name="my-content" label="创建人" label-class-name="my-label">
+              {{ detail.createdName }}
+            </el-descriptions-item>
+          </el-descriptions>
+        </header>
+      </el-col>
+      <el-col :span="8">
+        <div class="buttons">
+          <el-button type="primary" @click="handleEdit">编辑</el-button>
+          <el-button @click="handleDelete">删除</el-button>
+        </div>
+        <ul class="records">
+          <li v-for="(value, key) in records" :key="key">
+            <div class="date">
+              <h2>{{ key.split('-')[2] }}</h2>
+              <h3>{{ key.split('-').splice(0, 2).join('.') }}</h3>
+            </div>
+            <ul class="content">
+              <li v-for="(item, index) in records[key]" :key="index">
+                <!-- <el-avatar class="user-avatar"
+                           :src="avatar" /> -->
+                <vab-icon class="user-avatar" icon="account-circle-fill" />
+                <div class="text">
+                  <p class="action">{{ item.opnPeople }} {{ item.opnType }}</p>
+                  <p>{{ item.opnDate }}</p>
+                  <p v-if="item.opnContent.custName">
+                    客户名称：
+                    <span>{{ item.opnContent.custName }}</span>
+                  </p>
+                  <template v-else-if="item.opnContent.cuctName">
+                    <p>
+                      联系人名称：
+                      <span>{{ item.opnContent.cuctName }}</span>
+                    </p>
+                    <p>职务：{{ item.opnContent.postion }}</p>
+                    <p>手机：{{ item.opnContent.telephone }}</p>
+                  </template>
+                </div>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </el-col>
+    </el-row>
+    <Contact ref="contact" @contactSave="contactSave" />
+  </div>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex'
+  import api from '@/api/product'
+  export default {
+    name: 'CustomerDetail',
+    components: {},
+    data() {
+      return {
+        id: '',
+        privateCus: '',
+        detail: {
+          prodClass: '', //产品分类
+          guidPrice: '', //建议成交价
+          distPrice: '', //经销商价
+          agentPrice: '', //签约代理价
+          marketPrice: '', //市场报价
+          createdName: '', //创建人
+        },
+      }
+    },
+    computed: {
+      ...mapGetters({
+        avatar: 'user/avatar',
+        username: 'user/username',
+      }),
+    },
+    mounted() {
+      this.id = this.$route.query.id
+      this.privateCus = this.$route.query.privateCus
+      this.init()
+      //this.getDynamics()
+    },
+    methods: {
+      async init() {
+        Promise.all([
+          api.doGetEntityById({ ids: [parseInt(this.id)] }),
+          // api.getAbstract({ id: parseInt(this.id) }),
+        ]).then(([detail, abstract]) => {
+          if (detail.data.list[0]) this.detail = detail.data.list[0]
+          if (abstract.data.list) this.abstract = abstract.data.list
+        })
+      },
+
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  $base: '.detail';
+
+  #{$base} {
+    height: calc(100vh - 60px - 50px - 12px * 2 - 40px);
+    display: flex;
+    padding: 20px 40px;
+
+    > .el-row {
+      flex: 1;
+
+      > .el-col {
+        height: 100%;
+      }
+    }
+
+    .title {
+      p,
+      h3 {
+        margin: 0;
+      }
+
+      p {
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+      }
+
+      h3 {
+        font-size: 24px;
+        font-weight: 500;
+        line-height: 36px;
+        color: #333;
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+
+    header {
+      height: 74px;
+      background: rgba(196, 196, 196, 0.5);
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+      margin-top: 16px;
+
+      ::v-deep .el-descriptions__body {
+        background: transparent;
+      }
+
+      ::v-deep .my-label {
+        font-size: 14px;
+        font-weight: 600;
+        color: #fff;
+      }
+
+      ::v-deep .my-content {
+        font-size: 14px;
+        font-weight: 600;
+        color: #333;
+      }
+    }
+
+    .el-tabs {
+      height: calc(100% - 148px);
+      display: flex;
+      flex-direction: column;
+
+      ::v-deep .el-tabs__content {
+        flex: 1;
+
+        .el-tab-pane {
+          height: 100%;
+        }
+      }
+    }
+
+    .buttons {
+      padding-top: 28px;
+      text-align: right;
+    }
+
+    .records {
+      margin: 0;
+      padding: 10px 20px;
+      list-style: none;
+      height: calc(100% - 60px);
+      overflow-y: auto;
+
+      > li {
+        display: flex;
+
+        & + li {
+          margin-top: 10px;
+        }
+      }
+
+      .date {
+        width: 100px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        h2,
+        h3 {
+          margin: 0;
+        }
+
+        h2 {
+          font-size: 26px;
+          line-height: 32px;
+        }
+      }
+
+      .content {
+        flex: 1;
+        list-style: none;
+
+        li {
+          display: flex;
+
+          & + li {
+            margin-top: 10px;
+          }
+        }
+
+        .user-avatar {
+          font-size: 40px;
+        }
+
+        .text {
+          flex: 1;
+          padding-left: 20px;
+
+          p {
+            font-weight: 500;
+            margin: 0;
+            line-height: 20px;
+
+            span {
+              color: #1d66dc;
+            }
+          }
+
+          p:nth-child(2) {
+            margin-bottom: 10px;
+          }
+
+          .action {
+            font-weight: bold;
+            color: #333;
+          }
+        }
+      }
+    }
+
+    .follow {
+      height: 100%;
+      padding: 10px 20px;
+      overflow: auto;
+
+      > li {
+        display: flex;
+
+        + li {
+          margin-top: 10px;
+        }
+      }
+
+      .date {
+        width: 100px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        h2,
+        h3 {
+          margin: 0;
+        }
+
+        h2 {
+          font-size: 26px;
+          line-height: 32px;
+        }
+      }
+
+      .content {
+        flex: 1;
+        list-style: none;
+
+        > li {
+          border: 1px solid rgb(215, 232, 244);
+          background: rgb(247, 251, 254);
+          border-radius: 4px;
+          padding: 8px;
+          overflow: hidden;
+
+          .text-container {
+            display: flex;
+          }
+
+          .comments {
+            padding-left: 60px;
+            margin-top: 10px;
+            max-height: 200px;
+            overflow: auto;
+
+            li {
+              display: flex;
+              border-top: 1px solid #e3e5e7;
+
+              .text {
+                flex: 1;
+                padding: 0 10px;
+
+                p {
+                  font-weight: 500;
+                  margin: 0;
+                  line-height: 32px;
+                }
+
+                p:first-child {
+                  line-height: 30px;
+                  font-weight: bold;
+                }
+
+                p:last-child {
+                  font-size: 12px;
+                  color: #9499a0;
+                  text-align: right;
+                }
+              }
+            }
+          }
+
+          + li {
+            margin-top: 10px;
+          }
+        }
+
+        .user-avatar {
+          font-size: 40px;
+        }
+
+        .text {
+          flex: 1;
+          padding-left: 20px;
+          padding-right: 10px;
+
+          p {
+            font-weight: 500;
+            margin: 0;
+            line-height: 32px;
+
+            span {
+              color: #1d66dc;
+            }
+          }
+
+          .action {
+            display: flex;
+            justify-content: space-between;
+
+            span:first-child {
+              font-weight: bold;
+              color: #333;
+            }
+          }
+
+          .footer {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          }
+        }
+      }
+    }
+  }
+
+  .height-enter-active,
+  .height-leave-active {
+    transition: all 0.5s;
+  }
+
+  .height-enter-to,
+  .height-leave {
+    height: 200px;
+  }
+
+  .height-enter,
+.height-leave-to
+
+/* .fade-leave-active below version 2.1.8 */ {
+    height: 0;
+  }
+</style>

src/views/product/index.vue

@@ -1,115 +1,55 @@
 <template>
   <div class="user-management-container">
-    <vab-query-form>
-      <vab-query-form-left-panel :span="12">
-        <el-button
-          icon="el-icon-plus"
-          type="primary"
-          @click="handleEdit($event)">
-          添加
-        </el-button>
-        <el-button
-          icon="el-icon-delete"
-          type="danger"
-          @click="handleDelete($event)">
-          批量删除
-        </el-button>
-      </vab-query-form-left-panel>
-      <vab-query-form-right-panel :span="12">
-        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
+    <vab-query-form-left-panel :span="18">
+      <el-form :inline="true" :model="queryForm" @submit.native.prevent>
+        <el-col :span="5">
           <el-form-item>
-            <el-input
-              v-model.trim="queryForm.prodCode"
-              clearable
-              placeholder="请输入用户名" />
+            <el-input v-model.trim="queryForm.prodCode" clearable placeholder="产品编码" />
           </el-form-item>
+        </el-col>
+        <el-col :span="5">
           <el-form-item>
-            <el-button icon="el-icon-search" type="primary" @click="queryData">
-              查询
-            </el-button>
+            <el-input v-model.trim="queryForm.prodClass" clearable placeholder="产品类别" />
           </el-form-item>
-        </el-form>
-      </vab-query-form-right-panel>
-    </vab-query-form>
-
-    <el-table
-      v-loading="listLoading"
-      border
-      :data="list"
-      :height="height"
-      @selection-change="setSelectRows">
+        </el-col>
+        <el-col :span="5">
+          <el-form-item>
+            <el-input v-model.trim="queryForm.prodName" clearable placeholder="产品名称" />
+          </el-form-item>
+        </el-col>
+        <el-form-item>
+          <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
+          <el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </vab-query-form-left-panel>
+    <vab-query-form-left-panel :span="15" style="margin-bottom: 10px">
+      <el-button icon="el-icon-plus" type="primary" @click="handleEdit($event)">添加</el-button>
+      <!-- <el-button
+          icon="el-icon-delete"
+          type="danger"
+          @click="handleDelete($event)">
+          批量删除
+        </el-button> -->
+    </vab-query-form-left-panel>
+    <el-table v-loading="listLoading" border :data="list" :height="height" @selection-change="setSelectRows">
       <el-table-column align="center" show-overflow-tooltip type="selection" />
-      <!--      <el-table-column align="center" label="序号" width="55">
-        <template #default="{ $index }">
-          {{ $index + 1 }}
-        </template>
-      </el-table-column>-->
-      <el-table-column
-        align="center"
-        label="产品类别"
-        prop="prodClass"
-        show-overflow-tooltip />
-      <el-table-column
-        align="center"
-        label="产品名称"
-        prop="prodName"
-        show-overflow-tooltip />
-      <el-table-column
-        align="center"
-        label="产品型号"
-        prop="prodCode"
-        show-overflow-tooltip />
-      <el-table-column
-        align="center"
-        label="签约代理价"
-        prop="agentPrice"
-        show-overflow-tooltip />
-      <el-table-column
-        align="center"
-        label="经销商价"
-        prop="distPrice"
-        show-overflow-tooltip />
-      <el-table-column
-        align="center"
-        label="建议成交价"
-        prop="guidPrice"
-        show-overflow-tooltip />
-
-      <el-table-column
-        align="center"
-        label="市场报价"
-        prop="marketPrice"
-        show-overflow-tooltip />
-      <el-table-column
-        align="center"
-        label="备注信息"
-        prop="remark"
-        show-overflow-tooltip />
-      <el-table-column
-        align="center"
-        label="创建人"
-        prop="createdName"
-        show-overflow-tooltip />
-      <el-table-column
-        align="center"
-        label="更改人"
-        prop="updatedName"
-        show-overflow-tooltip />
-
-      <el-table-column
-        align="center"
-        label="操作"
-        show-overflow-tooltip
-        width="85">
+      <el-table-column align="center" label="产品类别" prop="prodClass" show-overflow-tooltip />
+      <el-table-column align="center" label="产品名称" prop="prodName" show-overflow-tooltip :span="15" />
+      <el-table-column align="center" label="产品型号" prop="prodCode" show-overflow-tooltip />
+      <el-table-column align="center" label="签约代理价" prop="agentPrice" show-overflow-tooltip />
+      <el-table-column align="center" label="经销商价" prop="distPrice" show-overflow-tooltip />
+      <el-table-column align="center" label="建议成交价" prop="guidPrice" show-overflow-tooltip />
+      <el-table-column align="center" label="市场报价" prop="marketPrice" show-overflow-tooltip />
+      <el-table-column align="center" label="操作" show-overflow-tooltip width="95">
         <template #default="{ row }">
           <el-button type="text" @click="handleEdit(row)">编辑</el-button>
+          <!-- <el-button type="text" @click="showDefail(row)">详情</el-button> -->
           <el-button type="text" @click="handleDelete(row)">删除</el-button>
         </template>
       </el-table-column>
       <template #empty>
-        <el-image
-          class="vab-data-empty"
-          :src="require('@/assets/empty_images/data_empty.png')" />
+        <el-image class="vab-data-empty" :src="require('@/assets/empty_images/data_empty.png')" />
       </template>
     </el-table>
     <el-pagination
@@ -156,6 +96,16 @@
       setSelectRows(val) {
         this.selectRows = val
       },
+      reset() {
+        this.queryForm = {
+          pageNum: 1,
+          pageSize: 10,
+          prodCode: '',
+          prodClass: '',
+          prodName: '',
+        }
+      },
+
       handleEdit(row) {
         if (row.id) {
           this.$refs['edit'].showEdit(row)
@@ -163,6 +113,7 @@
           this.$refs['edit'].showEdit()
         }
       },
+
       handleDelete(row) {
         if (row.id) {
           this.$baseConfirm('你确定要删除当前项吗', null, async () => {
@@ -208,3 +159,8 @@
     },
   }
 </script>
+<style>
+  .el-form-item--small {
+    margin: 0 0 10px 0 !important;
+  }
+</style>