提交

src/views/base/distributor/components/DistrEdit.vue

@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
   <el-dialog
     :title="title"
     :visible.sync="dialogFormVisible"
@@ -48,8 +48,77 @@
       <el-button type="primary" @click="save">确 定</el-button>
     </template>
   </el-dialog>
-</template>
+</template> -->
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="handleClose">
+    <el-form ref="form" :model="form" :rules="rules">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="名称" prop="distName">
+            <el-input v-model="form.prodName" placeholder="请输入名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="助记名" prop="abbrName">
+            <el-input v-model="form.abbrName" placeholder="请输入助记名" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="说明" prop="distDesc">
+            <el-input v-model.trim="form.distDesc" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="负责人" prop="distBoss">
+            <el-input v-model.trim="form.distBoss" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="电话" prop="distBossPhone">
+            <el-input v-model.trim="form.distBossPhone" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="选择省份" prop="provinceDesc">
+            <el-select ref="optionRef" v-model="form.provinceDesc" placeholder="请选择" @change="selectDistrict">
+              <el-option v-for="item in district" :key="item.id" :label="item.distName" :value="item.id" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="省份" prop="provinceId" style="display: none">
+            <el-input v-model.trim="form.provinceId" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="销售人员" prop="businessScope">
+            <el-input v-model.trim="form.businessScope" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="业务范围" prop="distName">
+            <el-input v-model="form.prodName" placeholder="请输入名称" />
+          </el-form-item>
+        </el-col>
+      </el-row>
 
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          maxlength="500"
+          placeholder="请输入备注"
+          resize="none"
+          :rows="5"
+          show-word-limit
+          type="textarea" />
+      </el-form-item>
+    </el-form>
+    <span slot="footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
 <script>
   import distrApi from '@/api/distr'
   import '@riophae/vue-treeselect/dist/vue-treeselect.css'
@@ -61,12 +130,8 @@
           dist: [],
         },
         dist: {
-          distName: [
-            { required: true, trigger: 'blur', message: '请输入名称' },
-          ],
-          distBoss: [
-            { required: true, trigger: 'blur', message: '请输入负责人' },
-          ],
+          distName: [{ required: true, trigger: 'blur', message: '请输入名称' }],
+          distBoss: [{ required: true, trigger: 'blur', message: '请输入负责人' }],
           distBossPhone: [
             {
               pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
@@ -75,15 +140,9 @@
               required: true,
             },
           ],
-          businessScope: [
-            { required: true, trigger: 'blur', message: '请填写业务范围' },
-          ],
-          provinceDesc: [
-            { required: true, trigger: 'blur', message: '请选择省份' },
-          ],
-          belongSale: [
-            { required: true, trigger: 'blur', message: '请填写归属销售' },
-          ],
+          businessScope: [{ required: true, trigger: 'blur', message: '请填写业务范围' }],
+          provinceDesc: [{ required: true, trigger: 'blur', message: '请选择省份' }],
+          belongSale: [{ required: true, trigger: 'blur', message: '请填写归属销售' }],
         },
         //省份
         district: [],

src/views/base/distributor/index.vue

@@ -24,132 +24,58 @@
           <vab-query-form-left-panel :span="20">
             <el-form :inline="true" :model="queryForm" @submit.native.prevent>
               <el-form-item>
-                <el-input
-                  v-model.trim="queryForm.distCode"
-                  clearable
-                  placeholder="经销商编码" />
+                <el-input v-model.trim="queryForm.distCode" clearable placeholder="经销商编码" />
               </el-form-item>
               &nbsp;
               <el-form-item>
-                <el-input
-                  v-model.trim="queryForm.distName"
-                  clearable
-                  placeholder="经销商名称" />
+                <el-input v-model.trim="queryForm.distName" clearable placeholder="经销商名称" />
               </el-form-item>
               &nbsp;
               <el-form-item>
-                <el-input
-                  v-model.trim="queryForm.belongSale"
-                  clearable
-                  placeholder="所属销售" />
+                <el-input v-model.trim="queryForm.belongSale" clearable placeholder="所属销售" />
               </el-form-item>
               <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-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 :span="5">
-              <el-button
-                icon="el-icon-plus"
-                type="primary"
-                @click="handleEdit($event)">
-                新建
-              </el-button>
+              <el-button icon="el-icon-plus" type="primary" @click="handleEdit($event)">新建</el-button>
             </vab-query-form-left-panel>
           </vab-query-form-left-panel>
+          <vab-query-form-right-panel :span="29">
+            <el-button icon="el-icon-download" />
+            <table-tool :check-list.sync="checkList" :columns="columns" />
+          </vab-query-form-right-panel>
         </vab-query-form>
 
         <el-table
           v-loading="listLoading"
           border
           :data="list"
-          :height="height"
+          style="width: 100%; height: 500px"
           @selection-change="setSelectRows">
           <el-table-column
+            v-for="(item, index) in finallyColumns"
+            :key="index"
             align="center"
+            :label="item.label"
+            :prop="item.prop"
             show-overflow-tooltip
-            type="selection" />
-          <el-table-column
-            align="center"
-            label="经销商编码"
-            prop="distCode"
-            show-overflow-tooltip />
-          <el-table-column
-            align="center"
-            label="经销商名称"
-            prop="distName"
-            show-overflow-tooltip />
-          <el-table-column
-            align="center"
-            label="助记名"
-            prop="abbrName"
-            show-overflow-tooltip />
-          <!-- <el-table-column
-        align="center"
-        label="省级ID"
-        prop="parentId"
-        show-overflow-tooltip /> -->
-          <el-table-column
-            align="center"
-            label="所在省份"
-            prop="provinceDesc"
-            show-overflow-tooltip />
-          <!-- <template #default="{ row }">
-        {{ row.District.distName  }}
-      </template>
-      </el-table-column> -->
-          <el-table-column
-            align="center"
-            label="归属销售"
-            prop="belongSale"
-            show-overflow-tooltip />
-          <el-table-column
-            align="center"
-            label="业务范围"
-            prop="businessScope"
-            show-overflow-tooltip />
-          <el-table-column
-            align="center"
-            label="负责人"
-            prop="distBoss"
-            show-overflow-tooltip />
-          <el-table-column
-            align="center"
-            label="负责人电话"
-            prop="distBossPhone"
-            show-overflow-tooltip />
-          <el-table-column
-            align="center"
-            label="创建人"
-            prop="createdName"
-            show-overflow-tooltip />
-          <el-table-column
-            align="center"
-            label="创建时间"
-            prop="createdTime"
-            show-overflow-tooltip />
-
-          <el-table-column
-            align="center"
-            label="操作"
-            show-overflow-tooltip
-            width="85">
+            :sortable="item.sortable"
+            :width="item.width">
+            <template #default="{ row }">
+              <span>{{ row[item.prop] }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="操作" show-overflow-tooltip width="85">
             <template #default="{ row }">
               <el-button type="text" @click="handleEdit(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
@@ -169,9 +95,10 @@
 <script>
   import Edit from './components/DistrEdit'
   import distrApi from '@/api/distr'
+  import TableTool from '@/components/table/TableTool'
   export default {
     name: 'Distr',
-    components: { Edit },
+    components: { Edit, TableTool },
     data() {
       return {
         list: [],
@@ -184,6 +111,45 @@
           pageSize: 10,
           userName: '',
         },
+
+        checkList: [],
+        columns: [
+          {
+            label: '所在省份',
+            width: '100px',
+            prop: 'provinceDesc',
+            sortable: false,
+          },
+          {
+            label: '归属销售',
+            width: 'auto',
+            prop: 'belongSale',
+            sortable: false,
+            disableCheck: true,
+          },
+          {
+            label: '业务范围',
+            width: 'auto',
+            prop: 'businessScope',
+            sortable: false,
+            disableCheck: true,
+          },
+          {
+            label: '负责人',
+            width: 'auto',
+            prop: 'distBoss',
+            sortable: false,
+            disableCheck: true,
+          },
+          {
+            label: '归属销售',
+            width: 'auto',
+            prop: 'belongSale',
+            sortable: false,
+            disableCheck: true,
+          },
+        ],
+
         deptOptions: undefined,
         defaultProps: {
           id: 'id',
@@ -197,6 +163,10 @@
       height() {
         return this.$baseTableHeight(1)
       },
+      finallyColumns() {
+        console.log('finallyColums')
+        return this.columns.filter((item) => this.checkList.includes(item.label))
+      },
     },
     created() {
       this.fetchData()
@@ -296,9 +266,7 @@
     color: #007bff;
   }
 
-  .el-tree--highlight-current
-    .el-tree-node.is-current
-    > .el-tree-node__content {
+  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
     /*current选中的样式 */
     color: #4d95fd;
     font-weight: bold;

src/views/base/region/index.vue

@@ -23,12 +23,7 @@
     <el-button  @click="getCheckedNodes($event)">添加区域</el-button>
   </div> -->
         <vab-query-form-left-panel :span="2">
-          <el-button
-            icon="el-icon-plus"
-            type="primary"
-            @click="getCheckedNodes($event)">
-            添加区域
-          </el-button>
+          <el-button icon="el-icon-plus" type="primary" @click="getCheckedNodes($event)">添加区域</el-button>
         </vab-query-form-left-panel>
       </el-col>
       <el-col :span="19" :xs="27">
@@ -36,25 +31,16 @@
           <vab-query-form-left-panel :span="20">
             <el-form :inline="true" :model="queryForm" @submit.native.prevent>
               <el-form-item style="letter-spacing: 12px">
-                <el-input
-                  v-model.trim="queryForm.custCode"
-                  clearable
-                  placeholder="客户编码" />
+                <el-input v-model.trim="queryForm.custCode" clearable placeholder="客户编码" />
               </el-form-item>
               &nbsp;
 
               <el-form-item>
-                <el-input
-                  v-model.trim="queryForm.custName"
-                  clearable
-                  placeholder="客户名称" />
+                <el-input v-model.trim="queryForm.custName" clearable placeholder="客户名称" />
               </el-form-item>
               &nbsp;
               <el-form-item label="" prop="custIndustry">
-                <el-select
-                  v-model="custIndustry"
-                  placeholder="请选择客户行业"
-                  style="width: 100%">
+                <el-select v-model="custIndustry" placeholder="请选择客户行业" style="width: 100%">
                   <el-option
                     v-for="item in industryOptions"
                     :key="item.value"
@@ -63,29 +49,19 @@
                 </el-select>
               </el-form-item>
               <el-form-item style="margin-right: 5px">
-                <el-button
-                  icon="el-icon-search"
-                  type="primary"
-                  @click="queryData">
-                  查询
-                </el-button>
-                <el-button icon="el-icon-refresh-right" @click="reset">
-                  重置
-                </el-button>
+                <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 :span="5">
-              <el-button
-                icon="el-icon-plus"
-                type="primary"
-                @click="handleEdit($event)">
-                添加
-              </el-button>
+            <vab-query-form-left-panel :span="15">
+              <el-button icon="el-icon-plus" type="primary" @click="handleEdit($event)">添加</el-button>
             </vab-query-form-left-panel>
           </vab-query-form-left-panel>
+          <vab-query-form-right-panel :span="29">
+            <el-button icon="el-icon-download" />
+            <table-tool :check-list.sync="checkList" :columns="columns" />
+          </vab-query-form-right-panel>
         </vab-query-form>
-
         <el-table
           v-loading="listLoading"
           border
@@ -93,43 +69,26 @@
           style="width: 100%; height: 500px"
           @selection-change="setSelectRows">
           <el-table-column
+            v-for="(item, index) in finallyColumns"
+            :key="index"
             align="center"
+            :label="item.label"
+            :prop="item.prop"
             show-overflow-tooltip
-            type="selection" />
-          <el-table-column
-            align="center"
-            label="省份"
-            prop="distName"
-            show-overflow-tooltip />
-          <el-table-column
-            align="center"
-            label="客户数量"
-            prop="count"
-            show-overflow-tooltip />
-          <el-table-column
-            align="center"
-            label="创建人"
-            prop="createdName"
-            show-overflow-tooltip />
-          <el-table-column
-            align="center"
-            label="创建时间"
-            prop="createdTime"
-            show-overflow-tooltip />
-          <el-table-column
-            align="center"
-            label="操作"
-            show-overflow-tooltip
-            width="85">
+            :sortable="item.sortable"
+            :width="item.width">
+            <template #default="{ row }">
+              <span>{{ row[item.prop] }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="操作" show-overflow-tooltip width="85">
             <template #default="{ row }">
               <el-button type="text" @click="handleEdit(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
@@ -152,10 +111,10 @@
   import Edit from './components/RegionEdit'
   import RegEdit from './components/RegEdit'
   import regionApi from '@/api/base/region/region'
-
+  import TableTool from '@/components/table/TableTool'
   export default {
     name: 'Distr',
-    components: { Edit, RegEdit },
+    components: { Edit, RegEdit, TableTool },
     data() {
       return {
         current: '',
@@ -180,6 +139,23 @@
         treeDefaultExpandAll: true,
         regionId: 0,
         industryOptions: [], //客户行业
+
+        checkList: [],
+        columns: [
+          {
+            label: '省份',
+            width: '100px',
+            prop: 'distName',
+            sortable: false,
+          },
+          {
+            label: '客户数量',
+            width: 'auto',
+            prop: 'count',
+            sortable: false,
+            disableCheck: true,
+          },
+        ],
       }
     },
 
@@ -187,6 +163,10 @@
       height() {
         return this.$baseTableHeight(10)
       },
+      finallyColumns() {
+        console.log('finallyColums')
+        return this.columns.filter((item) => this.checkList.includes(item.label))
+      },
     },
     watch: {
       filterText(val) {
@@ -286,6 +266,7 @@
         this.fetchData()
       },
       queryData() {
+        console.log('ffff')
         this.queryForm.pageNum = 1
         this.fetchData()
       },
@@ -314,9 +295,7 @@
     color: #007bff;
   }
 
-  .el-tree--highlight-current
-    .el-tree-node.is-current
-    > .el-tree-node__content {
+  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
     /*current选中的样式 */
     color: #4d95fd;
     font-weight: bold;
@@ -326,9 +305,7 @@
     margin-right: 3px;
   }
 
-  .vab-query-form[data-v-64063760]
-    .el-form-item:first-child
-    .el-form-item--small {
+  .vab-query-form[data-v-64063760] .el-form-item:first-child .el-form-item--small {
     margin: 0 10px 10px 0 !important;
   }
 </style>

src/views/customer/components/Allocate.vue

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

src/views/product/components/ProductEdit.vue

@@ -0,0 +1,168 @@
+<!-- <template> -->
+<!-- <el-dialog
+    :title="title"
+    :visible.sync="dialogFormVisible"
+    @close="close">
+    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
+      <el-form-item label="产品编码" prop="prodCode">
+        <el-input v-model.trim="form.prodCode" style="width:150px;"/>
+      </el-form-item>
+      <el-form-item label="产品名称" prop="prodName">
+        <el-input v-model.trim="form.prodName" />
+      </el-form-item>
+      <el-form-item label="产品分类" prop="prodClass">
+        <el-input v-model.trim="form.prodClass" />
+      </el-form-item>
+      <el-form-item label="成交价" prop="guidPrice">
+        <el-input v-model.trim="form.guidPrice" />
+      </el-form-item>
+      <el-form-item label="经销商价" prop="distPrice">
+        <el-input v-model.trim="form.distPrice" />
+      </el-form-item>
+      <el-form-item label="签约代理价" prop="agentPrice">
+        <el-input v-model.trim="form.agentPrice" />
+      </el-form-item>
+      <el-form-item label="市场报价" prop="marketPrice">
+        <el-input v-model.trim="form.marketPrice" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model.trim="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </template>
+  </el-dialog>
+</template> -->
+<template>
+  <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="handleClose">
+    <el-form ref="form" :model="form" :rules="rules">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="产品名称" prop="prodName">
+            <el-input v-model="form.prodName" placeholder="请输入产品名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="产品分类" prop="prodClass">
+            <el-input v-model="form.prodClass" placeholder="请输入产品分类" />
+            <!-- <el-select v-model="form.prodClass" placeholder="请选择客户行业" style="width: 100%">
+                        <el-option v-for="item in industryOptions" :key="item.value" :label="item.value" :value="item.value" />
+                      </el-select> -->
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="成交价" prop="distPrice">
+            <el-input v-model.trim="form.distPrice" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="经销商价" prop="guidPrice">
+            <el-input v-model.trim="form.guidPrice" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="签约代理价" prop="agentPrice">
+            <el-input v-model.trim="form.agentPrice" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="市场报价" prop="marketPrice">
+            <el-input v-model.trim="form.marketPrice" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          maxlength="500"
+          placeholder="请输入备注"
+          resize="none"
+          :rows="5"
+          show-word-limit
+          type="textarea" />
+      </el-form-item>
+    </el-form>
+    <span slot="footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+<script>
+  import productApi from '@/api/product'
+  export default {
+    //name: 'UserEdit',
+    data() {
+      return {
+        form: {
+          roles: [],
+        },
+        rules: {
+          prodName: [{ required: true, trigger: 'blur', message: '请输入名称' }],
+          prodClass: [{ required: true, trigger: 'blur', message: '请输入分类' }],
+          guidPrice: [{ required: true, trigger: 'blur', message: '请输入建议成交价' }],
+          distPrice: [{ required: true, trigger: 'blur', message: '请输入经销商价' }],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = '添加'
+        } else {
+          this.title = '编辑'
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        this.$refs['form'].resetFields()
+        this.form = this.$options.data().form
+        this.dialogFormVisible = false
+      },
+      handleClose() {
+        this.Form = {
+          prodCode: '', //
+          prodClass: '', //
+          guidPrice: '', //
+          distPrice: '', //
+          custStatus: '', //
+          agentPrice: '', //
+          marketPrice: '', //
+          remark: '', //
+        }
+        this.$refs.editForm.resetFields()
+      },
+
+      save() {
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            if (this.form.id) {
+              this.form.guidPrice = parseFloat(this.form.guidPrice).toFixed(2)
+              this.form.distPrice = parseFloat(this.form.distPrice).toFixed(2)
+              this.form.agentPrice = parseFloat(this.form.agentPrice).toFixed(2)
+              this.form.marketPrice = parseFloat(this.form.marketPrice).toFixed(2)
+              console.log(this.form)
+              const { msg } = await productApi.doEdit(this.form)
+              this.$baseMessage(msg, 'success', 'vab-hey-message-success')
+            } else {
+              this.form.guidPrice = parseFloat(this.form.guidPrice).toFixed(2)
+              console.log(this.form)
+              const { msg } = await productApi.doAdd(this.form)
+              this.$baseMessage(msg, 'success', 'vab-hey-message-success')
+            }
+            this.$emit('fetch-data')
+            this.close()
+          }
+        })
+      },
+    },
+  }
+</script>

src/views/product/components/UserEdit.vue

@@ -1,111 +0,0 @@
-<template>
-  <el-dialog
-    :title="title"
-    :visible.sync="dialogFormVisible"
-    width="500px"
-    @close="close">
-    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
-      <el-form-item label="产品编码" prop="prodCode">
-        <el-input v-model.trim="form.prodCode" />
-      </el-form-item>
-      <el-form-item label="产品名称" prop="prodName">
-        <el-input v-model.trim="form.prodName" />
-      </el-form-item>
-      <el-form-item label="产品分类" prop="prodClass">
-        <el-input v-model.trim="form.prodClass" />
-      </el-form-item>
-      <el-form-item label="成交价" prop="guidPrice">
-        <el-input v-model.trim="form.guidPrice" />
-      </el-form-item>
-      <el-form-item label="经销商价" prop="distPrice">
-        <el-input v-model.trim="form.distPrice" />
-      </el-form-item>
-      <el-form-item label="签约代理价" prop="agentPrice">
-        <el-input v-model.trim="form.agentPrice" />
-      </el-form-item>
-      <el-form-item label="市场报价" prop="marketPrice">
-        <el-input v-model.trim="form.marketPrice" />
-      </el-form-item>
-      <el-form-item label="备注" prop="remark">
-        <el-input v-model.trim="form.remark" type="textarea" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button @click="close">取 消</el-button>
-      <el-button type="primary" @click="save">确 定</el-button>
-    </template>
-  </el-dialog>
-</template>
-
-<script>
-  import productApi from '@/api/product'
-  export default {
-    name: 'UserEdit',
-    data() {
-      return {
-        form: {
-          roles: [],
-        },
-        rules: {
-          prodCode: [
-            { required: true, trigger: 'blur', message: '请输入编码' },
-          ],
-          prodName: [
-            { required: true, trigger: 'blur', message: '请输入名称' },
-          ],
-          prodClass: [
-            { required: true, trigger: 'blur', message: '请输入分类' },
-          ],
-          guidPrice: [
-            { required: true, trigger: 'blur', message: '请输入建议成交价' },
-          ],
-          distPrice: [
-            { required: true, trigger: 'blur', message: '请输入经销商价' },
-          ],
-        },
-        title: '',
-        dialogFormVisible: false,
-      }
-    },
-    methods: {
-      showEdit(row) {
-        if (!row) {
-          this.title = '添加'
-        } else {
-          this.title = '编辑'
-          this.form = Object.assign({}, row)
-        }
-        this.dialogFormVisible = true
-      },
-      close() {
-        this.$refs['form'].resetFields()
-        this.form = this.$options.data().form
-        this.dialogFormVisible = false
-      },
-      save() {
-        this.$refs['form'].validate(async (valid) => {
-          if (valid) {
-            if (this.form.id) {
-              this.form.guidPrice = parseFloat(this.form.guidPrice).toFixed(2)
-              this.form.distPrice = parseFloat(this.form.distPrice).toFixed(2)
-              this.form.agentPrice = parseFloat(this.form.agentPrice).toFixed(2)
-              this.form.marketPrice = parseFloat(this.form.marketPrice).toFixed(
-                2
-              )
-              console.log(this.form)
-              const { msg } = await productApi.doEdit(this.form)
-              this.$baseMessage(msg, 'success', 'vab-hey-message-success')
-            } else {
-              this.form.guidPrice = parseFloat(this.form.guidPrice).toFixed(2)
-              console.log(this.form)
-              const { msg } = await productApi.doAdd(this.form)
-              this.$baseMessage(msg, 'success', 'vab-hey-message-success')
-            }
-            this.$emit('fetch-data')
-            this.close()
-          }
-        })
-      },
-    },
-  }
-</script>

src/views/product/detail.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="detail">
-    <el-row :gutter="10">
-      <el-col :span="16">
+    <el-row :gutter="30">
+      <el-col :span="25">
         <div class="title">
           <p>产品名称</p>
           <h3>
@@ -9,67 +9,35 @@
           </h3>
         </div>
         <header>
-          <el-descriptions :colon="false" :column="6" direction="vertical">
+          <el-descriptions :colon="false" :column="8" 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.prodCode }}
+            </el-descriptions-item>
             <el-descriptions-item content-class-name="my-content" label="建议成交价" label-class-name="my-label">
-              {{ detail.guidPrice }}
+              {{ parseFloat(parseInt(detail.guidPrice).toFixed(2)).toLocaleString() }}¥
             </el-descriptions-item>
             <el-descriptions-item content-class-name="my-content" label="经销商价" label-class-name="my-label">
-              {{ detail.distPrice }}
+              {{ parseFloat(parseInt(detail.distPrice).toFixed(2)).toLocaleString() }}¥
             </el-descriptions-item>
             <el-descriptions-item content-class-name="my-content" label="签约代理价" label-class-name="my-label">
-              {{ detail.agentPrice }}
+              {{ parseFloat(parseInt(detail.agentPrice).toFixed(2)).toLocaleString() }}¥
             </el-descriptions-item>
             <el-descriptions-item content-class-name="my-content" label="市场报价" label-class-name="my-label">
-              {{ detail.marketPrice }}
+              {{ parseFloat(parseInt(detail.marketPrice).toFixed(2)).toLocaleString() }}¥
             </el-descriptions-item>
             <el-descriptions-item content-class-name="my-content" label="创建人" label-class-name="my-label">
               {{ detail.createdName }}
             </el-descriptions-item>
+            <el-descriptions-item content-class-name="my-content" label="创建时间" label-class-name="my-label">
+              {{ detail.createdTime }}
+            </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>
 
@@ -77,19 +45,22 @@
   import { mapGetters } from 'vuex'
   import api from '@/api/product'
   export default {
-    name: 'CustomerDetail',
+    name: 'Detail',
     components: {},
     data() {
       return {
         id: '',
         privateCus: '',
+        list: [],
         detail: {
           prodClass: '', //产品分类
+          prodCode: '', //产品编码
           guidPrice: '', //建议成交价
           distPrice: '', //经销商价
           agentPrice: '', //签约代理价
           marketPrice: '', //市场报价
           createdName: '', //创建人
+          createdTime: '', //创建时间
         },
       }
     },
@@ -107,12 +78,9 @@
     },
     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
+        Promise.all([api.doGetEntityById({ id: parseInt(this.id) })]).then(([detail]) => {
+          console.log('detail', detail)
+          this.detail = detail.data.list
         })
       },
 
@@ -177,7 +145,7 @@
       ::v-deep .my-label {
         font-size: 14px;
         font-weight: 600;
-        color: #fff;
+        color: #1d66dc;
       }
 
       ::v-deep .my-content {

src/views/product/index.vue

@@ -1,46 +1,67 @@
 <template>
   <div class="user-management-container">
-    <vab-query-form-left-panel :span="18">
-      <el-form :inline="true" :model="queryForm" @submit.native.prevent>
-        <el-col :span="5">
+    <vab-query-form>
+      <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-form-item>
+          </el-col>
+          <el-col :span="5">
+            <el-form-item>
+              <el-input v-model.trim="queryForm.prodClass" clearable placeholder="产品类别" />
+            </el-form-item>
+          </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-input v-model.trim="queryForm.prodCode" clearable placeholder="产品编码" />
+            <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-col>
-        <el-col :span="5">
-          <el-form-item>
-            <el-input v-model.trim="queryForm.prodClass" clearable placeholder="产品类别" />
-          </el-form-item>
-        </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-form>
+      </vab-query-form-left-panel>
+
+      <vab-query-form-left-panel :span="15">
+        <el-button icon="el-icon-plus" type="primary" @click="handleEdit($event)">添加</el-button>
+      </vab-query-form-left-panel>
+      <vab-query-form-right-panel :span="29">
+        <el-button icon="el-icon-download" />
+        <table-tool :check-list.sync="checkList" :columns="columns" />
+      </vab-query-form-right-panel>
+    </vab-query-form>
     <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="产品类别" 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
+        v-for="(item, index) in finallyColumns"
+        :key="index"
+        align="center"
+        :label="item.label"
+        :prop="item.prop"
+        show-overflow-tooltip
+        :sortable="item.sortable"
+        :width="item.width">
+        <template #default="{ row }">
+          <!-- <span v-if="item.prop === 'prodName'">
+        {{ row.prodName }}
+      </span> -->
+          <el-button v-if="item.prop === 'prodName'" style="font-size: 14px" type="text" @click="handleDetail(row)">
+            {{ row.prodName }}
+          </el-button>
+          <span v-if="item.prop === 'prodClass'">
+            {{ row.prodClass }}
+          </span>
+          <span v-if="item.prop === 'prodCode'">
+            {{ row.prodCode }}
+          </span>
+          <span v-if="item.prop === 'agentPrice'">{{ parseFloat(row.agentPrice.toFixed(2)).toLocaleString() }}¥</span>
+          <span v-if="item.prop === 'distPrice'">{{ parseFloat(row.distPrice.toFixed(2)).toLocaleString() }}¥</span>
+          <span v-if="item.prop === 'guidPrice'">{{ parseFloat(row.guidPrice.toFixed(2)).toLocaleString() }}¥</span>
+          <span v-if="item.prop === 'marketPrice'">{{ parseFloat(row.marketPrice.toFixed(2)).toLocaleString() }}¥</span>
+        </template>
+      </el-table-column>
       <el-table-column align="center" label="操作" show-overflow-tooltip width="95">
         <template #default="{ row }">
           <el-button type="text" @click="handleEdit(row)">编辑</el-button>
@@ -65,11 +86,11 @@
 </template>
 
 <script>
-  import Edit from './components/UserEdit'
+  import Edit from './components/ProductEdit'
   import productApi from '@/api/product'
+  import TableTool from '@/components/table/TableTool'
   export default {
-    name: 'User',
-    components: { Edit },
+    components: { Edit, TableTool },
     data() {
       return {
         list: [],
@@ -82,12 +103,62 @@
           pageSize: 10,
           userName: '',
         },
+        checkList: [],
+        columns: [
+          {
+            label: '产品名称',
+            width: '120px',
+            prop: 'prodName',
+            sortable: false,
+          },
+          {
+            label: '产品类别',
+            width: 'auto',
+            prop: 'prodClass',
+            sortable: false,
+            disableCheck: true,
+          },
+          {
+            label: '产品型号',
+            width: 'auto',
+            prop: 'prodCode',
+            sortable: false,
+          },
+          {
+            label: '签约代理价',
+            width: 'auto',
+            prop: 'agentPrice',
+            sortable: false,
+          },
+          {
+            label: '经销商价',
+            width: 'auto',
+            prop: 'distPrice',
+            sortable: true,
+          },
+          {
+            label: '建议成交价',
+            width: 'auto',
+            prop: 'guidPrice',
+            sortable: true,
+          },
+          {
+            label: '市场报价',
+            width: 'auto',
+            prop: 'marketPrice',
+            sortable: true,
+          },
+        ],
       }
     },
     computed: {
       height() {
         return this.$baseTableHeight(1)
       },
+      finallyColumns() {
+        console.log('finallyColums')
+        return this.columns.filter((item) => this.checkList.includes(item.label))
+      },
     },
     created() {
       this.fetchData()
@@ -105,6 +176,15 @@
           prodName: '',
         }
       },
+      //详情
+      handleDetail(row) {
+        this.$router.push({
+          path: '/product/detail',
+          query: {
+            id: row.id,
+          },
+        })
+      },
 
       handleEdit(row) {
         if (row.id) {