Merge branch 'develop' of http://code.dashoo.cn/chengjian/opms_frontend into develop

.env

@@ -5,7 +5,7 @@ VUE_APP_TENANT=default
 # 登录验证微服务名称
 VUE_APP_AdminPath  = dashoo.opms.admin-0.0.1
 VUE_APP_ParentPath = dashoo.opms.parent-0.0.1
-VUE_APP_MicroSrvProxy_API=http://127.0.0.1:9981/
+VUE_APP_MicroSrvProxy_API=http://192.168.0.81:9981/
 SSO_LOGIN=''
 SSO_HREF=''
 

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/api/work/index.js

@@ -5,4 +5,17 @@ export default {
   getList(query) {
     return micro_request.postRequest(basePath, 'WorkOrder', 'GetList', query)
   },
+  //导出
+  deriveList(query) {
+    return micro_request.postRequest(basePath, 'WorkOrder', 'DeriveList', query)
+  },
+  //详情
+  getDetail(query) {
+    return micro_request.postRequest(
+      basePath,
+      'WorkOrder',
+      'GetEntityById',
+      query
+    )
+  },
 }

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

@@ -27,7 +27,7 @@
       </el-col>
       <el-col :span="18">
         <vab-query-form>
-          <vab-query-form-left-panel :span="18">
+          <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="经销商编码" />
@@ -38,34 +38,45 @@
               <el-form-item>
                 <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-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>
           </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"
+          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
+            :sortable="item.sortable"
+            :width="item.width">
+            <template #default="{ row }">
+              <span>{{ row[item.prop] }}</span>
+            </template>
+          </el-table-column>
+
           <vab-query-form-right-panel :span="6">
             <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
             <el-button icon="el-icon-plus" type="primary" @click="handleEdit($event)">新建</el-button>
           </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="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">
             <template #default="{ row }">
@@ -94,9 +105,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: [],
@@ -109,6 +121,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',
@@ -122,6 +173,10 @@
       height() {
         return this.$baseTableHeight(1)
       },
+      finallyColumns() {
+        console.log('finallyColums')
+        return this.columns.filter((item) => this.checkList.includes(item.label))
+      },
     },
     created() {
       this.fetchData()
@@ -196,21 +251,36 @@
         this.total = total
         this.listLoading = false
       },
+      reset() {
+        ;(this.queryForm = {
+          pageNum: 1,
+          pageSize: 10,
+          distCode: '',
+          distName: '',
+          belongSale: '',
+        }),
+          this.fetchData()
+      },
     },
   }
 </script>
-<style lang="scss" scoped>
-  $base: '.user-management';
-  #{$base}-container {
-    > .el-row {
-      height: calc(100vh - 60px - 50px - 12px * 2 - 40px - 24px);
-    }
-    .tree-container {
-      height: calc(100% - 30px);
-      .el-tree {
-        height: 100%;
-        overflow-y: auto;
-      }
-    }
+
+<style>
+  .el-tree-node:focus > .el-tree-node__content {
+    /*设置选中的样式 */
+    background-color: #dde9ff !important;
+  }
+
+  .el-tree-node__content:hover {
+    /*设置鼠标飘过的颜色 */
+    background: #eaf9ff !important;
+    color: #007bff;
+  }
+
+  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+    /*current选中的样式 */
+    color: #4d95fd;
+    font-weight: bold;
+    background-color: #dde9ff !important;
   }
 </style>

src/views/base/region/index.vue

@@ -1,12 +1,9 @@
 <template>
   <div class="user-management-container">
-    <el-row :gutter="20" type="flex">
-      <el-col :span="6">
+    <el-row :gutter="20">
+      <el-col :span="5" :xs="24">
         <div class="head-container" style="margin-bottom: 5px">
           <el-input v-model="filterText" placeholder="输入关键字进行过滤" />
-          <el-button icon="el-icon-plus" style="margin-top: 10px" type="primary" @click="getCheckedNodes($event)">
-            添加区域
-          </el-button>
           <el-tree
             ref="tree"
             class="filter-tree"
@@ -17,14 +14,7 @@
             highlight-current
             node-key="id"
             :props="defaultProps"
-            @node-click="handleNodeClick">
-            <span slot-scope="{ node }" class="custom-tree-node">
-              <span>{{ node.label }}</span>
-              <span>
-                <i class="el-icon-more"></i>
-              </span>
-            </span>
-          </el-tree>
+            @node-click="handleNodeClick" />
           <!-- <el-tree ref="tree" :data="deptOptions" node-key="id" 
           :filter-node-method="filterNode" :props="defaultProps"
           @node-click="handleNodeClick" /> -->
@@ -32,40 +22,65 @@
         <!-- <div class="buttons">
     <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>
+        </vab-query-form-left-panel>
       </el-col>
-      <el-col :span="18">
+      <el-col :span="19" :xs="27">
         <vab-query-form>
-          <vab-query-form-left-panel :span="18">
+          <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-form-item>
+              &nbsp;
+
               <el-form-item>
                 <el-input v-model.trim="queryForm.custName" clearable placeholder="客户名称" />
               </el-form-item>
-              <el-form-item>
-                <el-input v-model.trim="queryForm.custIndustry" clearable placeholder="客户行业" />
+              &nbsp;
+              <el-form-item label="" prop="custIndustry">
+                <el-select v-model="custIndustry" 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-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-form-item>
             </el-form>
+            <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="6">
-            <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
-            <el-button icon="el-icon-plus" type="primary" @click="handleEdit($event)">添加</el-button>
+          <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="calc(100% - 52px - 43px)"
-          style="width: 100%"
+          style="width: 100%; height: 500px"
           @selection-change="setSelectRows">
-          <el-table-column align="center" 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
+            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>{{ 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>
@@ -96,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: '',
@@ -109,6 +124,7 @@
         total: 0,
         selectRows: '',
         filterText: '',
+        custIndustry: '', // 客户行业  (没数据)
         queryForm: {
           pageNum: 1,
           pageSize: 10,
@@ -122,6 +138,24 @@
         },
         treeDefaultExpandAll: true,
         regionId: 0,
+        industryOptions: [], //客户行业
+
+        checkList: [],
+        columns: [
+          {
+            label: '省份',
+            width: '100px',
+            prop: 'distName',
+            sortable: false,
+          },
+          {
+            label: '客户数量',
+            width: 'auto',
+            prop: 'count',
+            sortable: false,
+            disableCheck: true,
+          },
+        ],
       }
     },
 
@@ -129,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) {
@@ -138,8 +176,25 @@
     created() {
       this.fetchData()
       this.getRegion()
+      this.getOptions()
     },
     methods: {
+      reset() {
+        this.queryForm = {
+          pageNum: 1,
+          pageSize: 10,
+          custCode: '',
+          custName: '',
+          custIndustry: '',
+        }
+      },
+      getOptions() {
+        Promise.all([this.getDicts('CustomerIndustry')])
+          .then(([industry]) => {
+            this.industryOptions = industry.data.values || []
+          })
+          .catch((err) => console.log(err))
+      },
       async getRegion() {
         const { data: data } = await regionApi.getRegion({})
         var first_id = data.list[0].id
@@ -211,9 +266,11 @@
         this.fetchData()
       },
       queryData() {
+        console.log('ffff')
         this.queryForm.pageNum = 1
         this.fetchData()
       },
+
       async fetchData() {
         this.listLoading = true
         const {
@@ -226,18 +283,29 @@
     },
   }
 </script>
-<style lang="scss" scoped>
-  $base: '.user-management';
-  #{$base}-container {
-    > .el-row {
-      height: calc(100vh - 60px - 50px - 12px * 2 - 40px - 24px);
-    }
-    .head-container {
-      height: calc(100% - 5px);
-      .el-tree {
-        height: calc(100% - 74px);
-        overflow-y: auto;
-      }
-    }
+<style>
+  .el-tree-node:focus > .el-tree-node__content {
+    /*设置选中的样式 */
+    background-color: #dde9ff !important;
+  }
+
+  .el-tree-node__content:hover {
+    /*设置鼠标飘过的颜色 */
+    background: #eaf9ff !important;
+    color: #007bff;
+  }
+
+  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+    /*current选中的样式 */
+    color: #4d95fd;
+    font-weight: bold;
+    background-color: #dde9ff !important;
+  }
+  .el-form-item__content {
+    margin-right: 3px;
+  }
+
+  .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

@@ -16,7 +16,7 @@
       </el-form-item>
     </el-form>
     <span slot="footer">
-      <el-button size="mini" type="primary" @click="handleSubmit">保存</el-button>
+      <el-button size="mini" type="primary">保存</el-button>
       <el-button size="mini" @click="visible = false">取消</el-button>
     </span>
     <!--    <Transfer ref="transfer" />-->
@@ -27,8 +27,7 @@
 <script>
   // import Transfer from './Transfer.vue'
   import SelectUser from '@/components/select/SelectUser'
-  import api from '@/api/customer'
-  import to from 'await-to-js'
+
   export default {
     components: {
       // Transfer,
@@ -57,8 +56,6 @@
         allocate: [],
         data: generateData(),
         options: [],
-        ids: [],
-        userList: [],
       }
     },
     methods: {
@@ -68,20 +65,7 @@
         this.$refs.selectUser.open()
       },
       selectUser(userList) {
-        this.userList = userList
-        this.form.allocate = userList.map((item) => item.userName).join()
-      },
-      async handleSubmit() {
-        let params = {
-          salesId: this.userList[0].id,
-          ids: this.ids,
-          salesName: this.userList[0].userName,
-        }
-        const [err, res] = await to(api.receiveCustomer(params))
-        if (err) return
-        this.$message.success(res.msg)
-        this.visible = false
-        this.$emit('refresh')
+        console.log(userList)
       },
     },
   }

src/views/customer/detail.vue

@@ -350,6 +350,7 @@
           for (const item of keys) {
             records[item] = obj[item]
           }
+
           this.records = records
         }
       },

src/views/customer/list.vue

@@ -62,6 +62,21 @@
       height="calc(100vh - 394px)"
       @selection-change="setSelectRows">
       <el-table-column align="center" show-overflow-tooltip type="selection" />
+
+      <el-table-column align="center" label="客户编码" prop="custCode" />
+      <el-table-column align="center" label="客户名称" prop="custName" />
+      <el-table-column align="center" label="助记名" prop="abbrName" />
+      <el-table-column align="center" label="所在地区" prop="custLocation" />
+
+      <el-table-column align="center" label="客户行业" prop="custIndustry" />
+
+      <el-table-column align="center" label="客户级别" prop="custLevel" />
+      <el-table-column align="center" label="客户状态" prop="custStatus">
+        <template slot-scope="scope">
+          {{ scope.row.custStatus == 10 ? '正常' : '异常' }}
+        </template>
+      </el-table-column>
+
       <el-table-column
         v-for="(item, index) in finallyColumns"
         :key="index"

src/views/customer/openSea.vue

@@ -347,6 +347,7 @@
       handleReceive() {
         if (!this.selectRows.length) return this.$message.warning('请选择客户')
         const arr = this.selectRows.map((item) => item.id)
+
         this.$confirm('确认领取客户?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
@@ -370,6 +371,18 @@
               this.fetchData()
             }
           })
+
+          .then(async () => {
+            const [err, res] = await to(api.receiveCustomer({ ids: arr, salesId: 1 }))
+            if (err) return
+            if (res.code == 200) {
+              this.$message({
+                type: 'success',
+                message: '领取成功!',
+              })
+            }
+          })
+
           .catch((err) => console.log(err))
       },
     },

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

@@ -0,0 +1,390 @@
+<template>
+  <div class="detail">
+    <el-row :gutter="30">
+      <el-col :span="25">
+        <div class="title">
+          <p>产品名称</p>
+          <h3>
+            {{ detail.prodName }}
+          </h3>
+        </div>
+        <header>
+          <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">
+              {{ parseFloat(parseInt(detail.guidPrice).toFixed(2)).toLocaleString() }}¥
+            </el-descriptions-item>
+            <el-descriptions-item content-class-name="my-content" label="经销商价" label-class-name="my-label">
+              {{ parseFloat(parseInt(detail.distPrice).toFixed(2)).toLocaleString() }}¥
+            </el-descriptions-item>
+            <el-descriptions-item content-class-name="my-content" label="签约代理价" label-class-name="my-label">
+              {{ parseFloat(parseInt(detail.agentPrice).toFixed(2)).toLocaleString() }}¥
+            </el-descriptions-item>
+            <el-descriptions-item content-class-name="my-content" label="市场报价" label-class-name="my-label">
+              {{ 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-row>
+  </div>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex'
+  import api from '@/api/product'
+  export default {
+    name: 'Detail',
+    components: {},
+    data() {
+      return {
+        id: '',
+        privateCus: '',
+        list: [],
+        detail: {
+          prodClass: '', //产品分类
+          prodCode: '', //产品编码
+          guidPrice: '', //建议成交价
+          distPrice: '', //经销商价
+          agentPrice: '', //签约代理价
+          marketPrice: '', //市场报价
+          createdName: '', //创建人
+          createdTime: '', //创建时间
+        },
+      }
+    },
+    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({ id: parseInt(this.id) })]).then(([detail]) => {
+          console.log('detail', detail)
+          this.detail = detail.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: #1d66dc;
+      }
+
+      ::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,76 @@
 <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">
+      <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-form-item>
-          <el-form-item>
-            <el-button icon="el-icon-search" type="primary" @click="queryData">
-              查询
-            </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>
+
+      <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="序号" 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 v-loading="listLoading" border :data="list" :height="height" @selection-change="setSelectRows">
       <el-table-column
+        v-for="(item, index) in finallyColumns"
+        :key="index"
         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="操作"
+        :label="item.label"
+        :prop="item.prop"
         show-overflow-tooltip
-        width="85">
+        :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>
+          <!-- <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
@@ -125,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: [],
@@ -142,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()
@@ -156,6 +167,25 @@
       setSelectRows(val) {
         this.selectRows = val
       },
+      reset() {
+        this.queryForm = {
+          pageNum: 1,
+          pageSize: 10,
+          prodCode: '',
+          prodClass: '',
+          prodName: '',
+        }
+      },
+      //详情
+      handleDetail(row) {
+        this.$router.push({
+          path: '/product/detail',
+          query: {
+            id: row.id,
+          },
+        })
+      },
+
       handleEdit(row) {
         if (row.id) {
           this.$refs['edit'].showEdit(row)
@@ -163,6 +193,7 @@
           this.$refs['edit'].showEdit()
         }
       },
+
       handleDelete(row) {
         if (row.id) {
           this.$baseConfirm('你确定要删除当前项吗', null, async () => {
@@ -208,3 +239,8 @@
     },
   }
 </script>
+<style>
+  .el-form-item--small {
+    margin: 0 0 10px 0 !important;
+  }
+</style>

src/views/system/config/components/ConfigEdit.vue

@@ -1,9 +1,5 @@
 <template>
-  <el-dialog
-    :title="title"
-    :visible.sync="dialogFormVisible"
-    width="500px"
-    @close="close">
+  <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="title">
         <el-input v-model="form.title" />

src/views/system/config/index.vue

@@ -2,12 +2,8 @@
   <div class="config-container">
     <vab-query-form>
       <vab-query-form-left-panel :span="12">
-        <el-button icon="el-icon-plus" type="primary" @click="handleEdit">
-          添加
-        </el-button>
-        <el-button icon="el-icon-delete" type="danger" @click="handleDelete">
-          批量删除
-        </el-button>
+        <el-button icon="el-icon-plus" type="primary" @click="handleEdit">添加</el-button>
+        <el-button icon="el-icon-delete" type="danger" @click="handleDelete">批量删除</el-button>
       </vab-query-form-left-panel>
       <vab-query-form-right-panel :span="12">
         <el-popover popper-class="custom-table-checkbox" trigger="hover">
@@ -15,17 +11,12 @@
             <vab-draggable v-bind="dragOptions" :list="columns">
               <div v-for="(item, index) in columns" :key="item + index">
                 <vab-icon icon="drag-drop-line" />
-                <el-checkbox
-                  :disabled="item.disableCheck === true"
-                  :label="item.label" />
+                <el-checkbox :disabled="item.disableCheck === true" :label="item.label" />
               </div>
             </vab-draggable>
           </el-checkbox-group>
           <template #reference>
-            <el-button
-              icon="el-icon-setting"
-              style="margin: 0 0 10px 0 !important"
-              type="primary">
+            <el-button icon="el-icon-setting" style="margin: 0 0 10px 0 !important" type="primary">
               可拖拽列设置
             </el-button>
           </template>
@@ -149,9 +140,7 @@
         }
       },
       finallyColumns() {
-        return this.columns.filter((item) =>
-          this.checkList.includes(item.label)
-        )
+        return this.columns.filter((item) => this.checkList.includes(item.label))
       },
     },
     created() {

src/views/work/order/index.vue

@@ -0,0 +1,238 @@
+<template>
+  <div class="list-container">
+    <el-row :gutter="10" style="margin-bottom: 10px">
+      <el-col :span="4">
+        <el-input v-model="queryForm.orderTypeDesc" placeholder="工单类型" />
+      </el-col>
+      <el-col :span="4">
+        <el-input v-model="queryForm.orderStatus" placeholder="工单状态" />
+      </el-col>
+      <el-col :span="4">
+        <el-input
+          v-model="queryForm.assignUserName"
+          placeholder="分派人员姓名" />
+      </el-col>
+      <el-col :span="12">
+        <el-button icon="el-icon-plus" type="primary" @click="fetchData">
+          查询
+        </el-button>
+        <el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
+      </el-col>
+    </el-row>
+    <vab-query-form>
+      <vab-query-form-left-panel :span="12">
+        <el-button
+          icon="el-icon-plus"
+          size="mini"
+          type="primary"
+          @click="$refs.edit.init()">
+          新建
+        </el-button>
+      </vab-query-form-left-panel>
+      <vab-query-form-right-panel :span="12">
+        <el-button icon="el-icon-download" @click="exportData" />
+        <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">
+      <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 === 'orderTypeDesc'">
+            {{ row.orderTypeDesc }}
+          </span>
+          <span v-if="item.prop === 'orderStatus'">
+            {{ row.orderStatus }}
+          </span>
+          <span v-if="item.prop === 'assignUserName'">
+            {{ row.assignUserName }}
+          </span>
+          <span v-if="item.prop === 'feedBack'">
+            {{ row.feedBack }}
+          </span>
+          <span v-if="item.prop === 'createName'">
+            {{ row.createName }}
+          </span>
+          <span v-if="item.prop === 'createTime'">
+            {{ row.createTime }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="操作" width="85">
+        <template #default="{ row }">
+          <el-button type="text" @click="handleDetail(row)">查看</el-button>
+        </template>
+      </el-table-column>
+      <template #empty>
+        <el-image
+          class="vab-data-empty"
+          :src="require('@/assets/empty_images/data_empty.png')" />
+      </template>
+    </el-table>
+
+    <el-pagination
+      background
+      :current-page="queryForm.pageNum"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange" />
+  </div>
+</template>
+
+<script>
+  import to from 'await-to-js'
+  import api from '@/api/work/index'
+  import downloadFileByByte from '@/utils/base64ToFile'
+  import TableTool from '@/components/table/TableTool'
+
+  export default {
+    components: { TableTool },
+    data() {
+      return {
+        activeName: 'first',
+        layout: 'total, sizes, prev, pager, next, jumper',
+        queryForm: {
+          orderTypeDesc: '',
+          orderStatus: '',
+          assignUserName: '',
+          pageNum: 1,
+          pageSize: 10,
+        },
+        total: 0,
+        listLoading: false,
+        list: [],
+        selectRows: [],
+        checkList: [],
+        columns: [
+          {
+            label: '工单类型',
+            width: 'auto',
+            prop: 'orderTypeDesc',
+            sortable: true,
+            disableCheck: true,
+          },
+          {
+            label: '工单状态',
+            width: 'auto',
+            prop: 'orderStatus',
+            sortable: true,
+          },
+          {
+            label: '分派人员',
+            width: 'auto',
+            prop: 'assignUserName',
+            sortable: true,
+          },
+          {
+            label: '反馈信息',
+            width: 'auto',
+            prop: 'feedBack',
+            sortable: true,
+          },
+          {
+            label: '创建人',
+            width: 'auto',
+            prop: 'createName',
+            sortable: true,
+          },
+          {
+            label: '创建时间',
+            width: 'auto',
+            prop: 'createTime',
+            sortable: true,
+          },
+        ],
+      }
+    },
+    computed: {
+      height() {
+        return this.$baseTableHeight(1)
+      },
+      finallyColumns() {
+        console.log('finallyColums')
+        return this.columns.filter((item) =>
+          this.checkList.includes(item.label)
+        )
+      },
+    },
+    mounted() {
+      this.fetchData()
+    },
+
+    methods: {
+      handleClick(tab) {
+        console.log(tab, 'tab')
+        this.fetchData()
+      },
+      async fetchData() {
+        this.listLoading = true
+        const params = { ...this.queryForm }
+        const [err, res] = await to(api.getList(params))
+        if (err) return (this.listLoading = false)
+        this.list = res.data.list || []
+        this.total = res.data.total
+        this.listLoading = false
+      },
+      exportData() {
+        let exportFrom = JSON.parse(JSON.stringify(this.queryForm))
+        exportFrom.columns = this.finallyColumns.map((item) => item.label)
+        api
+          .deriveList(exportFrom)
+          .then((res) => {
+            if (res.data.list.content) {
+              downloadFileByByte(res.data.list.content, '工单数据.xlsx')
+            }
+          })
+          .catch((err) => {
+            console.error(err)
+          })
+      },
+      //详情
+      handleDetail(row) {
+        this.$router.push({
+          path: './detail',
+          query: {
+            id: row.id,
+            privateCus: 1,
+          },
+        })
+      },
+      reset() {
+        this.queryForm = {
+          pageNum: 1,
+          pageSize: 10,
+          orderTypeDesc: '',
+          orderStatus: '',
+          assignUserName: '',
+        }
+        this.fetchData()
+      },
+
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNum = val
+        this.fetchData()
+      },
+      setSelectRows(val) {
+        this.selectRows = val
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  $base: '.list';
+</style>