Merge branch 'master' of ssh://192.168.5.5:29418/web/SRM

haoxuan

2023-08-25 641ce71b7b29c32105c82619fa7abfb9b2f38e3b

Merge branch 'master' of ssh://192.168.5.5:29418/web/SRM

 src/assets/logo.png

 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;
    }

 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

 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,13 @@
    </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" v-if="recalculateShow" 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"
@@ -297,6 +280,7 @@
      })
      return sums
    },

    // 数字换行为金额显示格式
    number_format(number, decimals, dec_point, thousands_sep) {
      decimals = 2 //这里默认设置保留两位小数，也可以注释这句采用传入的参数
@@ -338,21 +322,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) {
@@ -412,6 +381,10 @@
        }
      })
      this.$emit("clearupProduct", this.tableList.tableData)
    },
    // 删除
    deleteClient(row) {
      this.$emit("deleteProduct", row)
    }
  }
}

 src/components/makepager/TableCommonView.vue

@@ -119,7 +119,7 @@
          show: false,
          sumProp: [],
          mergeNumber: 1,
          totalName:'本页总计'
          totalName: "本页总计"
        }
      }
    }

 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>

 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")
      }
    },

 src/views/productManage/product/AddProduct.vue

New file
@@ -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的src
            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>

 src/views/productManage/product/DetailProduct.vue

New file
@@ -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>

 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 {

 src/views/supplierManage/supplier/AddNewProduct.vue

New file
@@ -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>

 src/views/supplierManage/supplier/AddSupplier.vue

New file
@@ -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>

 src/views/supplierManage/supplier/RaleteSupplierList.vue

New file
@@ -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>

 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() {