添加库内自采页面

package.json

@@ -59,6 +59,7 @@
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
     "pinyin": "^2.9.1",
+    "qrcodejs2": "0.0.2",
     "querystring": "^0.2.0",
     "register-service-worker": "^1.0.0",
     "sass-loader": "^7.1.0",

src/lang/zh.js

@@ -1,4 +1,4 @@
-export default {
+export default {
   logoName: '船舶管理平台',
   tip: '提示',
   title: 'WinSea企业级开发平台',
@@ -982,12 +982,17 @@
     dynamicReportsDetail: '动态报详情',
 
     // 库内自采
+    houseSelfCollect:"库内自采",
     customerManagement:'客户管理',
     acquisitionManagement:'收购管理',
+    acquisitionManagementAdd:'收购管理新增',
+    acquisitionManagementEdit:'收购管理编辑',
     inspectionManagement:'质检管理',
     paymentManagement:'付款管理',
     weighingManagement:'检斤管理',
-    houseSelfCollect:"库内自采"
+    customerManagementEdit:"客户管理编辑",
+    customerManagementAdd:"客户管理添加",
+
   },
   // 后台错误码
   message: {
@@ -4809,7 +4814,7 @@
     purchaseClosingCashierList:'采购平仓报表',
     salesDeliveryReportList:'销售出库报表',
     salesClosingCashierList:'销售平仓报表',
-   
+
   },
   financialManagement:{
     collectionManagementList:'收款管理',
@@ -7403,10 +7408,14 @@
   houseSelfCollect:{
     customerManagement:'客户管理',
     acquisitionManagement:'收购管理',
+    acquisitionManagementAdd:'收购管理新增',
+    acquisitionManagementEdit:'收购管理编辑',
     inspectionManagement:'质检管理',
     paymentManagement:'付款管理',
     weighingManagement:'检斤管理',
-    houseSelfCollect:"库内自采"
+    houseSelfCollect:"库内自采",
+    customerManagementEdit:"客户管理编辑",
+    customerManagementAdd:"客户管理添加"
   }
-  
+
 }

src/views/houseSelfCollect/acquisitionManagement.vue

@@ -1,34 +1,141 @@
 <!--收购管理-->
 <template>
-  <div>
-   收购管理
+  <div class="content">
+    <div class="header">
+      <div>
+        <el-select v-model="value" placeholder="请选择">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+          </el-option>
+        </el-select>
+        <el-checkbox v-model="checked" @change="allowEdit">允许手动编辑重量</el-checkbox>
+      </div>
+      <el-button type="primary" @click="newAcquisition()">新增</el-button>
+    </div>
+    <el-dialog title="新增" :visible.sync="newAcquisitionDialogVisible" width="50%">
+     <acquisitionManagementAdd></acquisitionManagementAdd>
+    </el-dialog>
+    <div class="table-content">
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column type="index" label="序号">
+          <template scope="scope">
+            <span v-if="scope.$index < 9">0{{ scope.$index + 1 }}</span>
+            <span v-else>{{ scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="仓库名称"></el-table-column>
+        <el-table-column prop="contractNo" label="货名"></el-table-column>
+        <el-table-column label="水分范围(%)"></el-table-column>
+        <el-table-column label="基准水分(%)"></el-table-column>
+        <el-table-column label="扣重比"></el-table-column>
+        <el-table-column label="销量上线"></el-table-column>
+        <el-table-column label="状态"></el-table-column>
+        <el-table-column label="扣重比"></el-table-column>
+        <el-table-column label="通过时间"></el-table-column>
+        <el-table-column label="操作" width="300">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">打印</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-popover
+        placement="center"
+        width="160"
+        v-model="visible">
+        <p>这是一段内容这是一段内容确定删除吗？</p>
+        <div style="text-align: right; margin: 0">
+          <el-button size="mini" type="text" @click="visible = false">取消</el-button>
+          <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
+        </div>
+      </el-popover>
+    </div>
   </div>
 </template>
 <script>
-import {
-  // getList,
-} from '@/model/houseSelfCollect/index'
+  // import { getList,} from '@/model/houseSelfCollect/index'
+  import acquisitionManagementAdd from './acquisitionManagementAdd.vue'
+  export default {
 
-export default {
+    components: {
 
-  components: {
+    },
+    watch: {
 
-  },
-  watch: {
+    },
+    data() {
+      return {
+        newAcquisitionDialogVisible:false,
+         visible: false,
+        checked: false,
+        tableData: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }],
+        options: [{
+          value: '选项1',
+          label: '黄金糕'
+        }, {
+          value: '选项2',
+          label: '双皮奶'
+        }, {
+          value: '选项3',
+          label: '蚵仔煎'
+        }, {
+          value: '选项4',
+          label: '龙须面'
+        }, {
+          value: '选项5',
+          label: '北京烤鸭'
+        }],
+        value: ''
+      }
+    },
+    activated() {
 
-  },
-  data() {
-    return {
- 
-    }
-  },
-  activated() {
+    },
+    created() {
+      this.value = this.options[0].value
+    },
+    methods: {
+      newAcquisition(){
+        this.$router.push({
+          name: 'acquisitionManagementAdd'
+          // query: { id: row.id },
+        })
 
-  },
-  methods: {
-
-  },
-}
+      },
+      allowEdit(val) {
+        console.log(val)
+      },
+      handleEdit(index, row) {
+        console.log(index, row);
+      },
+      handleDelete(index, row) {
+        this.visible = true
+        console.log(index, row);
+      }
+    },
+  }
 </script>
 <style lang="scss" scoped>
+  .header{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 </style>

src/views/houseSelfCollect/acquisitionManagementAdd.vue

@@ -0,0 +1,495 @@
+<!--收购管理新增-->
+<template>
+  <el-container class="container">
+    <el-header class="header">
+      <img class="head-icon" src="../../../public/img/icons/acquisition6.png" alt="">
+      <div class="head-title">鲅鱼圈一号库</div>
+    </el-header>
+    <el-main>
+      <el-form ref="form" label-position="left" :model="form" label-width="120px">
+        <el-row class="base-info">
+          基本信息
+        </el-row>
+        <div class="row1">
+          <div class="grid-content">
+            <el-form-item label="货名">
+              <el-input v-model="form.name"></el-input>
+            </el-form-item>
+          </div>
+          <div class="grid-content">
+            <el-form-item label="基准水分(%)">
+              <el-input v-model="form.name"></el-input>
+            </el-form-item>
+          </div>
+          <div class="grid-content">
+            <el-form-item label="扣重比">
+              <el-input v-model="form.name"></el-input>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="row2">
+          <div class="grid-content">
+            <el-form-item label="干粮水分">
+              <el-input v-model="form.name"></el-input>
+            </el-form-item>
+          </div>
+          <div class="grid-content">
+            <el-form-item label="水分上限">
+              <el-input v-model="form.name"></el-input>
+            </el-form-item>
+          </div>
+          <div class="grid-content">
+            <el-form-item label="销售上限(年/吨)">
+              <el-input v-model="form.name"></el-input>
+            </el-form-item>
+          </div>
+        </div>
+      </el-form>
+      <el-row class="row3">
+        <div class="top">
+          <div class="title">粮价设置</div>
+          <el-button class="btn" @click="newSetPrice">新增</el-button>
+        </div>
+        <div class="content" v-for="(item,index) in priceList" :key="index">
+          <div class="top">
+            <div class="left">
+              <div class="text">基准单价（元/公斤）</div>
+              <el-input v-model="priceList.name"></el-input>
+            </div>
+            <el-button @click="delSetPrice(item,index)">删除</el-button>
+          </div>
+          <div class="level">
+            <el-checkbox-group v-model="checkList" @change="changeLevel">
+              <el-checkbox label="一等"></el-checkbox>
+              <el-checkbox label="二等"></el-checkbox>
+              <el-checkbox label="三等"></el-checkbox>
+              <el-checkbox label="等外"></el-checkbox>
+            </el-checkbox-group>
+          </div>
+          <div class="count">
+            <div class="left">
+              <div>水分（%）</div>
+              <div>降幅（元/0.5%）</div>
+            </div>
+            <div class="right">
+              <div class="line"></div>
+              <div class="jt-style"></div>
+
+              <div v-for="(item1,index) in item.detailList">
+                <div class="item-style">
+                  <div v-if="item1.type!=4" class="item-style-title">
+                    <span>{{item1.name}}{{item1.index}}</span>
+                    <span class="add" @click="add(item,item1,index)" v-if="item1.type!=3">+</span>
+                    <span class="reduce" @click="reduce(item,item1,index)"
+                      v-show="item1.type!=1&&item1.type!=2&&item1.type!=3">-</span>
+                  </div>
+                  <div v-show="item1.type!=4">
+                    <input class="water-price" v-model="form.name" :disabled="item1.isWrite?false:true"></input>
+                  </div>
+                  <div class="circle" v-if="item1.type!=4"></div>
+                </div>
+                <div class="bottom-price">
+                  <input v-if="item1.type==4" class="water-price" v-model="item1.jfprice"></input>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-row>
+
+    </el-main>
+  </el-container>
+</template>
+<script>
+  // import { getList,} from '@/model/houseSelfCollect/index'
+
+  export default {
+
+    components: {
+
+    },
+    watch: {
+
+    },
+    data() {
+      return {
+        priceList: [{
+          unitPrice: '',
+          index: 0,
+          detailList: [{
+              type: 1,
+              name: "干粮",
+              water: '15',
+              isWrite: false
+            },
+            {
+              type: 4,
+              jfprice: "0.03"
+            },
+            {
+              type: 2,
+              name: "基准",
+              water: '30',
+              isWrite: false
+            },
+            {
+              type: 4,
+              jfprice: "0.03"
+            },
+            {
+              type: 3,
+              name: "上限",
+              water: '40',
+              isWrite: false
+            },
+          ],
+        }],
+        checkList: [],
+        form: {
+          name: "姓名"
+        },
+
+        index: 0
+      }
+    },
+    created() {},
+    methods: {
+      add(item, item1, index) {
+        debugger
+        // let _data = this.detailList;
+        if (item.index > 2) {
+          this.$message({
+            message: '最多插入3个分界值',
+            type: 'warning'
+          });
+        } else {
+          item.index++
+          item.detailList.splice(index + 1, 0, {
+            name: "分界",
+            water: '30',
+            type: 5,
+            index: 1,
+            isWrite: true
+            // jfprice: "0.03"
+          });
+          item.detailList.splice(index + 1, 0, {
+            jfprice: "0.03",
+            type: 4
+          });
+          this.makeSpliceIndex(item, item1, index)
+        }
+      },
+      reduce(item, item1, index) {
+        item.index--
+        item.detailList.splice(index, 2);
+        console.log(item, index)
+      },
+      makeSpliceIndex(item, item1) {
+        let _index = 0
+        for (let j = 0; j < item.detailList.length; j++) {
+          if (item.detailList[j].type == 5) {
+            _index++
+            item.detailList[j].index = _index;
+          }
+        }
+      },
+      changeLevel() {
+        console.log(this.checkList)
+      },
+      newSetPrice() {
+        let _newObj = {
+          unitPrice: '',
+          index: 0,
+          detailList: [{
+              type: 1,
+              name: "干粮",
+              water: '15',
+              isWrite: false
+            },
+            {
+              type: 4,
+              jfprice: "0.03"
+            },
+            {
+              type: 2,
+              name: "基准",
+              water: '30',
+              isWrite: false
+            },
+            {
+              type: 4,
+              jfprice: "0.03"
+            },
+            {
+              type: 3,
+              name: "上限",
+              water: '40',
+              isWrite: false
+            },
+          ],
+        }
+        this.priceList.push(_newObj)
+      },
+      delSetPrice() {
+        let _newObj = {
+          unitPrice: '',
+          detailList: [{
+              type: 1,
+              name: "干粮",
+              water: '15',
+              isWrite: false
+            },
+            {
+              type: 4,
+              jfprice: "0.03"
+            },
+            {
+              type: 2,
+              name: "基准",
+              water: '30',
+              isWrite: false
+            },
+            {
+              type: 4,
+              jfprice: "0.03"
+            },
+            {
+              type: 3,
+              name: "上限",
+              water: '40',
+              isWrite: false
+            },
+          ],
+        }
+        // this.detailList.push(_newObj)
+      }
+    },
+  }
+</script>
+<style lang="scss">
+  .el-checkbox__input.is-checked .el-checkbox__inner,
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+    background-color: #5878E8;
+    border-color: #5878E8;
+  }
+
+  .el-checkbox__input.is-checked+.el-checkbox__label {
+    color: #5878E8;
+  }
+
+  .el-checkbox.is-bordered.is-checked {
+    border-color: #5878E8;
+  }
+
+  .el-checkbox__input.is-focus .el-checkbox__inner {
+    border-color: #5878E8;
+  }
+
+  .basic-container {
+    overflow: auto;
+  }
+
+  .container {
+    padding: 20px
+  }
+
+  /deep/.el-header {
+    padding: 0;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #E9ECF7;
+    padding-bottom: 10px;
+    width: 80%;
+
+    .head-icon {
+      width: 19px;
+      height: 19px;
+      margin-right: 10px;
+    }
+
+    .head-title {
+      font-size: 21px;
+      font-weight: 600;
+      color: #323233;
+    }
+  }
+
+  .row1,
+  .row2 {
+    // background: red;
+    display: flex;
+    // margin-right: 20px;
+  }
+
+  .row3 {
+    .top {
+      display: flex;
+
+      .btn {
+        width: 52px;
+        height: 24px;
+        background: #5878E8;
+        color: white;
+        margin-left: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        // text-align: center;
+      }
+    }
+
+    .title {
+      display: flex;
+      align-items: center;
+      border-left: 4px solid #5473E8;
+      font-size: 16px;
+      font-weight: 600;
+      color: #323233;
+      padding-left: 10px;
+    }
+  }
+
+  .base-info {
+    border-left: 4px solid #5473E8;
+    font-size: 16px;
+    font-weight: 600;
+    color: #323233;
+    padding-left: 10px;
+    margin: 24px 0 10px 0;
+  }
+
+  .grid-content {
+    margin-right: 20px;
+  }
+
+  .content {
+    border: 1px solid #D8DCE6;
+    margin: 20px 0;
+    padding: 15px;
+    border-radius: 4px;
+
+    .top {
+      display: flex;
+      justify-content: space-between;
+
+      .left {
+        display: flex;
+        align-items: center;
+
+        .text {
+          width: 220px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #8890B1;
+        }
+      }
+    }
+
+    .level {
+      margin: 10px 0;
+    }
+
+    .count {
+      display: flex;
+      margin-bottom: 15px;
+
+      .left {
+        width: 10%;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        justify-content: flex-end;
+        line-height: 24px;
+      }
+
+      .right {
+        width: 85%;
+        position: relative;
+        padding-bottom: 50px;
+
+        .water-price {
+          width: 60px;
+          height: 30px;
+          background: #F6F7FB;
+          border-radius: 4px;
+          border: 1px solid #D8DCE6;
+          text-align: center
+        }
+
+        .add,
+        .reduce {
+          width: 16px;
+          height: 16px;
+          background: #5473E8;
+          border-radius: 2px;
+          color: white;
+          display: inline-block;
+          text-align: center;
+          line-height: 16px;
+        }
+
+        .reduce {
+          background: white;
+          color: #D5D8DE;
+          border: 1px solid #D5D8DE;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        .item-style {
+          position: relative;
+
+          .item-style-title {
+            margin-bottom: 10px;
+            text-align: center;
+          }
+        }
+
+        .line {
+          position: absolute;
+          top: 72px;
+          width: 100%;
+          height: 5px;
+          background: linear-gradient(39deg, #E6EEFF 0%, #91B0F5 42%, #5878E8 100%);
+          border-radius: 3px;
+        }
+
+        .bottom-price {
+          position: absolute;
+          bottom: -10px;
+        }
+
+        .jt-style {
+          position: absolute;
+          top: 64px;
+          width: 0px;
+          height: 0px;
+          right: -15px;
+          border-left: 15px solid #5473E8;
+          border-top: 10px solid transparent;
+          border-bottom: 10px solid transparent;
+        }
+
+        display: flex;
+        justify-content: space-between;
+
+        .circle {
+          position: absolute;
+          z-index: 2;
+          width: 15px;
+          height: 15px;
+          background: #FFFFFF;
+          border: 3px solid #5473E8;
+          border-radius: 50%;
+          right: 40%;
+          bottom: -22px
+        }
+
+      }
+    }
+  }
+</style>

src/views/houseSelfCollect/component/routers/route.js

@@ -20,12 +20,42 @@ const houseSelfCollectRouter = {
       name: 'customerManagement',
       meta: {
         title: 'customerManagement',
-        shortcutEntrance: 'customerManagement',
+        shortcutEntrance: 'houseSelfCollect',
         module: 'procurement.procurementOrder.delete',
         permissicon: [],
         keepAlive: true
       }
     },
+    //客户管理编辑
+    {
+      path: 'customerManagementEdit',
+      component: () =>
+        import(/* webpackChunkName: "sparepartList" */ '@/views/houseSelfCollect/customerManagementEdit'),
+      name: 'customerManagementEdit',
+      meta: {
+        title: 'customerManagementEdit',
+        shortcutEntrance: 'houseSelfCollect',
+        module: 'procurement.procurementOrder.delete',
+        permissicon: [],
+        keepAlive: true
+      },
+      hidden: true
+    },
+        //客户管理添加
+        {
+          path: 'customerManagementAdd',
+          component: () =>
+            import(/* webpackChunkName: "sparepartList" */ '@/views/houseSelfCollect/customerManagementAdd'),
+          name: 'customerManagementAdd',
+          meta: {
+            title: 'customerManagementAdd',
+            shortcutEntrance: 'houseSelfCollect',
+            module: 'procurement.procurementOrder.delete',
+            permissicon: [],
+            keepAlive: true
+          },
+          hidden: true
+        },
     //收购管理
     {
       path: 'acquisitionManagement',
@@ -34,12 +64,27 @@ const houseSelfCollectRouter = {
       name: 'acquisitionManagement',
       meta: {
         title: 'acquisitionManagement',
-        shortcutEntrance: 'acquisitionManagement',
+        shortcutEntrance: 'houseSelfCollect',
         module: 'procurement.procurementOrder.delete',
         permissicon: [],
         keepAlive: true
       }
     },
+    //收购新增
+    {
+      path: 'acquisitionManagementAdd',
+      component: () =>
+        import(/* webpackChunkName: "sparepartList" */ '@/views/houseSelfCollect/acquisitionManagementAdd'),
+      name: 'acquisitionManagementAdd',
+      meta: {
+        title: 'acquisitionManagementAdd',
+        shortcutEntrance: 'houseSelfCollect',
+        module: 'procurement.procurementOrder.delete',
+        permissicon: [],
+        keepAlive: true
+      },
+        hidden: true
+    },
     // 质检管理
     {
       path: 'inspectionManagement',
@@ -48,7 +93,7 @@ const houseSelfCollectRouter = {
       name: 'inspectionManagement',
       meta: {
         title: 'inspectionManagement',
-        shortcutEntrance: 'inspectionManagement',
+        shortcutEntrance: 'houseSelfCollect',
         module: 'procurement.procurementOrder.delete',
         permissicon: [],
         keepAlive: true
@@ -62,7 +107,7 @@ const houseSelfCollectRouter = {
       name: 'weighingManagement',
       meta: {
         title: 'weighingManagement',
-        shortcutEntrance: 'weighingManagement',
+        shortcutEntrance: 'houseSelfCollect',
         module: 'procurement.procurementOrder.delete',
         permissicon: [],
         keepAlive: true
@@ -76,7 +121,7 @@ const houseSelfCollectRouter = {
       name: 'paymentManagement',
       meta: {
         title: 'paymentManagement',
-        shortcutEntrance: 'paymentManagement',
+        shortcutEntrance: 'houseSelfCollect',
         module: 'procurement.procurementOrder.delete',
         permissicon: [],
         keepAlive: true

src/views/houseSelfCollect/customerManagement.vue

@@ -1,34 +1,202 @@
 <!--客户管理-->
 <template>
-  <div>
-   客户管理
+  <div class="content">
+    <div class="seach">
+      <div class="search-left">
+        <ws-input v-model="searchKeyWord" placeholder="可按姓名、手机号查找" clearable maxlength="500" type="input"
+          class="findValue"></ws-input>
+        <ws-button class="find" type="primary" @click="find()">
+          <img width="16" height="16" style="
+              vertical-align: text-top;
+              position: relative;
+              top: 0px;
+              left: -8px;
+            " src="../../../public/img/sousuo.png" alt />
+        </ws-button>
+      </div>
+      <div class="search-right">
+        <ws-button @click="getCustomer()">获取客户</ws-button>
+        <el-dialog title="客户扫码" :visible.sync="customerDialogVisible" width="30%">
+          <div id="qrcode"></div>
+        </el-dialog>
+        <ws-button @click="createCustomer()">创建新客户</ws-button>
+        <el-dialog title="创建新客户" :visible.sync="creatNewCustomerDialogVisible" width="50%">
+         <customerManagementAdd></customerManagementAdd>
+        </el-dialog>
+      </div>
+    </div>
+    <el-table class="wenzi" :data="customertList.records" style="width: 100%; margin-top: 10px" height="780">
+      <el-table-column type="index" label="序号">
+        <template scope="scope">
+          <span v-if="scope.$index < 9">0{{ scope.$index + 1 }}</span>
+          <span v-else>{{ scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="contractNo" label="客户"></el-table-column>
+      <el-table-column prop="goodsName" label="手机号"></el-table-column>
+      <el-table-column prop="weight" label="银行卡号"></el-table-column>
+      <el-table-column prop="unitContractPrice" label="开户行"></el-table-column>
+      <el-table-column prop="packingMethod" label="收款人"></el-table-column>
+      <el-table-column prop="status" label="状态"></el-table-column>
+      <el-table-column prop="address" label="操作">
+        <template slot-scope="scope">
+          <img width="16" height="16" style="vertical-align: text-top; margin: 0 6px"
+            src="../../../public/img/chakan.png" @click="handleExamine(scope.row)" v-hasPermission="
+              `contractManagement.buyContract.buyContractInfo.view`
+            " alt />
+          <img width="17" height="16" style="vertical-align: text-top; margin: 0 6px"
+            src="../../../public/img/bianji.png" @click="handleEdit(scope.row)" v-hasPermission="
+              `contractManagement.buyContract.buyContractInfo.edit`
+            " alt />
+          <img width="16" height="17" style="
+              vertical-align: text-top;
+              position: relative;
+              top: -1px;
+              margin: 0 6px;
+            " src="../../../public/img/shanchu.png" v-hasPermission="
+              `contractManagement.buyContract.buyContractInfo.delete`
+            " @click="handleDelete(scope.row)" alt />
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
+      :page-size="deptCircularPage.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal">
+    </el-pagination>
   </div>
 </template>
 <script>
-import {
-  // getList,
-} from '@/model/houseSelfCollect/index'
-
-export default {
-
-  components: {
+  // import xx
+  // '@/model/houseSelfCollect/index'
+  import QRCode from 'qrcodejs2'
+  import customerManagementAdd from './customerManagementAdd.vue'
+  export default {
+    components: {
+      customerManagementAdd
+    },
+    watch: {},
+    data() {
+      return {
+        searchKeyWord: '',
+        customerDialogVisible: false,
+        creatNewCustomerDialogVisible:false,
+        customertList: {
+          records: [{
+            contractNo: '小王',
+            goodsName: '17127741111',
+            weight: '111111111',
+            unitContractPrice: '312321312132321',
+            packingMethod: '12213321231fsfssfd',
+            status: 'fsdfsdfsd'
+          }]
+        },
+        currentPage: 1,
+        pageSize: 10,
+        deptBudgetTotal: 0,
+        deptCircularPage: {}
+      }
+    },
+    methods: {
+      find() {
+        console.log('搜索')
+      },
+      //获取客户
+      getCustomer() {
+        this.customerDialogVisible = true
+        this.$nextTick(function() {
+          document.getElementById('qrcode').innerHTML = ''
+          let qrcode = new QRCode('qrcode', {
+            width: 150,
+            height: 150,
+            text: 'https：//www.baidu.com',
+            colorDark: '#109dff',
+            colorLight: '#d9d9d9'
+          })
+        })
+      },
+      //创建客户
+      createCustomer() {
+        // this.creatNewCustomerDialogVisible = true
+        this.$router.push({
+          name: 'customerManagementAdd'
+          // query: { id: row.id },
+        })
+      },
+      handleSizeChange(val) {
+        console.log(`每页 ${val} 条`)
+        this.pageSize = val
+        this.getList()
+      },
+      handleCurrentChange(val) {
+        this.currentPage = val
+        console.log(`当前页: ${val}`)
+        this.getList()
+      },
+      handleExamine(row) {
+        console.log(row)
+        // this.$router.push({
+        //   name: 'purchaseContractExamine',
+        //   query: { id: row.id, status: row.status },
+        // })
+      },
+      handleEdit(row) {
+        console.log(row)
+        this.$router.push({
+          name: 'customerManagementEdit',
+          query: {
+            id: row.id
+          }
+        })
+      },
+      handleDelete(row) {
+        console.log(row)
+        // var text = ''
+        // if (row.deliverType == 1) {
+        //   text =
+        //     '删除该合同将同时永久删除合同对应的临时仓库相关数据，是否确定删除？'
+        // } else {
+        //   text = '合同删除后不可恢复，是否继续删除？'
+        // }
+        // this.$confirm(text, '提示', {
+        //   confirmButtonText: '确定',
+        //   cancelButtonText: '取消',
+        //   type: 'warning',
+        // })
+        //   .then(() => {
+        //     deletecontract({ id: row.id })
+        //       .toPromise()
+        //       .then((response) => {
+        //         this.$notify.success({
+        //           title: '成功',
+        //           message: '删除成功',
+        //         })
+        //         this.getList()
+        //       })
+        //       .catch((response) => {})
+        //   })
+        //   .catch(() => {
+        //     return false
+        //   })
+      },
+      getList() {}
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .content {
+    padding: 20px;
+  }
 
-  },
-  watch: {
+  .seach {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 
-  },
-  data() {
-    return {
- 
+    .find {
+      width: 32px;
     }
-  },
-  activated() {
 
-  },
-  methods: {
-
-  },
-}
-</script>
-<style lang="scss" scoped>
+    .search-left {
+      display: flex;
+    }
+  }
 </style>

src/views/houseSelfCollect/customerManagementAdd.vue

@@ -0,0 +1,155 @@
+<!--客户管理-->
+<template>
+  <div class="content">
+    <div class="title">新增粮商</div>
+    <div class="unload">
+      <el-upload action="https://jsonplaceholder.typicode.com/posts/" :limit="2" list-type="picture-card"
+        :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
+        <i class="el-icon-plus"></i>
+      </el-upload>
+<!--      <el-dialog :visible.sync="dialogVisible">
+        <img width="100%" :src="dialogImageUrl" alt="">
+      </el-dialog> -->
+      <el-form ref="form" :model="form" label-width="120px">
+        <el-form-item label="姓名">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item label="身份证号">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item label="银行卡号">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item label="开户行">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item label="开户支行">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item label="收款人姓名">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item label="收款人身份证号">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item label="手机号">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+        <!-- 验证码 -->
+        <el-form-item prop="veriCode" :label="$t('login.register08')">
+            <el-input v-model="form.name"></el-input>
+   <!--       <div style="display: flex; justify-content: space-between">
+            <el-input
+              v-model="form.name"
+              :disabled="disabledFlag"
+              class="code_style"
+              :placeholder="$t('login.registerVerif08')"
+            />
+            <div>
+              <ws-button
+                v-show="verification"
+                type="primary"
+                @click="toSend"
+                >{{ $t('login.sendVerification') }}</ws-button
+              >
+              <ws-button v-show="!verification" class="retry" disabled
+                >{{ $t('login.retry') }}({{ count }})s</ws-button
+              >
+            </div>
+          </div> -->
+        </el-form-item>
+        <el-form-item label="联系地址">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+       </el-form>
+    </div>
+  </div>
+</template>
+<script>
+  // import xx
+  // '@/model/houseSelfCollect/index'
+
+  export default {
+    components: {},
+    watch: {},
+    data() {
+      return {
+        dialogImageUrl: '',
+        dialogVisible: false,
+        form:{
+          name:"姓名"
+        },
+        disabledFlag: true,
+
+      }
+    },
+    methods: {
+      handleRemove(file, fileList) {
+        console.log(file, fileList);
+      },
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      },
+      // 发送验证码
+      toSend() {
+        if (this.registerForm.linkmanPhone) {
+          if (validUserCellPhone(this.registerForm.linkmanPhone)) {
+            this.disabledFlag = false
+            clearInterval(this.timer)
+            this.timer = null
+            const TIME_COUNT = 60
+            if (!this.timer) {
+              this.count = TIME_COUNT
+              this.verification = false
+              let data = {
+                mobilePhone: this.registerForm.linkmanPhone,
+              }
+              sendRegisterCode(data)
+                .toPromise()
+                .then((res) => {
+                  this.timer = setInterval(() => {
+                    if (this.count > 0 && this.count <= TIME_COUNT) {
+                      this.count--
+                    } else {
+                      this.verification = true
+                      clearInterval(this.timer)
+                      this.timer = null
+                    }
+                  }, 1000)
+                })
+                .catch((err) => {
+                  this.verification = true
+                })
+            }
+          } else {
+            EventBus.$emit('error', this.$t('login.registerVerif09'))
+          }
+        } else {
+          EventBus.$emit('error', this.$t('login.registerVerif05'))
+        }
+      },
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  /deep/.el-form-item{
+    margin-bottom: 0;
+  }
+  .content {
+    padding: 20px;
+  }
+
+  .seach {
+    display: flex;
+    align-items: center;
+
+    .find {
+      width: 32px;
+    }
+
+    .search-left {
+      display: flex;
+    }
+  }
+</style>

src/views/houseSelfCollect/customerManagementEdit.vue

@@ -0,0 +1,115 @@
+<!--客户管理-->
+<template>
+  <div class="content">
+    客户管理编辑
+  </div>
+</template>
+<script>
+// import xx
+// '@/model/houseSelfCollect/index'
+
+export default {
+  components: {},
+  watch: {},
+  data() {
+    return {
+      searchKeyWord: '',
+      customertList:{
+        records:[
+          {
+            contractNo:"小王",
+            goodsName:"17127741111",
+            weight:"111111111",
+            unitContractPrice:'312321312132321',
+            packingMethod:"12213321231fsfssfd",
+            status:"fsdfsdfsd"
+            
+          }
+        ]
+      },
+       currentPage: 1,
+      pageSize: 10,
+      deptBudgetTotal: 0,
+      deptCircularPage: {},
+    }
+  },
+  methods: {
+    find() {
+      console.log('搜索')
+    },
+    getCustomer() {},
+    createCustomer() {},
+        handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.pageSize = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      console.log(`当前页: ${val}`)
+      this.getList()
+    },
+        handleExamine(row) {
+      console.log(row)
+      // this.$router.push({
+      //   name: 'purchaseContractExamine',
+      //   query: { id: row.id, status: row.status },
+      // })
+    },
+        handleEdit(row) {
+          console.log(row)
+      this.$router.push({
+        name: 'purchaseContractEdit',
+        query: { id: row.id },
+      })
+    },
+        handleDelete(row) {
+          console.log(row)
+      // var text = ''
+      // if (row.deliverType == 1) {
+      //   text =
+      //     '删除该合同将同时永久删除合同对应的临时仓库相关数据，是否确定删除？'
+      // } else {
+      //   text = '合同删除后不可恢复，是否继续删除？'
+      // }
+      // this.$confirm(text, '提示', {
+      //   confirmButtonText: '确定',
+      //   cancelButtonText: '取消',
+      //   type: 'warning',
+      // })
+      //   .then(() => {
+      //     deletecontract({ id: row.id })
+      //       .toPromise()
+      //       .then((response) => {
+      //         this.$notify.success({
+      //           title: '成功',
+      //           message: '删除成功',
+      //         })
+      //         this.getList()
+      //       })
+      //       .catch((response) => {})
+      //   })
+      //   .catch(() => {
+      //     return false
+      //   })
+    },
+    getList(){}
+  }
+}
+</script>
+<style lang="scss" scoped>
+.content{
+  padding: 20px;
+}
+.seach {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .find {
+    width: 32px;
+  }
+  .search-left {
+    display: flex;
+  }
+}
+</style>