From 4c873da777ea0c6ce0d342ce793fabae89b3f66d Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期四, 24 八月 2023 19:29:00 +0800
Subject: [PATCH] 供应商和产品管理

---
 src/assets/logo.png                                      |    0 
 src/components/layout/components/appsidebar/index.scss   |    3 
 src/views/supplierManage/supplier/index.vue              |   69 +
 src/views/productManage/product/index.vue                |  141 ++--
 src/views/supplierManage/supplier/AddSupplier.vue        |  369 ++++++++++++
 src/components/makepager/CommonFormTableView.vue         |  100 ---
 src/views/other/commonDialog/SelectCommonDialog.vue      |   12 
 src/views/productManage/product/AddProduct.vue           |  426 ++++++++++++++
 src/components/makepager/TableCommonView.vue             |    4 
 src/views/supplierManage/supplier/AddNewProduct.vue      |  226 +++++++
 src/views/productManage/product/DetailProduct.vue        |  319 ++++++++++
 src/components/layout/components/appsidebar/index.vue    |    3 
 src/views/other/commonDialog/EditDropdownDialog.vue      |    6 
 src/views/supplierManage/supplier/RaleteSupplierList.vue |   99 +++
 14 files changed, 1,571 insertions(+), 206 deletions(-)

diff --git a/src/assets/logo.png b/src/assets/logo.png
index f3d2503..b6ab7cc 100644
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
Binary files differ
diff --git a/src/components/layout/components/appsidebar/index.scss b/src/components/layout/components/appsidebar/index.scss
index a5d60a4..339111c 100644
--- a/src/components/layout/components/appsidebar/index.scss
+++ b/src/components/layout/components/appsidebar/index.scss
@@ -4,6 +4,9 @@
   background-color: #314255;
   .box {
     width: 200px;
+    .logo-view {
+      margin: 40px 20px 10px;
+    }
     .el-menu {
       border-right: solid 0px #e6e6e6;
     }
diff --git a/src/components/layout/components/appsidebar/index.vue b/src/components/layout/components/appsidebar/index.vue
index afdf9be..b84ad33 100644
--- a/src/components/layout/components/appsidebar/index.vue
+++ b/src/components/layout/components/appsidebar/index.vue
@@ -2,6 +2,9 @@
 <template>
   <div class="app-sidebar">
     <div class="box">
+      <div class="logo-view">
+        <el-image :src="require('@/assets/logo.png')"></el-image>
+      </div>
       <el-menu
         router
         unique-opened
diff --git a/src/components/makepager/CommonFormTableView.vue b/src/components/makepager/CommonFormTableView.vue
index 55fee16..aa3b08e 100644
--- a/src/components/makepager/CommonFormTableView.vue
+++ b/src/components/makepager/CommonFormTableView.vue
@@ -1,13 +1,8 @@
 <template>
   <div class="page-view">
     <el-form ref="form" :model="tableList" :show-message="false" label-position="right">
-      <el-table
-        :data="tableList.tableData"
-        :show-summary="showSummary.show"
-        :summary-method="getSummaries"
-        :span-method="arraySpanMethod"
-        style="width: 100%"
-      >
+      <el-table :data="tableList.tableData" style="width: 100%">
+        <el-table-column type="index" label="缂栧彿" width="50" align="center"></el-table-column>
         <el-table-column
           v-for="(item, i) in tableList.tableColumn"
           :key="i"
@@ -127,25 +122,9 @@
     </el-form>
     <div v-if="!detailEnter" style="margin: 10px">
       <el-button size="small" type="primary" @click="add">鏂板</el-button>
-      <!-- <el-button size="small" type="primary" disabled>瀵煎叆鏄庣粏</el-button> -->
       <el-button size="small" type="primary" @click="empty">娓呯┖</el-button>
-      <el-button size="small" type="primary" @click="recalculate" :disabled="isRecalculate ? false : true"
-        >閲嶇畻</el-button
-      >
     </div>
-    <div v-if="showSummary.total || showSummary.refundable" style="height: 42px; line-height: 42px">
-      <el-row :gutter="10">
-        <el-col v-if="showSummary.total" :span="2" :offset="22">
-          <span style="font-weight: bold">鍚堣</span>
-          <span style="margin-left: 10px">{{ total }}</span>
-        </el-col>
-        <el-col v-if="showSummary.refundable" :span="2" :offset="22">
-          <span style="font-weight: bold">搴旈��娆�</span>
-          <span style="margin-left: 10px">0.00</span>
-        </el-col>
-      </el-row>
-    </div>
-    <!-- 鍚堝悓璁㈠崟 -->
+    <!-- 浜у搧鍚嶇О -->
     <SelectCommonDialog
       v-if="editSelCommonConfig.editVisible"
       :edit-common-config="editSelCommonConfig"
@@ -237,60 +216,6 @@
     handleSelectionChange(val) {
       this.$emit("getSelectArray", val)
     },
-    // 琛屽悎骞�
-    arraySpanMethod() {
-      if (this.showSummary.show) {
-        this.$nextTick(() => {
-          if (this.$refs.table) {
-            var current = this.$refs.table.querySelector(".el-table__footer-wrapper").querySelector(".el-table__footer")
-            var cell = current.rows[0].cells
-            for (let i = 0; i < this.showSummary.mergeNumber; i++) {
-              cell[i].style.display = "none"
-            }
-            cell[this.showSummary.mergeNumber].classList.remove("is-left")
-            cell[this.showSummary.mergeNumber].colSpan = this.showSummary.mergeNumber.toString()
-          }
-        })
-      }
-    },
-    // 鍚堣
-    getSummaries(param) {
-      const { columns, data } = param
-      const sums = []
-      columns.forEach((column, index) => {
-        // // 鏇存敼琛屽悕绉�
-        if (index === this.showSummary.mergeNumber) {
-          sums[index] = "灏忚:"
-          return
-        }
-        const title = ["#", "浜у搧鍚嶇О"]
-        // 鍘婚櫎鏌愪簺涓嶉渶瑕佽绠楃殑鏁版嵁
-        if (title.includes(column.label)) {
-          sums[index] = ""
-          return
-        }
-        // 鎶婂綋鍓嶈〃鏍兼暟鎹腑鍚屼釜鍒嗙被鐨勬暟鎹敹闆嗚捣鏉�
-        const values = data.map((item) => Number(item[column.property]))
-        // 杩囨护鎺�
-        if (!values.every((value) => Number.isNaN(value))) {
-          sums[index] = ` ${values.reduce((prev, curr) => {
-            const value = Number(curr)
-            if (!Number.isNaN(value)) {
-              const num = prev + curr
-              return Number(num.toFixed(2))
-            } else {
-              return Number(prev.toFixed(2))
-            }
-          }, 0)}`
-        } else {
-          sums[index] = ""
-        }
-        if (column.property === "total") {
-          this.total = sums[index]
-        }
-      })
-      return sums
-    },
     // 鏁板瓧鎹㈣涓洪噾棰濇樉绀烘牸寮�
     number_format(number, decimals, dec_point, thousands_sep) {
       decimals = 2 //杩欓噷榛樿璁剧疆淇濈暀涓や綅灏忔暟锛屼篃鍙互娉ㄩ噴杩欏彞閲囩敤浼犲叆鐨勫弬鏁�
@@ -332,21 +257,6 @@
     empty() {
       this.isRecalculate = false
       this.$emit("emptyProductClick")
-    },
-    // 閲嶇畻
-    recalculate() {
-      this.$confirm("纭畾瑕侀噸绠楁槑缁嗘墍鏈夎?", "鎻愮ず", {
-        confirmButtonText: "纭畾",
-        cancelButtonText: "鍙栨秷",
-        type: "warning"
-      })
-        .then(() => {
-          this.$emit("recalculateProductClick")
-          this.tableList.tableData.map((ite) => {
-            ite.total = ite.amount ? ite.amount * ite.price : 1 * ite.price
-          })
-        })
-        .catch(() => {})
     },
     // 閫夋嫨浜у搧鍚嶇О鐩稿叧鏂规硶
     querySearchAsync(queryString, cb) {
@@ -406,6 +316,10 @@
         }
       })
       this.$emit("clearupProduct", this.tableList.tableData)
+    },
+    // 鍒犻櫎
+    deleteClient(row) {
+      this.$emit("deleteProduct", row)
     }
   }
 }
diff --git a/src/components/makepager/TableCommonView.vue b/src/components/makepager/TableCommonView.vue
index bb3f2c3..0adba05 100644
--- a/src/components/makepager/TableCommonView.vue
+++ b/src/components/makepager/TableCommonView.vue
@@ -33,7 +33,7 @@
               ? "--"
               : dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop])
           }}</span>
-          <span v-else-if="item.isClick && scope.row[item.prop]" class="sel-name" @click="selNameClick(scope.row)">{{
+          <span v-else-if="item.isClick && scope.row[item.prop]" class="sel-name" @click="selCommonClick(scope.row)">{{
             scope.row[item.prop]
           }}</span>
           <span v-else-if="item.isFirst">{{ scope.row[item.prop] ? "鏄�" : "鍚�" }}</span>
@@ -119,7 +119,7 @@
           show: false,
           sumProp: [],
           mergeNumber: 1,
-          totalName:'鏈〉鎬昏'
+          totalName: "鏈〉鎬昏"
         }
       }
     }
diff --git a/src/views/other/commonDialog/EditDropdownDialog.vue b/src/views/other/commonDialog/EditDropdownDialog.vue
index 2562bd7..142bf25 100644
--- a/src/views/other/commonDialog/EditDropdownDialog.vue
+++ b/src/views/other/commonDialog/EditDropdownDialog.vue
@@ -13,11 +13,6 @@
             <el-input v-model="scope.row.name" size="mini"></el-input>
           </template>
         </el-table-column>
-        <el-table-column label="鏄剧ず棰滆壊" prop="color">
-          <template slot-scope="scope">
-            <el-color-picker v-model="scope.row.color" size="small" @change="colorClick(scope.row)"></el-color-picker>
-          </template>
-        </el-table-column>
         <el-table-column label="璁句负榛樿" prop="setDefault">
           <template slot-scope="scope">
             <el-switch
@@ -50,7 +45,6 @@
       </el-table>
       <div style="padding: 10px">
         <el-button type="text" size="mini" @click="addDropdown">鏂板涓嬫媺妗�</el-button>
-        <el-button type="text" size="mini">鎭㈠榛樿棰滆壊</el-button>
       </div>
       <div slot="footer">
         <el-button type="primary" size="small" @click="editConfig.editVisible = false">淇濆瓨</el-button>
diff --git a/src/views/other/commonDialog/SelectCommonDialog.vue b/src/views/other/commonDialog/SelectCommonDialog.vue
index 3090ad6..afab011 100644
--- a/src/views/other/commonDialog/SelectCommonDialog.vue
+++ b/src/views/other/commonDialog/SelectCommonDialog.vue
@@ -331,17 +331,7 @@
     },
     selNameClick(row) {
       this.editConfig.editVisible = false
-      if (this.editConfig.title === "閿�鍞�诲崟") {
-        this.$emit("selClient", row, "master")
-      } else if (this.editConfig.title === "鏈嶅姟鍚堝悓") {
-        this.$emit("selClient", row, "serviceContract")
-      } else if (this.editConfig.title === "閿�鍞槑缁嗗崟") {
-        this.$emit("selClient", row, "contract")
-      } else if (this.editConfig.title === "鎶ヤ环鍗�") {
-        this.$emit("selClient", row, "quotation")
-      } else if (this.editConfig.title === "瀹㈡埛鏈嶅姟鍗�") {
-        this.$emit("selClient", row, "customService")
-      } else if (this.editConfig.title === "浜у搧鍚嶇О") {
+      if (this.editConfig.title === "浜у搧鍚嶇О") {
         this.$emit("selClient", row, "productName")
       }
     },
diff --git a/src/views/productManage/product/AddProduct.vue b/src/views/productManage/product/AddProduct.vue
new file mode 100644
index 0000000..a1bd60e
--- /dev/null
+++ b/src/views/productManage/product/AddProduct.vue
@@ -0,0 +1,426 @@
+<template>
+  <div class="add-common">
+    <el-dialog
+      :title="addCommonConfig.title + '浜у搧'"
+      :visible.sync="editConfig.visible"
+      :width="dialogWidth"
+      :before-close="handleClose"
+      :close-on-click-modal="false"
+      append-to-body
+      custom-class="iframe-dialog"
+    >
+      <el-form
+        ref="form"
+        :model="editConfig.infomation"
+        :rules="rules"
+        label-position="right"
+        label-width="308px"
+        size="mini"
+      >
+        <!-- 淇℃伅 -->
+        <div class="basic-info">
+          <!-- 鍩烘湰淇℃伅 -->
+          <div class="basic-info-title">鍩烘湰淇℃伅</div>
+          <div class="basic-info-view">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="浜у搧缂栧彿" prop="number">
+                  <el-input v-model="editConfig.infomation.number"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="浜у搧鍚嶇О" prop="product_name">
+                  <el-input v-model="editConfig.infomation.name"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="浜у搧绫诲埆" prop="supplierType_id">
+                  <div class="custom-name">
+                    <el-select
+                      v-model="editConfig.infomation.supplierType_id"
+                      placeholder="璇烽�夋嫨浜у搧绫诲埆"
+                      class="common-select-sel"
+                      size="mini"
+                    >
+                      <el-option v-for="item in supplierTypeOptions" :key="item.id" :label="item.name" :value="item.id">
+                      </el-option>
+                    </el-select>
+                    <div class="common-select-btn" @click="setProductType"><i class="el-icon-setting"></i></div>
+                  </div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="渚涘簲鍟�" prop="supplier_name">
+                  <div class="custom-name">
+                    <el-autocomplete
+                      v-model="editConfig.infomation.supplier_name"
+                      :fetch-suggestions="querySearchAsync"
+                      value-key="name"
+                      @select="handleSelectClient"
+                    ></el-autocomplete>
+                    <div class="common-select-btn" @click="selClientClick">
+                      <i class="el-icon-circle-plus-outline" title="閫夋嫨"></i>
+                    </div>
+                    <div class="common-select-btn" @click="clearupClient">
+                      <i class="el-icon-edit-outline" title="娓呴櫎"></i>
+                    </div>
+                  </div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="瑙勬牸" prop="supplier_name">
+                  <el-input v-model="editConfig.infomation.name"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="鍨嬪彿" prop="supplier_name">
+                  <el-input v-model="editConfig.infomation.name"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="鍗曚綅" prop="industry_id">
+                  <div class="custom-name">
+                    <el-select
+                      v-model="editConfig.infomation.industry_id"
+                      placeholder="璇烽�夋嫨渚涘簲鍟嗚涓�"
+                      class="common-select-sel"
+                      size="mini"
+                    >
+                      <el-option v-for="item in industryOptions" :key="item.id" :label="item.name" :value="item.id">
+                      </el-option>
+                    </el-select>
+                    <div class="common-select-btn" @click="setUnit"><i class="el-icon-setting"></i></div>
+                  </div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="浠锋牸" prop="amount">
+                  <el-input-number
+                    v-model="editConfig.infomation.amount"
+                    placeholder="璇疯緭鍏�"
+                    :min="0"
+                    :precision="2"
+                    :controls="false"
+                    style="width: 100%; margin-right: 5px"
+                  ></el-input-number>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="鏈�浣庡簱瀛�" prop="phone">
+                  <el-input-number
+                    v-model="editConfig.infomation.projected_amount"
+                    placeholder="璇疯緭鍏�"
+                    :min="0"
+                    :controls="false"
+                    style="width: 100%; margin-right: 5px"
+                  ></el-input-number>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="鏈�楂樺簱瀛�" prop="phone">
+                  <el-input-number
+                    v-model="editConfig.infomation.projected_amount"
+                    placeholder="璇疯緭鍏�"
+                    :min="0"
+                    :controls="false"
+                    style="width: 100%; margin-right: 5px"
+                  ></el-input-number>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="鍥剧墖" prop="phone">
+                  <div class="bigImg-div" @click="toGetImg">
+                    <i class="el-icon-plus icon" v-if="!valueUrl"></i>
+                    <img class="bigImg" :src="valueUrl" v-if="valueUrl" />
+                  </div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="澶囨敞淇℃伅" prop="desc">
+                  <el-input
+                    type="textarea"
+                    :autosize="{ minRows: 2, maxRows: 4 }"
+                    placeholder="璇疯緭鍏ュ唴瀹�"
+                    v-model="editConfig.infomation.desc"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" size="small" @click="saveClick('form')">淇� 瀛�</el-button>
+        <el-button size="small" @click="editConfig.visible = false">鍙� 娑�</el-button>
+      </div>
+    </el-dialog>
+    <!-- 缂栬緫涓嬫媺妗� -->
+    <EditDropdownDialog v-if="editDropdownConfig.editVisible" :edit-dropdown-config="editDropdownConfig" />
+  </div>
+</template>
+
+<script>
+let inputElement = null
+import { getAddContact, getUpdateContact } from "@/api/client/contacts"
+import EditDropdownDialog from "@/views/other/commonDialog/EditDropdownDialog"
+export default {
+  name: "AddProductDialog",
+  props: {
+    addCommonConfig: {
+      type: Object,
+      default: () => {
+        return {
+          visible: false,
+          title: "鏂板缓",
+          infomation: {}
+        }
+      }
+    }
+  },
+  components: { EditDropdownDialog },
+  computed: {},
+  data() {
+    return {
+      dialogWidth: "80%",
+      editConfig: this.addCommonConfig,
+      rules: {
+        supplier_name: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+        product_name: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }]
+      },
+      supplierTypeOptions: [], // 渚涘簲鍟嗙被鍨�
+      industryOptions: [], // 鎵�灞炶涓�
+      memberOptions: [],
+      editDropdownConfig: {
+        editVisible: false,
+        title: "",
+        infomation: {}
+      },
+      supplierId: this.addCommonConfig.infomation.supplierId,
+      valueUrl: ""
+    }
+  },
+  created() {
+    if (this.editConfig.title !== "鏂板缓" && this.editConfig.infomation.province_id !== 0) {
+      this.getCityList(this.editConfig.infomation.province_id, "edit")
+    }
+  },
+  methods: {
+    handleClose() {
+      this.editConfig.visible = false
+    },
+    // 淇濆瓨
+    saveClick(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          console.log(this.editConfig.infomation)
+          const params = this.saveParams()
+          console.log(params)
+          if (this.editConfig.title === "鏂板缓") {
+            getAddContact(params)
+              .then((res) => {
+                console.log(res)
+                this.editConfig.visible = false
+                if (res.code === 200) {
+                  this.$message({
+                    message: "娣诲姞鎴愬姛",
+                    type: "success"
+                  })
+                  this.$parent.getData()
+                }
+              })
+              .catch((err) => {
+                console.log(err)
+              })
+          } else {
+            getUpdateContact(params)
+              .then((res) => {
+                console.log(res)
+                this.editConfig.visible = false
+                if (res.code === 200) {
+                  this.$message({
+                    message: "缂栬緫鎴愬姛",
+                    type: "success"
+                  })
+                  this.$parent.getData()
+                }
+              })
+              .catch((err) => {
+                console.log(err)
+              })
+          }
+        } else {
+          console.log("error submit")
+          return false
+        }
+      })
+    },
+    saveParams() {
+      let data = this.editConfig.infomation
+      let params = {
+        id: this.editConfig.title === "鏂板缓" ? 0 : data.id,
+        birthday: data.birthday || "",
+        city_id: data.city_id || 0,
+        client_id: this.supplierId || 0,
+        country_id: data.country_id || 0,
+        desc: data.desc || "",
+        email: data.email || "",
+        is_first: data.is_first || false,
+        member_id: data.member_id || 0,
+        name: data.name || "",
+        number: data.number || "",
+        phone: data.phone || "",
+        position: data.position || "",
+        province_id: data.province_id || 0,
+        region_id: data.region_id || 0,
+        wechat: data.wechat || ""
+      }
+      return params
+    },
+    // 娣诲姞闄勪欢
+    addAnnexClick() {},
+    // 璁剧疆浜у搧绫诲埆
+    setProductType() {
+      this.editDropdownConfig.editVisible = true
+      this.editDropdownConfig.title = "浜у搧绫诲埆"
+    },
+    // 璁剧疆鍗曚綅
+    setUnit() {
+      this.editDropdownConfig.editVisible = true
+      this.editDropdownConfig.title = "鍗曚綅"
+    },
+    // 閫夋嫨瀹㈡埛鐩稿叧鏂规硶
+    querySearchAsync(queryString, cb) {
+      var restaurants = this.clientList
+      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
+      cb(results)
+    },
+    createStateFilter(queryString) {
+      return (state) => {
+        return state.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+      }
+    },
+    handleSelectClient(item) {
+      this.supplierId = item.id
+    },
+    selClientClick() {
+      this.editSelectClientConfig.editVisible = true
+    },
+    selClient(row) {
+      console.log(row)
+      this.editConfig.infomation.product_name = row.name
+      this.supplierId = row.id
+    },
+    // 娓呴櫎宸查�夋嫨鐢ㄦ埛
+    clearupClient() {
+      this.editConfig.infomation.product_name = ""
+      this.supplierId = 0
+    },
+    // 涓婁紶鍥剧墖
+    toGetImg() {
+      if (inputElement === null) {
+        // 鐢熸垚鏂囦欢涓婁紶鐨勬帶浠�
+        inputElement = document.createElement("input")
+        inputElement.setAttribute("type", "file")
+        inputElement.style.display = "none"
+
+        if (window.addEventListener) {
+          inputElement.addEventListener("change", this.uploadFile, false)
+        } else {
+          inputElement.attachEvent("onchange", this.uploadFile)
+        }
+
+        document.body.appendChild(inputElement)
+      }
+      inputElement.click()
+    },
+    uploadFile(el) {
+      if (el && el.target && el.target.files && el.target.files.length > 0) {
+        console.log(el)
+        const files = el.target.files[0]
+        const isLt2M = files.size / 1024 / 1024 < 2
+        const size = files.size / 1024 / 1024
+        console.log(size)
+        // 鍒ゆ柇涓婁紶鏂囦欢鐨勫ぇ灏�
+        if (!isLt2M) {
+          this.$message.error("涓婁紶澶村儚鍥剧墖澶у皬涓嶈兘瓒呰繃 2MB!")
+        } else if (files.type.indexOf("image") === -1) {
+          //濡傛灉涓嶆槸鍥剧墖鏍煎紡
+          // this.$dialog.toast({ mes: '璇烽�夋嫨鍥剧墖鏂囦欢' });
+          this.$message.error("璇烽�夋嫨鍥剧墖鏂囦欢")
+        } else {
+          const that = this
+          const reader = new FileReader() // 鍒涘缓璇诲彇鏂囦欢瀵硅薄
+          reader.readAsDataURL(el.target.files[0]) // 鍙戣捣寮傛璇锋眰锛岃鍙栨枃浠�
+          reader.onload = function () {
+            // 鏂囦欢璇诲彇瀹屾垚鍚�
+            // 璇诲彇瀹屾垚鍚庯紝灏嗙粨鏋滆祴鍊肩粰img鐨剆rc
+            that.valueUrl = this.result
+            console.log(this.result)
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+::v-deep {
+  .iframe-dialog .el-dialog__body {
+    .basic-info {
+      .basic-info-title {
+        background-color: #f4f8fe;
+        padding-left: 10px;
+        font-size: 15px;
+        font-weight: bold;
+        color: #666;
+        height: 42px;
+        line-height: 42px;
+      }
+      .basic-info-view {
+        margin-top: 10px;
+        padding-right: 40px;
+        .custom-name,
+        .common-select {
+          display: flex;
+          .common-select-btn {
+            margin-left: 5px;
+            font-size: 18px;
+            cursor: pointer;
+          }
+        }
+        .common-select {
+          .common-select-sel {
+            width: 270px;
+          }
+        }
+      }
+      .bigImg-div {
+        width: 100px;
+        height: 100px;
+        line-height: 100px;
+        text-align: center;
+        overflow: hidden;
+        border: 1px solid #ddd;
+        .icon {
+          font-size: 16px;
+        }
+        .bigImg {
+          display: block;
+          width: 100px;
+          height: 100px;
+        }
+      }
+    }
+    .dialog-footer {
+      background-color: #f5f5f5;
+      height: 55px;
+      line-height: 55px;
+    }
+    .el-input__inner {
+      text-align: left;
+    }
+  }
+}
+</style>
diff --git a/src/views/productManage/product/DetailProduct.vue b/src/views/productManage/product/DetailProduct.vue
new file mode 100644
index 0000000..6a628ad
--- /dev/null
+++ b/src/views/productManage/product/DetailProduct.vue
@@ -0,0 +1,319 @@
+<template>
+  <div class="detail-view">
+    <el-drawer :visible.sync="detailConfig.visible" size="80%" :before-close="handleClose" :wrapperClosable="false">
+      <template slot="title">
+        <div class="header">
+          <span class="header-label">浜у搧璇︽儏</span>
+          <span class="header-title">{{ detailConfig.infomation.name }}</span>
+        </div>
+      </template>
+      <div class="content">
+        <div class="tab-view">
+          <el-tabs v-model="activeName" @tab-click="tabsClick">
+            <el-tab-pane label="璇︽儏" name="first"></el-tab-pane>
+            <!-- <el-tab-pane label="閲囪喘璁㈠崟" name="second"> </el-tab-pane> -->
+          </el-tabs>
+        </div>
+        <div v-if="activeName === 'first'" class="detail">
+          <!-- 鍩烘湰淇℃伅 -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('basic')">
+              <i v-if="isBasicExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">鍩烘湰淇℃伅</span>
+            </div>
+            <div v-show="isBasicExpand" class="basic-info-content">
+              <ul>
+                <li v-for="(item, i) in basicInfoList" :key="i">
+                  <div class="left">
+                    <div class="content-title">{{ item.leftStr + "锛�" }}</div>
+                    <div class="content-data">{{ item.leftValue ? item.leftValue : "--" }}</div>
+                  </div>
+                  <div v-if="item.rightStr && item.rightStr.length > 0" class="right">
+                    <div class="content-title">{{ item.rightStr + "锛�" }}</div>
+                    <div class="content-data">{{ item.rightValue ? item.rightValue : "--" }}</div>
+                  </div>
+                </li>
+              </ul>
+              <div class="business_scope">
+                <div class="content-title">{{ "鍥剧墖锛�" }}</div>
+                <div class="bigImg-div">
+                  <i class="el-icon-picture-outline icon" v-if="!valueUrl"></i>
+                  <img class="bigImg" :src="valueUrl" v-if="valueUrl" />
+                </div>
+              </div>
+              <div class="business_scope">
+                <div class="content-title">{{ "澶囨敞淇℃伅锛�" }}</div>
+                <div class="content-data">{{ record ? record : "--" }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-if="activeName === 'second'" class="second"></div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DetailProduct",
+  props: {
+    commonDetail: {
+      type: Object,
+      default: () => {
+        return {
+          visible: false,
+          infomation: {}
+        }
+      }
+    }
+  },
+  components: {},
+  computed: {},
+  data() {
+    return {
+      detailConfig: this.commonDetail,
+      activeName: "first",
+      isBasicExpand: true, // 鍩烘湰淇℃伅灞曞紑
+      basicInfoList: [],
+      addConfig: {},
+      record: "", // 鏈�鏂拌繘灞�
+      noContactDays: 0,
+      newContactDays: "",
+      valueUrl: ""
+    }
+  },
+  created() {
+    this.setData(this.detailConfig.infomation)
+    this.addConfig = {
+      id_name: "sales_leads_id",
+      id: this.detailConfig.infomation.id,
+      common_name: this.detailConfig.infomation.id,
+      sales_leads_name: this.detailConfig.infomation.name,
+      sales_leads_id: this.detailConfig.infomation.id
+    }
+  },
+  mounted() {},
+  methods: {
+    setData(item) {
+      if (item.FollowRecord && item.FollowRecord.length > 0) {
+        this.record = item.FollowRecord[0].record
+        console.log(item.FollowRecord[0].follow_time)
+        let follow_time = item.FollowRecord[0].follow_time
+        this.newContactDays = follow_time.substring(0, 10)
+        this.noContactDays = this.getDiffDay(Date.now(), this.newContactDays)
+      }
+      this.basicInfoList = [
+        {
+          leftStr: "浜у搧缂栫爜",
+          leftValue: item.number,
+          rightStr: "浜у搧鍚嶇О",
+          rightValue: item.name
+        },
+        {
+          leftStr: "浜у搧绫诲埆",
+          leftValue: item.contact_name,
+          rightStr: "渚涘簲鍟�",
+          rightValue: item.contact_position
+        },
+        {
+          leftStr: "瑙勬牸",
+          leftValue: item.contact_phone,
+          rightStr: "鍨嬪彿",
+          rightValue: "18513375588"
+        },
+        {
+          leftStr: "鍗曚綅",
+          leftValue: item.sales_resources,
+          rightStr: "浠锋牸",
+          rightValue: item.member_name
+        },
+        {
+          leftStr: "鏈�浣庡簱瀛�",
+          leftValue: item.sales_resources,
+          rightStr: "鏈�楂樺簱瀛�",
+          rightValue: ""
+        }
+      ]
+    },
+    handleClose() {
+      this.detailConfig.visible = false
+    },
+    // tab鍒囨崲
+    tabsClick(tab, event) {
+      console.log(tab, event)
+    },
+    // 灞曞紑鏀惰捣鐐瑰嚮浜嬩欢
+    expandClick(value) {
+      console.log(value)
+      if (value === "basic") {
+        this.isBasicExpand = !this.isBasicExpand
+      }
+    },
+    // 璁＄畻涓や釜鏃ユ湡涔嬮棿鐨勫樊鍊�
+    getDiffDay(date_1, date_2) {
+      let totalDays, diffDate
+      let myDate_1 = date_1
+      let myDate_2 = Date.parse(date_2)
+      // 灏嗕袱涓棩鏈熼兘杞崲涓烘绉掓牸寮忥紝鐒跺悗鍋氬樊
+      diffDate = Math.abs(myDate_1 - myDate_2) // 鍙栫浉宸绉掓暟鐨勭粷瀵瑰��
+
+      totalDays = Math.floor(diffDate / (1000 * 3600 * 24)) // 鍚戜笅鍙栨暣
+      // console.log(totalDays)
+
+      return totalDays // 鐩稿樊鐨勫ぉ鏁�
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+.detail-view {
+  .header {
+    height: 56px;
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+    .header-label {
+      padding: 5px;
+      border-radius: 4px;
+      background-color: #ff6600;
+      color: #fff;
+      font-size: 12px;
+    }
+    .header-title {
+      color: #323232;
+      font-size: 15px;
+      margin-left: 10px;
+      font-weight: inherit;
+    }
+  }
+  .content {
+    background-color: rgb(230, 233, 240);
+    padding: 8px;
+    .tab-view {
+      background: #fff;
+      // .tab-view-pane {
+      //   position: relative;
+      .item {
+        position: absolute;
+        top: 0px;
+        right: 0px;
+      }
+      // }
+    }
+    .detail {
+      .basic-info {
+        .basic-info-label {
+          padding-left: 10px;
+          height: 42px;
+          line-height: 42px;
+          background: #f4f8fe;
+          color: #333;
+          font-size: 14px;
+        }
+        .basic-info-content {
+          background: #fff;
+          ul {
+            padding-inline-start: 0;
+          }
+          li {
+            display: flex;
+            font-size: 14px;
+            font-family: PingFangSC;
+            border-bottom: 1px solid #f9f9fb;
+            .left,
+            .right {
+              width: 50%;
+              display: flex;
+              align-items: center;
+              height: 40px;
+              .content-title {
+                width: 320px;
+                text-align: right;
+                color: #555;
+              }
+              .content-data {
+                text-align: left;
+                margin-left: 25px;
+                color: #333;
+              }
+            }
+            .remark {
+              width: 100%;
+            }
+          }
+          .business_scope {
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            min-height: 40px;
+            .content-title {
+              width: 320px;
+              text-align: right;
+              color: #555;
+            }
+            .content-data {
+              flex: 1;
+              padding: 5px;
+              text-align: left;
+              margin-left: 25px;
+              color: #333;
+            }
+            .bigImg-div {
+              margin: 10px 25px;
+              width: 100px;
+              height: 100px;
+              line-height: 100px;
+              text-align: center;
+              overflow: hidden;
+              border: 1px solid #ddd;
+              .icon {
+                font-size: 26px;
+                color: #ddd;
+              }
+              .bigImg {
+                display: block;
+                width: 100px;
+                height: 100px;
+              }
+            }
+          }
+        }
+      }
+    }
+    .second {
+      background: #fff;
+      .followup-records {
+        .table-view {
+          margin-top: 0 !important;
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
+::v-deep {
+  .el-drawer__header {
+    padding: 0;
+    margin-bottom: 0px;
+  }
+  .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
+    padding-left: 20px;
+  }
+  .el-tabs__item.is-active {
+    color: $color-primary;
+  }
+  .el-tabs__item:hover {
+    color: $color-primary;
+  }
+  .el-tabs__active-bar {
+    background-color: $color-primary;
+  }
+  .el-tabs__header {
+    margin: 0;
+  }
+}
+</style>
diff --git a/src/views/productManage/product/index.vue b/src/views/productManage/product/index.vue
index 6c02040..6485e3e 100644
--- a/src/views/productManage/product/index.vue
+++ b/src/views/productManage/product/index.vue
@@ -1,46 +1,55 @@
 <template>
   <div class="rightContent">
     <div class="top">
-      <SearchCommonView
-        ref="searchCommonView"
-        :search-options="searchOptions"
-        @searchClick="searchClick"
-        @resetClick="resetClick"
-      />
-      <div class="btn-pager">
-        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
+      <div class="supplier-search">
+        <SearchCommonView
+          ref="searchCommonView"
+          :search-options="searchOptions"
+          @searchClick="searchClick"
+          @resetClick="resetClick"
+        />
+        <div class="add-view">
+          <el-button type="primary" size="mini" @click="addBtnClick">鏂板缓</el-button>
+        </div>
       </div>
-    </div>
-    <TableCommonView
-      ref="tableListRef"
-      :table-list="tableList"
-      @selSalesLeadClick="selSalesLeadClick"
-      @getSelectArray="getSelectArray"
-    >
-      <template slot="tableButton">
-        <el-table-column label="鎿嶄綔" width="120">
-          <template slot-scope="scope">
-            <el-button @click="handleClick(scope.row)" type="text" size="small">鍚敤</el-button>
-            <el-button @click="followupClick(scope.row)" type="text" size="small">鍋滅敤</el-button>
-            <el-button @click="advanceClick(scope.row)" type="text" size="small">淇敼</el-button>
-            <!-- <el-button @click="delClick(scope.row.id)" type="text" size="small">鍒犻櫎</el-button> -->
+      <template>
+        <TableCommonView
+          ref="tableListRef"
+          :table-list="tableList"
+          @selCommonClick="selCommonClick"
+          @getSelectArray="getSelectArray"
+        >
+          <template slot="tableButton">
+            <el-table-column label="鎿嶄綔" width="120">
+              <template slot-scope="scope">
+                <el-button @click="handleClick(scope.row)" type="text" size="small">缂栬緫</el-button>
+                <el-button @click="delClick(scope.row.id)" type="text" size="small">鍒犻櫎</el-button>
+              </template>
+            </el-table-column>
           </template>
-        </el-table-column>
+        </TableCommonView>
+        <div class="btn-pager">
+          <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
+        </div>
       </template>
-    </TableCommonView>
-    <!-- 鏂板缓/缂栬緫閿�鍞嚎绱� -->
-    <!-- <AddSalesLeadDialog v-if="editSalesLeadConfig.visible" :edit-sales-lead-config="editSalesLeadConfig" /> -->
+    </div>
+    <!-- 鏂板缓/缂栬緫浜у搧 -->
+    <AddProduct v-if="editConfig.visible" :add-common-config="editConfig" />
+    <!-- 璇︽儏 -->
+    <DetailProduct v-if="commonDetail.visible" :common-detail="commonDetail" />
   </div>
 </template>
 
 <script>
 import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
 import { getSalesLeadsList, getDeleteSalesLeads } from "@/api/client/salesLead"
+import DetailProduct from "@/views/productManage/product/DetailProduct"
+import AddProduct from "@/views/productManage/product/AddProduct"
 
 export default {
   name: "PruductManage",
   props: {},
-  components: {},
+  components: { DetailProduct, AddProduct },
   mixins: [pageMixin],
   computed: {},
   data() {
@@ -48,28 +57,15 @@
       tableList: {},
       selValueList: [],
       searchOptions: [],
-      editSalesLeadConfig: {
+      commonDetail: {
         visible: false,
         title: "鏂板缓",
-        infomation: {}
-      },
-      importConfig: {
-        visible: false,
-        title: "鏂板缓",
-        infomation: {}
-      },
-      salesLeadDeail: {
-        visible: false,
         infomation: {}
       },
       editConfig: {
         visible: false,
         title: "鏂板缓",
         infomation: {}
-      },
-      advanceConfig: {
-        visible: false,
-        sales_status: 1
       },
       search_map: {}
     }
@@ -82,15 +78,18 @@
     setTable() {
       this.tableList = {
         tableInfomation: [],
+        selectIndex: true,
         tableColumn: [
-          { label: "渚涘簲鍟嗙紪鍙�", prop: "name", min: 190, isSalesLeadClick: true },
-          { label: "渚涘簲鍟嗗悕绉�", prop: "number", min: 130 },
-          { label: "渚涘簲鍟嗙被鍨�", prop: "contact_name", min: 130 },
-          { label: "鎵�灞炶涓�", prop: "contact_phone", min: 130 },
-          { label: "鑱旂郴浜�", prop: "sales_resources", min: 130 },
-          { label: "鑱旂郴鐢佃瘽", prop: "province", min: 130 },
-          { label: "鐘舵��", prop: "city", min: 130 },
-          { label: "鍒涘缓鏃堕棿", prop: "member_name", min: 130 }
+          { label: "浜у搧缂栫爜", prop: "number", min: 190, isCommonClick: true },
+          { label: "浜у搧鍚嶇О", prop: "name", min: 130 },
+          { label: "渚涘簲鍟�", prop: "id", min: 130 },
+          { label: "浜у搧绫诲埆", prop: "contact_phone", min: 130 },
+          { label: "瑙勬牸", prop: "sales_resources", min: 130 },
+          { label: "鍨嬪彿", prop: "province", min: 130 },
+          { label: "鍗曚綅", prop: "sales_sources_id", min: 60 },
+          { label: "浠锋牸", prop: "contact_phone1", min: 130 },
+          { label: "鏈�浣庡簱瀛�", prop: "desc", min: 80 },
+          { label: "鏈�楂樺簱瀛�", prop: "member_name", min: 80 }
         ]
       }
       this.searchOptions = []
@@ -111,8 +110,6 @@
           const list = res.data.list.map((item) => {
             return {
               ...item,
-              province: item.Province.name,
-              city: item.City.name,
               sales_resources: item.sales_sources.name,
               member_name: item.member.username
             }
@@ -138,27 +135,14 @@
     },
     // 鏂板缓
     addBtnClick() {
-      this.editSalesLeadConfig.visible = true
-      this.editSalesLeadConfig.title = "鏂板缓"
-      this.editSalesLeadConfig.infomation = { businessStatus: "鏂板缓", city_id: 0 }
+      this.editConfig.visible = true
+      this.editConfig.title = "鏂板缓"
     },
     // 缂栬緫
     handleClick(row) {
       console.log(row)
-      this.editSalesLeadConfig.visible = true
-      this.editSalesLeadConfig.title = "缂栬緫"
-      this.editSalesLeadConfig.infomation = { ...row, businessStatus: "鏂板缓" }
-    },
-    // 璺熻繘
-    followupClick(row) {
       this.editConfig.visible = true
-      this.editConfig.title = "鏂板缓"
-      this.editConfig.infomation = { sales_leads_name: row.name }
-    },
-    // 瀵煎叆
-    importClitk() {
-      this.importConfig.visible = true
-      this.importConfig.title = "閿�鍞嚎绱�"
+      this.editConfig.title = "缂栬緫"
     },
     // 鍒犻櫎
     delClick() {
@@ -192,17 +176,10 @@
       this.selValueList = list
     },
     // 璇︽儏
-    selSalesLeadClick(row) {
+    selCommonClick(row) {
       console.log(row)
-      this.salesLeadDeail.visible = true
-      this.salesLeadDeail.infomation = { ...row }
-    },
-    // 鎺ㄨ繘
-    advanceClick(row) {
-      console.log(row)
-      this.advanceConfig.visible = true
-      this.advanceConfig.sales_status = row.sales_status
-      this.advanceConfig.infomation = { ...row }
+      this.commonDetail.visible = true
+      this.commonDetail.infomation = { ...row }
     }
   }
 }
@@ -210,9 +187,17 @@
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-.sales-lead {
+.rightContent {
   .top {
     margin-bottom: 20px;
+    .supplier-search {
+      display: flex;
+      align-items: center;
+      .add-view {
+        margin-left: auto;
+        margin-right: 20px;
+      }
+    }
     .btn-pager {
       display: flex;
       .page {
diff --git a/src/views/supplierManage/supplier/AddNewProduct.vue b/src/views/supplierManage/supplier/AddNewProduct.vue
new file mode 100644
index 0000000..106c93d
--- /dev/null
+++ b/src/views/supplierManage/supplier/AddNewProduct.vue
@@ -0,0 +1,226 @@
+<template>
+  <div class="add-common">
+    <el-dialog
+      :title="addCommonConfig.title + '鎻愪緵鐨勪骇鍝�'"
+      :visible.sync="editConfig.visible"
+      :width="dialogWidth"
+      :before-close="handleClose"
+      :close-on-click-modal="false"
+      append-to-body
+      custom-class="iframe-dialog"
+    >
+      <div class="basic-info">
+        <!-- 浜у搧淇℃伅 -->
+        <div class="basic-info-title">浜у搧淇℃伅</div>
+        <div class="basic-info-view">
+          <CommonFormTableView
+            :product-table-list="productTableList"
+            @inputContent="inputContent"
+            @addProductClick="addProductClick"
+            @emptyProductClick="emptyProductClick"
+            @clearupProduct="clearupProduct"
+          />
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" size="small" @click="saveClick">淇� 瀛�</el-button>
+        <el-button size="small" @click="editConfig.visible = false">鍙� 娑�</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getAddContact, getUpdateContact } from "@/api/client/contacts"
+import CommonFormTableView from "@/components/makepager/CommonFormTableView"
+export default {
+  name: "AddNewProduct",
+  props: {
+    addCommonConfig: {
+      type: Object,
+      default: () => {
+        return {
+          visible: false,
+          title: "娣诲姞",
+          infomation: {}
+        }
+      }
+    }
+  },
+  components: { CommonFormTableView },
+  computed: {},
+  data() {
+    return {
+      dialogWidth: "80%",
+      editConfig: this.addCommonConfig,
+      productTableList: {},
+      tableData: [],
+      productId: 1,
+      isNoProduct: true
+    }
+  },
+  created() {
+    // if (this.editConfig.title !== "娣诲姞" && this.editConfig.infomation.province_id !== 0) {
+    //   this.getCityList(this.editConfig.infomation.province_id, "edit")
+    // }
+    this.setTableForm()
+  },
+  methods: {
+    handleClose() {
+      this.editConfig.visible = false
+    },
+    // 淇濆瓨
+    saveClick() {
+      console.log(this.editConfig.infomation)
+      const params = this.saveParams()
+      console.log(params)
+      if (this.editConfig.title === "娣诲姞") {
+        getAddContact(params).then((res) => {
+          console.log(res)
+          this.editConfig.visible = false
+          if (res.code === 200) {
+            this.$message.success("娣诲姞鎴愬姛")
+            this.$parent.getData()
+          }
+        })
+      } else {
+        getUpdateContact(params).then((res) => {
+          console.log(res)
+          this.editConfig.visible = false
+          if (res.code === 200) {
+            this.$message.success("缂栬緫鎴愬姛")
+            this.$parent.getData()
+          }
+        })
+      }
+    },
+    saveParams() {
+      let data = this.editConfig.infomation
+      let params = {
+        id: this.editConfig.title === "娣诲姞" ? 0 : data.id,
+        birthday: data.birthday || "",
+        city_id: data.city_id || 0,
+        client_id: this.clientId || 0,
+        country_id: data.country_id || 0,
+        desc: data.desc || "",
+        email: data.email || "",
+        is_first: data.is_first || false,
+        member_id: data.member_id || 0,
+        name: data.name || "",
+        number: data.number || "",
+        phone: data.phone || "",
+        position: data.position || "",
+        province_id: data.province_id || 0,
+        region_id: data.region_id || 0,
+        wechat: data.wechat || ""
+      }
+      return params
+    },
+    setTableForm() {
+      if (this.editConfig.title === "娣诲姞" || this.editConfig.infomation.products.length === 0) {
+        this.tableData = [
+          {
+            productId: this.productId,
+            id: 0,
+            amount: 0,
+            desc: "",
+            name: "",
+            number: "",
+            price: 0,
+            total: 0
+          }
+        ]
+      } else {
+        this.tableData = this.editConfig.infomation.products
+        this.tableData.map((item, index) => {
+          item.productId = index + 1
+        })
+      }
+      this.productTableList = {
+        tableData: this.tableData,
+        tableColumn: [
+          { label: "浜у搧鍚嶇О", prop: "name", productName: true, isRequird: true },
+          { label: "浜у搧缂栫爜", prop: "number" },
+          { label: "璁￠噺鍗曚綅", prop: "number" },
+          { label: "瑙勬牸鍨嬪彿", prop: "number" },
+          { label: "閲囪喘浠锋牸", prop: "amount", inputFloat: true, isRequird: true },
+          { label: "渚涜揣鏃堕暱", prop: "price", inputNumber: true, isRequird: true },
+          { label: "鐗╂祦鏃堕暱", prop: "total", inputNumber: true, isRequird: true }
+        ]
+      }
+    },
+    // 浜у搧鍒楄〃杈撳叆
+    inputContent(val, prop, row) {
+      this.productId = row.productId
+      this.tableData.map((item) => {
+        if (item.productId === row.productId) {
+          item[prop] = val
+        }
+      })
+    },
+    // 浜у搧鏂板
+    addProductClick() {
+      this.productId++
+      this.tableData.push({
+        productId: this.productId,
+        id: 0,
+        amount: 0,
+        desc: "",
+        name: "",
+        number: "",
+        price: 0,
+        total: 0
+      })
+    },
+    //  浜у搧娓呯┖
+    emptyProductClick() {
+      this.productId = 1
+      this.tableData = [
+        {
+          productId: this.productId,
+          id: 0,
+          amount: 0,
+          desc: "",
+          name: "",
+          number: "",
+          price: 0,
+          total: 0
+        }
+      ]
+      this.productTableList.tableData = this.tableData
+    },
+    // 浜у搧娓呴櫎
+    clearupProduct(data) {
+      this.tableData = data
+      this.productTableList.tableData = this.tableData
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+::v-deep {
+  .iframe-dialog .el-dialog__body {
+    .basic-info {
+      .basic-info-title {
+        background-color: #f4f8fe;
+        padding-left: 10px;
+        font-size: 15px;
+        font-weight: bold;
+        color: #666;
+        height: 42px;
+        line-height: 42px;
+      }
+      .basic-info-view {
+        margin-top: 10px;
+      }
+    }
+    .dialog-footer {
+      background-color: #f5f5f5;
+      height: 55px;
+      line-height: 55px;
+    }
+  }
+}
+</style>
diff --git a/src/views/supplierManage/supplier/AddSupplier.vue b/src/views/supplierManage/supplier/AddSupplier.vue
new file mode 100644
index 0000000..42d0ac3
--- /dev/null
+++ b/src/views/supplierManage/supplier/AddSupplier.vue
@@ -0,0 +1,369 @@
+<template>
+  <div class="add-common">
+    <el-dialog
+      :title="addCommonConfig.title + '渚涘簲鍟�'"
+      :visible.sync="editConfig.visible"
+      :width="dialogWidth"
+      :before-close="handleClose"
+      :close-on-click-modal="false"
+      append-to-body
+      custom-class="iframe-dialog"
+    >
+      <el-form
+        ref="form"
+        :model="editConfig.infomation"
+        :rules="rules"
+        label-position="right"
+        label-width="308px"
+        size="mini"
+      >
+        <!-- 淇℃伅 -->
+        <div class="basic-info">
+          <!-- 鍩烘湰淇℃伅 -->
+          <div class="basic-info-title">鍩烘湰淇℃伅</div>
+          <div class="basic-info-view">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="渚涘簲鍟嗙紪鍙�" prop="number">
+                  <el-input v-model="editConfig.infomation.number"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="渚涘簲鍟嗗悕绉�" prop="supplier_name">
+                  <el-input v-model="editConfig.infomation.name"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="渚涘簲鍟嗙被鍨�" prop="supplierType_id">
+                  <div class="custom-name">
+                    <el-select
+                      v-model="editConfig.infomation.supplierType_id"
+                      placeholder="璇烽�夋嫨渚涘簲鍟嗙被鍨�"
+                      class="common-select-sel"
+                      size="mini"
+                    >
+                      <el-option v-for="item in supplierTypeOptions" :key="item.id" :label="item.name" :value="item.id">
+                      </el-option>
+                    </el-select>
+                    <div class="common-select-btn" @click="setSupplierType"><i class="el-icon-setting"></i></div>
+                  </div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="鎵�灞炶涓�" prop="industry_id">
+                  <div class="custom-name">
+                    <el-select
+                      v-model="editConfig.infomation.industry_id"
+                      placeholder="璇烽�夋嫨渚涘簲鍟嗚涓�"
+                      class="common-select-sel"
+                      size="mini"
+                    >
+                      <el-option v-for="item in industryOptions" :key="item.id" :label="item.name" :value="item.id">
+                      </el-option>
+                    </el-select>
+                    <div class="common-select-btn" @click="setIndustry"><i class="el-icon-setting"></i></div>
+                  </div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="鑱旂郴浜�" prop="contact_name">
+                  <el-input v-model="editConfig.infomation.contact_name"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="鑱旂郴鐢佃瘽" prop="phone">
+                  <el-input
+                    v-model="editConfig.infomation.phone"
+                    maxlength="11"
+                    show-word-limit
+                    oninput="value=value.replace(/[^\d]/g,'')"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="閿�鍞礋璐ｄ汉" prop="sale_member">
+                  <el-input v-model="editConfig.infomation.sale_member" disabled></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="閭" prop="email">
+                  <el-input v-model="editConfig.infomation.email"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="璇︾粏鍦板潃" prop="address_detail">
+                  <el-input
+                    type="textarea"
+                    :autosize="{ minRows: 2 }"
+                    placeholder="璇疯緭鍏ュ唴瀹�"
+                    v-model="editConfig.infomation.address_detail"
+                    disabled
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="缃戝潃" prop="webUrl">
+                  <el-input v-model="editConfig.infomation.webUrl" disabled></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+          <!-- 鍏ラ┗淇℃伅 -->
+          <div class="basic-info-title">鍏ラ┗淇℃伅</div>
+          <div class="basic-info-view">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="鎴峰悕" prop="account_name">
+                  <el-input v-model="editConfig.infomation.account_name" disabled></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="寮�鎴疯" prop="account_name">
+                  <el-input v-model="editConfig.infomation.account_name" disabled></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="璐﹀彿" prop="account_name">
+                  <el-input v-model="editConfig.infomation.account_name" disabled></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="闄勪欢" prop="">
+                  <template slot="label">
+                    <div style="display: flex; float: right">
+                      <div style="font-size: 16px">
+                        <i class="el-icon-warning-outline" title="鏈�澶氫笂浼�20涓檮浠讹紝鏈�澶ч檺鍒�5MB"></i>
+                      </div>
+                      <span style="margin-left: 5px">鍚堝悓闄勪欢</span>
+                    </div>
+                  </template>
+                  <div class="annex-view">
+                    <div @click="addAnnexClick">
+                      <div style="display: flex; float: right">
+                        <div style="font-size: 16px"><i class="el-icon-paperclip"></i></div>
+                        <span>娣诲姞闄勪欢</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="file-content">
+                    <div>鏂囦欢鍚嶇О</div>
+                    <div>
+                      <el-button type="text">棰勮</el-button>
+                      <el-button type="text">涓嬭浇</el-button>
+                      <el-button type="text">鍒犻櫎</el-button>
+                    </div>
+                  </div>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" size="small" @click="saveClick('form')">淇� 瀛�</el-button>
+        <el-button size="small" @click="editConfig.visible = false">鍙� 娑�</el-button>
+      </div>
+    </el-dialog>
+    <!-- 缂栬緫涓嬫媺妗� -->
+    <EditDropdownDialog v-if="editDropdownConfig.editVisible" :edit-dropdown-config="editDropdownConfig" />
+  </div>
+</template>
+
+<script>
+import { getAddContact, getUpdateContact } from "@/api/client/contacts"
+import EditDropdownDialog from "@/views/other/commonDialog/EditDropdownDialog"
+export default {
+  name: "AddSupplierDialog",
+  props: {
+    addCommonConfig: {
+      type: Object,
+      default: () => {
+        return {
+          visible: false,
+          title: "鏂板缓",
+          infomation: {}
+        }
+      }
+    }
+  },
+  components: { EditDropdownDialog },
+  computed: {},
+  data() {
+    return {
+      dialogWidth: "80%",
+      editConfig: this.addCommonConfig,
+      rules: {
+        supplier_name: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+        member_id: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }],
+        phone: [
+          { required: false, message: "", trigger: "blur" },
+          { len: 11, message: "闀垮害鍦�11涓瓧绗�", trigger: "blur" },
+          {
+            pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
+            message: "璇疯緭鍏ユ纭殑鎵嬫満鍙�",
+            trigger: "blur"
+          }
+        ],
+        email: [
+          { required: false, message: "", trigger: "blur" },
+          {
+            pattern: /^[a-zA-Z0-9_\\.]+@[a-zA-Z0-9-]+[\\.a-zA-Z]+$/,
+            message: "璇疯緭鍏ユ纭殑閭鏍煎紡",
+            trigger: "blur"
+          }
+        ]
+      },
+      supplierTypeOptions: [], // 渚涘簲鍟嗙被鍨�
+      industryOptions: [], // 鎵�灞炶涓�
+      memberOptions: [],
+      editDropdownConfig: {
+        editVisible: false,
+        title: "",
+        infomation: {}
+      }
+    }
+  },
+  created() {
+    if (this.editConfig.title !== "鏂板缓" && this.editConfig.infomation.province_id !== 0) {
+      this.getCityList(this.editConfig.infomation.province_id, "edit")
+    }
+  },
+  methods: {
+    handleClose() {
+      this.editConfig.visible = false
+    },
+    // 淇濆瓨
+    saveClick(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          console.log(this.editConfig.infomation)
+          const params = this.saveParams()
+          console.log(params)
+          if (this.editConfig.title === "鏂板缓") {
+            getAddContact(params)
+              .then((res) => {
+                console.log(res)
+                this.editConfig.visible = false
+                if (res.code === 200) {
+                  this.$message({
+                    message: "娣诲姞鎴愬姛",
+                    type: "success"
+                  })
+                  this.$parent.getData()
+                }
+              })
+              .catch((err) => {
+                console.log(err)
+              })
+          } else {
+            getUpdateContact(params)
+              .then((res) => {
+                console.log(res)
+                this.editConfig.visible = false
+                if (res.code === 200) {
+                  this.$message({
+                    message: "缂栬緫鎴愬姛",
+                    type: "success"
+                  })
+                  this.$parent.getData()
+                }
+              })
+              .catch((err) => {
+                console.log(err)
+              })
+          }
+        } else {
+          console.log("error submit")
+          return false
+        }
+      })
+    },
+    saveParams() {
+      let data = this.editConfig.infomation
+      let params = {
+        id: this.editConfig.title === "鏂板缓" ? 0 : data.id,
+        birthday: data.birthday || "",
+        city_id: data.city_id || 0,
+        client_id: this.clientId || 0,
+        country_id: data.country_id || 0,
+        desc: data.desc || "",
+        email: data.email || "",
+        is_first: data.is_first || false,
+        member_id: data.member_id || 0,
+        name: data.name || "",
+        number: data.number || "",
+        phone: data.phone || "",
+        position: data.position || "",
+        province_id: data.province_id || 0,
+        region_id: data.region_id || 0,
+        wechat: data.wechat || ""
+      }
+      return params
+    },
+    // 娣诲姞闄勪欢
+    addAnnexClick() {},
+    // 璁剧疆渚涘簲鍟嗙被鍨�
+    setSupplierType() {
+      this.editDropdownConfig.editVisible = true
+      this.editDropdownConfig.title = "渚涘簲鍟嗙被鍨�"
+    },
+    // 璁剧疆鎵�灞炶涓�
+    setIndustry() {
+      this.editDropdownConfig.editVisible = true
+      this.editDropdownConfig.title = "鎵�灞炶涓�"
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+::v-deep {
+  .iframe-dialog .el-dialog__body {
+    .basic-info {
+      .basic-info-title {
+        background-color: #f4f8fe;
+        padding-left: 10px;
+        font-size: 15px;
+        font-weight: bold;
+        color: #666;
+        height: 42px;
+        line-height: 42px;
+      }
+      .basic-info-view {
+        margin-top: 10px;
+        padding-right: 40px;
+        .custom-name,
+        .common-select {
+          display: flex;
+          .common-select-btn {
+            margin-left: 5px;
+            font-size: 18px;
+            cursor: pointer;
+          }
+        }
+        .common-select {
+          .common-select-sel {
+            width: 270px;
+          }
+        }
+      }
+      .annex-view {
+        display: flex;
+        color: #6166d3;
+        .setFormat {
+          margin-left: 10px;
+        }
+      }
+      .file-content {
+        display: flex;
+      }
+    }
+    .dialog-footer {
+      background-color: #f5f5f5;
+      height: 55px;
+      line-height: 55px;
+    }
+  }
+}
+</style>
diff --git a/src/views/supplierManage/supplier/RaleteSupplierList.vue b/src/views/supplierManage/supplier/RaleteSupplierList.vue
new file mode 100644
index 0000000..c3755a2
--- /dev/null
+++ b/src/views/supplierManage/supplier/RaleteSupplierList.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="add-common">
+    <el-dialog
+      :title="'鐩稿叧渚涘簲鍟�'"
+      :visible.sync="editConfig.visible"
+      :width="dialogWidth"
+      :before-close="handleClose"
+      :close-on-click-modal="false"
+      append-to-body
+      custom-class="iframe-dialog"
+    >
+      <div class="table-view">
+        <TableCommonView ref="tableListRef" :table-list="tableList" @selCommonClick="selCommonClick"> </TableCommonView>
+        <div class="btn-pager">
+          <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer"></div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// import SelectClientDialog from "@/views/other/commonDialog/SelectClientDialog"
+import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
+export default {
+  name: "AddSupplierDialog",
+  mixins: [pageMixin],
+  props: {
+    commonConfig: {
+      type: Object,
+      default: () => {
+        return {
+          visible: false,
+          infomation: {}
+        }
+      }
+    }
+  },
+  components: {},
+  computed: {},
+  data() {
+    return {
+      dialogWidth: "80%",
+      editConfig: this.commonConfig,
+      tableList: {}
+    }
+  },
+  created() {
+    this.setTable()
+  },
+  methods: {
+    setTable() {
+      this.tableList = {
+        tableInfomation: [],
+        selectIndex: true,
+        tableColumn: [
+          { label: "渚涘簲鍟嗙紪鍙�", prop: "number", min: 190, isCommonClick: true },
+          { label: "渚涘簲鍟嗗悕绉�", prop: "name", min: 130 },
+          { label: "閲囪喘浠锋牸", prop: "contact_name", min: 130 },
+          { label: "渚涜揣澶╂暟", prop: "contact_phone", min: 130 },
+          { label: "鐗╂祦鏃堕暱(澶�)", prop: "sales_resources", min: 130 }
+        ]
+      }
+    },
+    handleClose() {
+      this.editConfig.visible = false
+    },
+    selCommonClick(row) {
+      console.log(row)
+      // this.commonDetail.visible = true
+      // this.commonDetail.infomation = { ...row }
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+::v-deep {
+  .iframe-dialog .el-dialog__body {
+    .table-view {
+      margin: 10px;
+      .btn-pager {
+        display: flex;
+        align-items: center;
+        .page {
+          margin-left: auto;
+        }
+      }
+    }
+  }
+  .el-dialog__footer {
+    background-color: #ffffff;
+    height: 10px;
+    border-top: 0px;
+  }
+}
+</style>
diff --git a/src/views/supplierManage/supplier/index.vue b/src/views/supplierManage/supplier/index.vue
index 5aa9d44..354b34f 100644
--- a/src/views/supplierManage/supplier/index.vue
+++ b/src/views/supplierManage/supplier/index.vue
@@ -23,7 +23,7 @@
             <el-table-column label="鎿嶄綔" width="120">
               <template slot-scope="scope">
                 <el-button @click="handleClick(scope.row)" type="text" size="small">鍚敤</el-button>
-                <el-button @click="followupClick(scope.row)" type="text" size="small">鍋滅敤</el-button>
+                <el-button @click="editClick(scope.row)" type="text" size="small">鍋滅敤</el-button>
                 <el-button @click="modifyClick(scope.row)" type="text" size="small">淇敼</el-button>
                 <!-- <el-button @click="delClick(scope.row.id)" type="text" size="small">鍒犻櫎</el-button> -->
               </template>
@@ -49,7 +49,7 @@
           @resetClick="resetClick"
         />
         <div class="add-view">
-          <el-button type="primary" size="mini">鏂板缓</el-button>
+          <el-button type="primary" size="mini" @click="addNewProductClick">娣诲姞鏂颁骇鍝�</el-button>
         </div>
       </div>
       <template>
@@ -60,10 +60,10 @@
           @getSelectArray="getSelectArray"
         >
           <template slot="tableButton">
-            <el-table-column label="鎿嶄綔" width="120">
+            <el-table-column label="鎿嶄綔" width="170">
               <template slot-scope="scope">
-                <el-button @click="handleClick(scope.row)" type="text" size="small">鐩稿叧渚涘簲鍟�</el-button>
-                <el-button @click="followupClick(scope.row)" type="text" size="small">淇敼</el-button>
+                <el-button @click="raleteClick(scope.row)" type="text" size="small">鐩稿叧渚涘簲鍟�</el-button>
+                <el-button @click="editClick(scope.row)" type="text" size="small">淇敼</el-button>
                 <el-button @click="delClick(scope.row)" type="text" size="small">鍒犻櫎</el-button>
                 <!-- <el-button @click="delClick(scope.row.id)" type="text" size="small">鍒犻櫎</el-button> -->
               </template>
@@ -76,9 +76,13 @@
       </template>
     </div>
     <!-- 鏂板缓/缂栬緫閿�鍞嚎绱� -->
-    <!-- <AddSalesLeadDialog v-if="editSalesLeadConfig.visible" :edit-rightContent-config="editSalesLeadConfig" /> -->
+    <AddSupplier v-if="editConfig.visible" :add-common-config="editConfig" />
     <!-- 璇︽儏 -->
     <DetailSupplier v-if="commonDetail.visible" :common-detail="commonDetail" />
+    <!-- 鐩稿叧渚涘簲鍟� -->
+    <RaleteSupplierList v-if="raleteSupplierConfig.visible" :common-config="raleteSupplierConfig" />
+    <!-- 娣诲姞鏂颁骇鍝� -->
+    <AddNewProduct v-if="newProductConfig.visible" :add-common-config="newProductConfig" />
   </div>
 </template>
 
@@ -86,11 +90,14 @@
 import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
 import { getSalesLeadsList, getDeleteSalesLeads } from "@/api/client/salesLead"
 import DetailSupplier from "@/views/supplierManage/supplier/DetailSupplier"
+import AddSupplier from "@/views/supplierManage/supplier/AddSupplier"
+import RaleteSupplierList from "@/views/supplierManage/supplier/RaleteSupplierList"
+import AddNewProduct from "@/views/supplierManage/supplier/AddNewProduct"
 
 export default {
   name: "SupplierManage",
   props: {},
-  components: { DetailSupplier },
+  components: { DetailSupplier, AddSupplier, RaleteSupplierList, AddNewProduct },
   mixins: [pageMixin],
   computed: {},
   data() {
@@ -107,6 +114,15 @@
       editConfig: {
         visible: false,
         title: "鏂板缓",
+        infomation: {}
+      },
+      raleteSupplierConfig: {
+        visible: false,
+        infomation: {}
+      },
+      newProductConfig: {
+        visible: false,
+        title: "娣诲姞",
         infomation: {}
       },
       search_map: {}
@@ -142,12 +158,16 @@
     },
     setProductTable() {
       this.productTableList = {
-        tableInfomation: [],
+        tableInfomation: [
+          {
+            number: "aaaaa"
+          }
+        ],
         selectBox: true,
         selectIndex: true,
         tableColumn: [
-          { label: "浜у搧缂栫爜", prop: "name", min: 190, isSalesLeadClick: true },
-          { label: "浜у搧鍚嶇О", prop: "number", min: 130 },
+          { label: "浜у搧缂栫爜", prop: "number", min: 190 },
+          { label: "浜у搧鍚嶇О", prop: "name", min: 130 },
           { label: "浜у搧瑙勬牸", prop: "contact_name", min: 130 },
           { label: "鍗曚綅", prop: "contact_phone", min: 130 },
           { label: "閲囪喘浠锋牸", prop: "sales_resources", min: 130 },
@@ -199,7 +219,10 @@
       this.getData()
     },
     // 鏂板缓渚涘簲鍟�
-    addBtnClick() {},
+    addBtnClick() {
+      this.editConfig.visible = true
+      this.editConfig.title = "鏂板缓"
+    },
     // 缂栬緫渚涘簲鍟�
     handleClick(row) {
       console.log(row)
@@ -207,12 +230,26 @@
     // 淇敼渚涘簲鍟�
     modifyClick(row) {
       console.log(row)
-    },
-    // 璺熻繘
-    followupClick(row) {
       this.editConfig.visible = true
-      this.editConfig.title = "鏂板缓"
-      this.editConfig.infomation = { sales_leads_name: row.name }
+      this.editConfig.title = "淇敼"
+      this.editConfig.infomation = { ...row }
+    },
+    // 鐩稿叧渚涘簲鍟�
+    raleteClick(row) {
+      console.log(row)
+      this.raleteSupplierConfig.visible = true
+      this.raleteSupplierConfig.infomation = { ...row }
+    },
+    // 娣诲姞鏂颁骇鍝�
+    addNewProductClick() {
+      this.newProductConfig.visible = true
+      this.newProductConfig.title = "娣诲姞"
+    },
+    // 淇敼浜у搧
+    editClick(row) {
+      console.log(row)
+      this.newProductConfig.visible = true
+      // this.newProductConfig.title = "淇敼"
     },
     // 鍒犻櫎
     delClick() {

--
Gitblit v1.8.0