销售模块部分页面及新建页面添加

yangfeng

2023-07-06 2605e8abbd4d5c8b6fc7086b05b876ed96917bb4

销售模块部分页面及新建页面添加

 src/components/makepager/PublicFunctionBtnView.vue

@@ -37,16 +37,20 @@
        </div>
      </div>
      <!-- 列表 -->
      <div v-if="listButton" class="gray btn-icon" @click="listBtnClick">
      <div v-if="listButton" class="btn-icon" @click="listBtnClick">
        <i class="el-icon-tickets"></i>
      </div>
      <!-- 地图 -->
      <div v-if="mapButton" class="gray btn-icon" @click="mapBtnClick">
      <div v-if="mapButton" class="btn-icon" @click="mapBtnClick">
        <i class="el-icon-location-information"></i>
      </div>
      <!-- 统计 -->
      <div v-if="statistics" class="gray btn-icon" @click="statisticsBtnClick">
      <div v-if="statistics" class="btn-icon" @click="statisticsBtnClick">
        <i class="el-icon-data-line"></i>
      </div>
      <!-- 客户漏斗 -->
      <div v-if="customFunnel" class="btn-icon" @click="statisticsBtnClick" style="color: #666">
        <i class="el-icon-postcard" title="客户漏斗"></i>
      </div>
    </div>
  </div>
@@ -81,6 +85,10 @@
      default: false
    },
    statistics: {
      type: Boolean,
      default: false
    },
    customFunnel: {
      type: Boolean,
      default: false
    },
@@ -167,6 +175,7 @@
      font-size: 20px;
      border-radius: 4px;
      color: rgb(0, 102, 255);
      background-color: #f2f4fb;
    }
    .view-scope {
      display: flex;

 src/components/makepager/SearchCommonView.vue

@@ -29,6 +29,10 @@
          <div class="high-icon"><i class="el-icon-news"></i></div>
          <div>平铺查找</div>
        </div>
        <div v-if="labelSearch" class="other-search-label" @click="labelSearchClick">
          <div class="high-icon"><i class="el-icon-discount"></i></div>
          <div>标签查找</div>
        </div>
      </div>
    </div>
    <div v-if="isTileSearch" class="search-bottom">
@@ -101,29 +105,17 @@
    searchOptions: {
      type: Array,
      default: () => []
    },
    labelSearch: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // queryClassOptions: [
      //   { value: "1", label: "全部" },
      //   { value: "2", label: "广告宣传" },
      //   { value: "3", label: "跟进中" },
      //   { value: "4", label: "失败关闭" }
      // ],
      queryClassValue: this.queryClass,
      searchInput: "",
      searchSelValue: this.searchSel,
      // searchOptions: [
      //   { value: "1", label: "客户名称" },
      //   { value: "2", label: "销售线索编号" },
      //   { value: "3", label: "联系人姓名" },
      //   { value: "4", label: "手机号码" },
      //   { value: "5", label: "商机来源" },
      //   { value: "6", label: "省份" },
      //   { value: "7", label: "城市" },
      //   { value: "8", label: "负责人" }
      // ],
      isTileSearch: false,
      tileSearchData: [
        {
@@ -161,6 +153,7 @@
    tileSearchClick() {
      this.isTileSearch = !this.isTileSearch
    },
    labelSearchClick() {},
    // 删除
    handleClick(row) {
      console.log(row)
@@ -223,7 +216,8 @@
          font-size: 18px;
        }
      }
      .other-search-tile {
      .other-search-tile,
      .other-search-label {
        display: flex;
        margin-left: 20px;
        .high-icon {

 src/components/makepager/TableCommonView.vue

@@ -7,10 +7,13 @@
      tooltip-effect="dark"
      style="width: 100%"
      :lazy="tableList.lazy"
      :show-summary="showSummary.show"
      :summary-method="getSummaries"
      :span-method="arraySpanMethod"
      @selection-change="handleSelectionChange"
      :header-cell-style="{ background: '#ECF4FF', color: '#666' }"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="selection" width="40"> </el-table-column>
      <el-table-column
        v-for="(item, i) in tableList.tableColumn"
        :key="i"
@@ -20,6 +23,10 @@
        :min-width="item.min"
        sortable
      >
        <template slot-scope="scope">
          <span v-if="item.price">{{ "￥" + number_format(scope.row[item.prop], 2, ".", ",") }}</span>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <slot name="tableButton" />
    </el-table>
@@ -41,25 +48,101 @@
          ]
        }
      }
    },
    showSummary: {
      type: Object,
      default: () => {
        return {
          show: false,
          sumProp: [],
          mergeNumber: 1
        }
      }
    }
  },
  data() {
    return {}
  },
  computed: {
    maxHeight() {
      if (this.tableList.height) {
        return `calc(100vh - ${this.tableList.height})`
      }
      return undefined
    }
  },
  computed: {},
  methods: {
    handleReserve(row) {
      return row._id ? row._id : row.id
    },
    handleSelectionChange(val) {
      this.$emit("getSelectArray", val)
    },
    // 行合并
    arraySpanMethod() {
      if (this.showSummary.show) {
        this.$nextTick(() => {
          if (this.$refs.table.$el) {
            var current = this.$refs.table.$el
              .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) {
      if (this.showSummary.show) {
        const { columns, data } = param
        console.log(param)
        const sums = []
        columns.forEach((column, index) => {
          if (index === this.showSummary.mergeNumber) {
            sums[index] = "本页总计"
          }
          const values = data.map((item) => Number(item[column.property]))
          // if (column.property === this.showSummary.sumProp) {
          if (this.showSummary.sumProp.includes(column.property)) {
            sums[index + 1] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return this.number_format(prev + curr, 2, ".", ",")
              } else {
                return this.number_format(prev, 2, ".", ",")
              }
            }, 0)
            sums[index + 1]
          }
        })
        return sums
      }
    },
    //定义number_format方法
    number_format(number, decimals, dec_point, thousands_sep) {
      decimals = 2 //这里默认设置保留两位小数，也可以注释这句采用传入的参数
      /*
       * 参数说明：
       * number：要格式化的数字
       * decimals：保留几位小数
       * dec_point：小数点符号
       * thousands_sep：千分位符号
       * */
      number = (number + "").replace(/[^0-9+-Ee.]/g, "")
      var n = !isFinite(+number) ? 0 : +number,
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = typeof thousands_sep === "undefined" ? "," : thousands_sep,
        dec = typeof dec_point === "undefined" ? "." : dec_point
      var s = n.toString().split(".")
      var re = /(-?\d+)(\d{3})/
      while (re.test(s[0])) {
        s[0] = s[0].replace(re, "$1" + sep + "$2")
      }
      if ((s[1] || "").length < prec) {
        s[1] = s[1] || ""
        s[1] += new Array(prec - s[1].length + 1).join("0")
      } else {
        s[1] = s[1].substring(0, prec) //小数点位数超出长度时截取前面的位数
      }
      return s.join(dec)
    }
  }
}
@@ -72,4 +155,10 @@
  margin-right: 10px;
  margin-bottom: 40px;
}
::v-deep {
  .el-table__footer-wrapper tbody td.el-table__cell {
    background-color: #fff;
    text-align: right;
  }
}
</style>

 src/views/custom/customManage/AddCustomManageDialog.vue

@@ -403,16 +403,6 @@
        salesHead: [{ required: true, message: "请选择销售负责人", trigger: "change" }],
        approvalOpinion: [{ required: true, message: "请输入审批意见", trigger: "blur" }]
      },
      businessSourceOptions: [
        { value: "1", label: "后台注册" },
        { value: "2", label: "代理商客户" },
        { value: "3", label: "电话陌生拜访" },
        { value: "4", label: "直接访问" },
        { value: "5", label: "项目合作" },
        { value: "6", label: "个人自找" },
        { value: "7", label: "二次销售" },
        { value: "8", label: "公司电话" }
      ],
      salesHeadOptions: [
        { value: "1", label: "BOSS" },
        { value: "2", label: "Mia" },

 src/views/sales/contractManage/index.vue

@@ -1,12 +1,16 @@
<template>
  <div class="contract-manage">
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <SearchCommonView
      ref="searchCommonView"
      :label-search="true"
      :query-class-options="queryClassOptions"
      :search-options="searchOptions"
    />
    <div class="btn-pager">
      <PublicFunctionBtnView
        :duplicate-check="true"
        :list-button="true"
        :map-button="true"
        :statistics="true"
        :receive="false"
        :submit-approval="true"
        ::statistics="true"
        :operates-list="operatesList"
      />
      <PagerView class="page" />
@@ -16,13 +20,12 @@
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">跟进</el-button>
          </template>
        </el-table-column>
      </template>
    </TableCommonView>
    <!-- 新建/编辑 -->
    <AddSalesLeadDialog v-if="editSalesLeadConfig.visible" :edit-sales-lead-config="editSalesLeadConfig" />
    <AddSalesLeadDialog v-if="editConfig.visible" :edit-sales-lead-config="editConfig" />
  </div>
</template>

@@ -53,9 +56,11 @@
      tableList: {},
      queryClassOptions: [
        { value: "1", label: "全部" },
        { value: "2", label: "广告宣传" },
        { value: "3", label: "跟进中" },
        { value: "4", label: "失败关闭" }
        { value: "2", label: "已批准" },
        { value: "3", label: "审批中" },
        { value: "4", label: "未提交" },
        { value: "3", label: "已驳回" },
        { value: "4", label: "已拒绝" }
      ],
      searchOptions: [],
      operatesList: [
@@ -66,9 +71,9 @@
        { id: "5", name: "更改创建人" },
        { id: "6", name: "树结构设置" },
        { id: "7", name: "审批设置" },
        { id: "8", name: "公海参数设置" }
        { id: "8", name: "恢复预设列宽" }
      ],
      editSalesLeadConfig: {
      editConfig: {
        visible: false,
        title: "新建",
        infomation: {}
@@ -83,31 +88,19 @@
      this.tableList = {
        tableInfomation: [
          {
            customName: "123123",
            customType: "普通客户",
            salesHead: "系统管理员",
            modifyTime: "2023-0703 11:22:12",
            customerSize: "499以上",
            importantLevel: "A类客户",
            customNumber: "AC651",
            customStatus: "潜在客户",
            productName: "自动打印机",
            startDate: "2023-06-27",
            endDate: "2024-07-15"
            documentNumber: "ZDYB02-2",
            owner: "系统管理员",
            approvalStatus: "审批中",
            creator: "系统管理员",
            createTime: "2023-0703 11:22:12"
          }
        ],
        tableColumn: [
          { label: "客户名称", prop: "customName", min: 120 }, // 客户名称
          { label: "客户类型", prop: "customType", min: 90 }, // 客户类型
          { label: "销售负责人", prop: "salesHead" }, // 销售负责人
          { label: "修改时间", prop: "modifyTime", min: 100 }, // 修改时间
          { label: "客户规模", prop: "customerSize" }, // 客户规模
          { label: "重要级别", prop: "importantLevel" }, // 重要级别
          { label: "客户编号", prop: "customNumber" }, // 客户编号
          { label: "客户状态", prop: "customStatus" }, // 客户状态
          { label: "产品名称", prop: "productName" }, // 产品名称
          { label: "服务开始日期", prop: "startDate" }, // 服务开始日期
          { label: "服务到期日", prop: "endDate" } // 服务到期日
          { label: "单据编号", prop: "documentNumber", min: 120 },
          { label: "负责人", prop: "owner", min: 90 },
          { label: "审批状态", prop: "approvalStatus" },
          { label: "创建人", prop: "creator", min: 100 },
          { label: "创建时间", prop: "createTime" }
        ]
      }
      this.searchOptions = []
@@ -118,9 +111,9 @@
    },
    // 新建
    addBtnClick() {
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "新建"
      this.editSalesLeadConfig.infomation = {
      this.editConfig.visible = true
      this.editConfig.title = "新建"
      this.editConfig.infomation = {
        customName: "",
        saleLeadNumber: "LEA50",
        contactName: "",
@@ -141,9 +134,9 @@
    // 编辑
    handleClick(row) {
      console.log(row)
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "编辑"
      this.editSalesLeadConfig.infomation = {
      this.editConfig.visible = true
      this.editConfig.title = "编辑"
      this.editConfig.infomation = {
        customName: row.customName,
        saleLeadNumber: row.saleLeadNumber,
        contactName: row.contactName,

 src/views/sales/masterOrder/AddMasterOrderDialog.vue

New file
@@ -0,0 +1,237 @@
<template>
  <div class="add-quotation">
    <el-dialog
      :title="editCommonConfig.title + '销售总单'"
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        :model="editConfig.infomation"
        :rules="rules"
        label-position="right"
        label-width="308px"
        size="mini"
      >
        <!-- 信息 -->
        <div class="basic-info">
          <!-- 基本信息 -->
          <div v-if="isUnflod" class="basic-info-title">基本信息</div>
          <div class="basic-info-view">
            <el-row>
              <el-col v-if="isUnflod" :span="12">
                <el-form-item label="客户名称" prop="customName">
                  <div class="custom-name">
                    <el-input v-model="editConfig.infomation.customName"></el-input>
                    <div class="common-select-btn"><i class="el-icon-circle-plus-outline" title="选择"></i></div>
                    <div class="common-select-btn"><i class="el-icon-edit" title="编辑"></i></div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col v-if="isUnflod" :span="12">
                <el-form-item label="单据编号" prop="documentNumber">
                  <el-input v-model="editConfig.infomation.documentNumber"></el-input>
                </el-form-item>
              </el-col>
              <el-col v-if="isUnflod" :span="12">
                <el-form-item label="负责人" prop="owner">
                  <el-select v-model="editConfig.infomation.owner" placeholder="请选择" size="mini" style="width: 63%">
                    <el-option v-for="item in ownerOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="服务开始时间" prop="serviceStartTime">
                  <el-date-picker v-model="editConfig.infomation.serviceStartTime" type="date" placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="服务截止时间" prop="serviceDeadline">
                  <el-date-picker v-model="editConfig.infomation.serviceDeadline" type="date" placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="合同金额" prop="contractAmount">
                  <el-input v-model="editConfig.infomation.contractAmount"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 附件信息 -->
          <div v-if="isUnflod" class="basic-info-title">附件信息</div>
          <div v-if="isUnflod" class="basic-info-view">
            <el-row>
              <el-col :span="12">
                <el-form-item label="附件" prop="">
                  <div class="annex-view">
                    <div @click="addAnnexClick">添加</div>
                    <div class="setFormat" @click="setFormatClick">设置允许上传的文件格式</div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <!-- 展开收起 -->
        <div v-if="editConfig.title === '新建'" class="unflod-collapse" @click="unflodCollapseClick">
          <div>{{ unflodCollapseStr }}</div>
          <div v-if="isUnflod"><i class="el-icon-arrow-up"></i></div>
          <div v-else><i class="el-icon-arrow-down"></i></div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="editConfig.visible = false">保存</el-button>
        <el-button size="small" @click="editConfig.visible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "QuotationDialog",
  props: {
    editCommonConfig: {
      type: Object,
      default: () => {
        return {
          visible: false,
          title: "新建",
          infomation: {
            customName: "",
            documentNumber: "AC6521",
            owner: "",
            serviceStartTime: "",
            serviceDeadline: "",
            contractAmount: ""
          }
        }
      }
    }
  },
  components: {},
  computed: {},
  data() {
    return {
      dialogWidth: "80%",
      editConfig: this.editCommonConfig,
      rules: {
        documentNumber: [{ required: true, message: "请输入", trigger: "blur" }],
        owner: [{ required: true, message: "请选择", trigger: "change" }]
      },
      ownerOptions: [
        // 负责人
        { value: "1", label: "BOSS" },
        { value: "2", label: "Mia" },
        { value: "3", label: "财务" },
        { value: "4", label: "市场" },
        { value: "5", label: "系统管理员" },
        { value: "6", label: "销售" },
        { value: "7", label: "销售总监" }
      ],
      unflodCollapseStr: "收起",
      isUnflod: true
    }
  },
  created() {},
  methods: {
    handleClose() {
      this.editConfig.visible = false
    },
    // 添加附件
    addAnnexClick() {},
    // 设置允许上传文件格式
    setFormatClick() {},
    // 展开收起
    unflodCollapseClick() {
      if (this.unflodCollapseStr === "收起") {
        this.unflodCollapseStr = "展开更多栏目"
        this.isUnflod = false
      } else {
        this.unflodCollapseStr = "收起"
        this.isUnflod = true
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.add-quotation {
  .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 {
        display: flex;
        .common-select-btn {
          margin-left: 5px;
          font-size: 18px;
        }
      }
    }
    .address-view {
      margin-top: 10px;
      padding-right: 40px;
    }
    .annex-view {
      display: flex;
      color: #6166d3;
      .setFormat {
        margin-left: 10px;
      }
    }
  }
  .unflod-collapse {
    display: flex;
    height: 30px;
    justify-content: center;
    align-items: center;
    color: #6166d3;
  }
  .dialog-footer {
    background-color: #f5f5f5;
    height: 55px;
    line-height: 55px;
  }
}
::v-deep {
  .el-dialog__header {
    padding: 12.5px 10px;
    border-bottom: 1px solid #e5e5e5;
    .el-dialog__title {
      font-size: 15px;
      color: #323232;
      font-weight: bold;
    }
  }
  .el-dialog__body {
    padding: 0px;
  }
  .el-dialog__footer {
    padding: 0px;
    text-align: center;
    box-sizing: border-box;
    border-top: 1px solid #dadee5;
  }
  .product-view {
    .el-form-item__label {
      padding: 0;
    }
  }
}
</style>

 src/views/sales/masterOrder/index.vue

@@ -2,27 +2,20 @@
  <div class="master-order">
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <div class="btn-pager">
      <PublicFunctionBtnView
        :duplicate-check="true"
        :list-button="true"
        :map-button="true"
        :statistics="true"
        :operates-list="operatesList"
      />
      <PublicFunctionBtnView :operates-list="operatesList" />
      <PagerView class="page" />
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
    <TableCommonView ref="tableListRef" :show-summary="showSummary" :table-list="tableList">
      <template slot="tableButton">
        <el-table-column label="操作" width="100">
        <el-table-column label="操作" width="60">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">跟进</el-button>
          </template>
        </el-table-column>
      </template>
    </TableCommonView>
    <!-- 新建/编辑 -->
    <AddSalesLeadDialog v-if="editSalesLeadConfig.visible" :edit-sales-lead-config="editSalesLeadConfig" />
    <AddMasterOrderDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
  </div>
</template>

@@ -31,7 +24,7 @@
import PublicFunctionBtnView from "@/components/makepager/PublicFunctionBtnView"
import PagerView from "@/components/makepager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import AddSalesLeadDialog from "@/views/custom/salesLead/AddSalesLeadDialog"
import AddMasterOrderDialog from "@/views/sales/masterOrder/AddMasterOrderDialog"

export default {
  name: "MasterOrder",
@@ -41,21 +34,19 @@
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddSalesLeadDialog
    AddMasterOrderDialog
  },
  computed: {
    searchCommonHeight() {
      return this.$refs.searchCommonView.offsetHeight
    }
  },
  computed: {},
  data() {
    return {
      tableList: {},
      queryClassOptions: [
        { value: "1", label: "全部" },
        { value: "2", label: "广告宣传" },
        { value: "3", label: "跟进中" },
        { value: "4", label: "失败关闭" }
        { value: "2", label: "已批准" },
        { value: "3", label: "审批中" },
        { value: "4", label: "未提交" },
        { value: "5", label: "已驳回" },
        { value: "6", label: "已拒绝" }
      ],
      searchOptions: [],
      operatesList: [
@@ -66,12 +57,17 @@
        { id: "5", name: "更改创建人" },
        { id: "6", name: "树结构设置" },
        { id: "7", name: "审批设置" },
        { id: "8", name: "公海参数设置" }
        { id: "8", name: "恢复预设列宽" }
      ],
      editSalesLeadConfig: {
      editConfig: {
        visible: false,
        title: "新建",
        infomation: {}
      },
      showSummary: {
        show: true,
        sumProp: ["contractAmount"],
        mergeNumber: 5
      }
    }
  },
@@ -83,31 +79,32 @@
      this.tableList = {
        tableInfomation: [
          {
            customName: "123123",
            customType: "普通客户",
            salesHead: "系统管理员",
            modifyTime: "2023-0703 11:22:12",
            customerSize: "499以上",
            importantLevel: "A类客户",
            customNumber: "AC651",
            customStatus: "潜在客户",
            productName: "自动打印机",
            startDate: "2023-06-27",
            endDate: "2024-07-15"
            documentNumber: "ZDYBD03-1",
            customName: "张三",
            serviceStartTime: "2023-0703 11:22:12",
            serviceDeadline: "2023-0703 11:22:12",
            contractAmount: 13000.0,
            owner: "系统管理员",
            approvalStatus: "未提交"
          },
          {
            documentNumber: "",
            customName: "",
            serviceStartTime: "",
            serviceDeadline: "",
            contractAmount: 13000.0,
            owner: "",
            approvalStatus: ""
          }
        ],
        tableColumn: [
          { label: "单据编号", prop: "documentNumber", min: 120 }, // 单据编号
          { label: "客户名称", prop: "customName", min: 120 }, // 客户名称
          { label: "客户类型", prop: "customType", min: 90 }, // 客户类型
          { label: "销售负责人", prop: "salesHead" }, // 销售负责人
          { label: "修改时间", prop: "modifyTime", min: 100 }, // 修改时间
          { label: "客户规模", prop: "customerSize" }, // 客户规模
          { label: "重要级别", prop: "importantLevel" }, // 重要级别
          { label: "客户编号", prop: "customNumber" }, // 客户编号
          { label: "客户状态", prop: "customStatus" }, // 客户状态
          { label: "产品名称", prop: "productName" }, // 产品名称
          { label: "服务开始日期", prop: "startDate" }, // 服务开始日期
          { label: "服务到期日", prop: "endDate" } // 服务到期日
          { label: "服务开始时间", prop: "serviceStartTime", min: 90 }, // 服务开始时间
          { label: "服务截止时间", prop: "serviceDeadline" }, // 服务截止时间
          { label: "合同金额", prop: "contractAmount", min: 100 }, // 合同金额
          { label: "负责人", prop: "owner" }, // 负责人
          { label: "审批状态", prop: "approvalStatus" } // 审批状态
        ]
      }
      this.searchOptions = []
@@ -118,47 +115,29 @@
    },
    // 新建
    addBtnClick() {
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "新建"
      this.editSalesLeadConfig.infomation = {
      this.editConfig.visible = true
      this.editConfig.title = "新建"
      this.editConfig.infomation = {
        customName: "",
        saleLeadNumber: "LEA50",
        contactName: "",
        contactDuties: "",
        phoneNumber: "",
        businessStatus: "新建",
        businessSource: "1",
        documentNumber: "AC6521",
        owner: "",
        position: "",
        map: "",
        country: "1",
        province: "1",
        city: "1",
        region: "1",
        address: ""
        serviceStartTime: "",
        serviceDeadline: "",
        contractAmount: ""
      }
    },
    // 编辑
    handleClick(row) {
      console.log(row)
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "编辑"
      this.editSalesLeadConfig.infomation = {
        customName: row.customName,
        saleLeadNumber: row.saleLeadNumber,
        contactName: row.contactName,
        contactDuties: row.contactDuties,
        phoneNumber: row.phoneNumber,
        businessStatus: "新建",
        businessSource: row.businessSource,
        owner: row.owner,
        position: "",
        map: "",
        country: "1",
        province: "1",
        city: "1",
        region: "1",
        address: ""
      this.editConfig.visible = true
      this.editConfig.title = "编辑"
      this.editConfig.infomation = {
        customName: "",
        documentNumber: "AC6521",
        owner: "",
        serviceStartTime: "",
        serviceDeadline: "",
        contractAmount: ""
      }
    }
  }

 src/views/sales/productPlan/index.vue

@@ -2,13 +2,7 @@
  <div class="product-plan">
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <div class="btn-pager">
      <PublicFunctionBtnView
        :duplicate-check="true"
        :list-button="true"
        :map-button="true"
        :statistics="true"
        :operates-list="operatesList"
      />
      <PublicFunctionBtnView :operates-list="operatesList" />
      <PagerView class="page" />
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
@@ -16,13 +10,12 @@
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">跟进</el-button>
          </template>
        </el-table-column>
      </template>
    </TableCommonView>
    <!-- 新建/编辑-->
    <AddSalesLeadDialog v-if="editSalesLeadConfig.visible" :edit-sales-lead-config="editSalesLeadConfig" />
    <AddSalesLeadDialog v-if="editConfig.visible" :edit-sales-lead-config="editConfig" />
  </div>
</template>

@@ -53,9 +46,11 @@
      tableList: {},
      queryClassOptions: [
        { value: "1", label: "全部" },
        { value: "2", label: "广告宣传" },
        { value: "3", label: "跟进中" },
        { value: "4", label: "失败关闭" }
        { value: "2", label: "已批准" },
        { value: "3", label: "审批中" },
        { value: "4", label: "未提交" },
        { value: "3", label: "已驳回" },
        { value: "4", label: "已拒绝" }
      ],
      searchOptions: [],
      operatesList: [
@@ -66,9 +61,9 @@
        { id: "5", name: "更改创建人" },
        { id: "6", name: "树结构设置" },
        { id: "7", name: "审批设置" },
        { id: "8", name: "公海参数设置" }
        { id: "8", name: "恢复预设列宽" }
      ],
      editSalesLeadConfig: {
      editConfig: {
        visible: false,
        title: "新建",
        infomation: {}
@@ -83,31 +78,19 @@
      this.tableList = {
        tableInfomation: [
          {
            customName: "123123",
            customType: "普通客户",
            salesHead: "系统管理员",
            modifyTime: "2023-0703 11:22:12",
            customerSize: "499以上",
            importantLevel: "A类客户",
            customNumber: "AC651",
            customStatus: "潜在客户",
            productName: "自动打印机",
            startDate: "2023-06-27",
            endDate: "2024-07-15"
            documentNumber: "ZDYB04-2",
            owner: "系统管理员",
            approvalStatus: "未提交",
            creator: "系统管理员",
            createTime: "2023-0703 11:22:12"
          }
        ],
        tableColumn: [
          { label: "客户名称", prop: "customName", min: 120 }, // 客户名称
          { label: "客户类型", prop: "customType", min: 90 }, // 客户类型
          { label: "销售负责人", prop: "salesHead" }, // 销售负责人
          { label: "修改时间", prop: "modifyTime", min: 100 }, // 修改时间
          { label: "客户规模", prop: "customerSize" }, // 客户规模
          { label: "重要级别", prop: "importantLevel" }, // 重要级别
          { label: "客户编号", prop: "customNumber" }, // 客户编号
          { label: "客户状态", prop: "customStatus" }, // 客户状态
          { label: "产品名称", prop: "productName" }, // 产品名称
          { label: "服务开始日期", prop: "startDate" }, // 服务开始日期
          { label: "服务到期日", prop: "endDate" } // 服务到期日
          { label: "单据编号", prop: "documentNumber", min: 120 },
          { label: "负责人", prop: "owner", min: 90 },
          { label: "审批状态", prop: "approvalStatus" },
          { label: "创建人", prop: "creator", min: 100 },
          { label: "创建时间", prop: "createTime" }
        ]
      }
      this.searchOptions = []
@@ -118,9 +101,9 @@
    },
    // 新建
    addBtnClick() {
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "新建"
      this.editSalesLeadConfig.infomation = {
      this.editConfig.visible = true
      this.editConfig.title = "新建"
      this.editConfig.infomation = {
        customName: "",
        saleLeadNumber: "LEA50",
        contactName: "",
@@ -141,9 +124,9 @@
    // 编辑
    handleClick(row) {
      console.log(row)
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "编辑"
      this.editSalesLeadConfig.infomation = {
      this.editConfig.visible = true
      this.editConfig.title = "编辑"
      this.editConfig.infomation = {
        customName: row.customName,
        saleLeadNumber: row.saleLeadNumber,
        contactName: row.contactName,

 src/views/sales/quotation/AddQuotationDialog.vue

New file
@@ -0,0 +1,349 @@
<template>
  <div class="add-quotation">
    <el-dialog
      :title="editCommonConfig.title + '报价单'"
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        :model="editConfig.infomation"
        :rules="rules"
        label-position="right"
        label-width="308px"
        size="mini"
        style="height: 60vh; overflow-x: hidden"
      >
        <!-- 信息 -->
        <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="customName">
                  <div class="custom-name">
                    <el-input v-model="editConfig.infomation.customName"></el-input>
                    <div class="common-select-btn"><i class="el-icon-circle-plus-outline" title="选择"></i></div>
                    <div class="common-select-btn"><i class="el-icon-edit" title="编辑"></i></div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="报价编号" prop="quotationNo">
                  <el-input v-model="editConfig.infomation.quotationNo"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="报价单状态" prop="quotationStatus">
                  <CommonSelectView
                    :common-value="editConfig.infomation.quotationStatus"
                    :common-options="quotationStatusOptions"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="有效期至" prop="validTo">
                  <el-date-picker v-model="editConfig.infomation.validTo" type="date" placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系人姓名" prop="contactName">
                  <div class="custom-name">
                    <el-input v-model="editConfig.infomation.contactName"></el-input>
                    <div class="common-select-btn"><i class="el-icon-circle-plus-outline" title="选择"></i></div>
                    <div class="common-select-btn"><i class="el-icon-edit" title="编辑"></i></div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="销售负责人" prop="salesHead">
                  <el-select
                    v-model="editConfig.infomation.salesHead"
                    placeholder="请选择"
                    size="mini"
                    style="width: 63%"
                  >
                    <el-option
                      v-for="item in salesHeadOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="销售机会" prop="salesOpportunity">
                  <div class="custom-name">
                    <el-input v-model="editConfig.infomation.salesOpportunity"></el-input>
                    <div class="common-select-btn"><i class="el-icon-circle-plus-outline" title="选择"></i></div>
                    <div class="common-select-btn"><i class="el-icon-edit" title="编辑"></i></div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 条款与条件 -->
          <div class="basic-info-title">条款与条件</div>
          <div class="address-view">
            <el-row>
              <el-col :span="24">
                <el-form-item label="条款与条件" prop="termsTreaty">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 4 }"
                    v-model="editConfig.infomation.termsTreaty"
                  ></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="">
                  <div class="annex-view">
                    <div @click="addAnnexClick">添加</div>
                    <div class="setFormat" @click="setFormatClick">设置允许上传的文件格式</div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 产品管理 -->
          <div class="basic-info-title" style="display: flex">
            产品管理
            <div style="margin-left: 400px">
              币种
              <el-select v-model="editConfig.infomation.currency" placeholder="请选择" size="mini" style="width: 63%">
                <el-option v-for="item in currencyOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="product-view">
            <CommonFormTableView :product-table-list="productTableList" />
          </div>
          <!-- 选择审批流程 -->
          <div class="basic-info-title">选择审批流程</div>
          <div class="basic-info-view">
            <el-row>
              <el-col :span="20">
                <el-form-item label="审批流程" prop="approvalWorkflow">
                  <el-select
                    v-model="editConfig.infomation.approvalWorkflow"
                    placeholder="请选择"
                    size="mini"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in approvalWorkflowOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="审批步骤" prop="approvalSteps">
                  <el-input v-model="editConfig.infomation.approvalSteps"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="审批人" prop="approvalPerson">
                  <el-input v-model="editConfig.infomation.approvalPerson"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="审批意见" prop="approvalOpinion">
                  <el-input v-model="editConfig.infomation.approvalOpinion" type="textarea" :rows="2"></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="editConfig.visible = false">保并提交审批</el-button>
        <el-button type="primary" size="small" @click="editConfig.visible = false">保存</el-button>
        <el-button size="small" @click="editConfig.visible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CommonSelectView from "@/components/makepager/CommonSelectView"
import CommonFormTableView from "@/components/makepager/CommonFormTableView"
export default {
  name: "QuotationDialog",
  props: {
    editCommonConfig: {
      type: Object,
      default: () => {
        return {
          visible: false,
          title: "新建",
          infomation: {
            customName: "",
            quotationNo: "AC6521",
            quotationStatus: "",
            validTo: "",
            contactName: "",
            salesHead: "",
            salesOpportunity: "",
            termsTreaty: "",
            approvalWorkflow: "",
            approvalSteps: "",
            approvalPerson: "",
            approvalOpinion: ""
          }
        }
      }
    }
  },
  components: { CommonSelectView, CommonFormTableView },
  computed: {
    searchCommonHeight() {
      return this.$refs.searchCommonView.offsetHeight
    }
  },
  data() {
    return {
      dialogWidth: "80%",
      editConfig: this.editCommonConfig,
      rules: {
        customName: [{ required: true, message: "请输入", trigger: "blur" }],
        quotationNo: [{ required: true, message: "请输入", trigger: "blur" }],
        quotationStatus: [{ required: true, message: "请选择", trigger: "change" }],
        salesHead: [{ required: true, message: "请选择负责人", trigger: "change" }]
      },
      salesHeadOptions: [
        // 销售负责人
        { value: "1", label: "BOSS" },
        { value: "2", label: "Mia" },
        { value: "3", label: "财务" },
        { value: "4", label: "市场" },
        { value: "5", label: "系统管理员" },
        { value: "6", label: "销售" },
        { value: "7", label: "销售总监" }
      ],
      quotationStatusOptions: [], // 报价单状态
      currencyOptions: [
        { value: "1", label: "人民币(¥)" },
        { value: "2", label: "英镑(£)" },
        { value: "3", label: "欧元(€)" }
      ], // 币种
      approvalWorkflowOptions: [], // 审批流程
      productTableList: {
        tableData: [
          {
            id: "1",
            productNumber: "123",
            productName: "",
            startDate: "",
            endDate: "2016-05-02",
            number: "",
            address: ""
          }
        ]
      }
    }
  },
  created() {},
  methods: {
    handleClose() {
      this.editConfig.visible = false
    },
    // 添加附件
    addAnnexClick() {},
    // 设置允许上传文件格式
    setFormatClick() {}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.add-quotation {
  .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 {
        display: flex;
        .common-select-btn {
          margin-left: 5px;
          font-size: 18px;
        }
      }
    }
    .address-view {
      margin-top: 10px;
      padding-right: 40px;
    }
    .annex-view {
      display: flex;
      color: #6166d3;
      .setFormat {
        margin-left: 10px;
      }
    }
  }
  .unflod-collapse {
    display: flex;
    height: 30px;
    justify-content: center;
    align-items: center;
    color: #6166d3;
  }
  .dialog-footer {
    background-color: #f5f5f5;
    height: 55px;
    line-height: 55px;
  }
}
::v-deep {
  .el-dialog__header {
    padding: 12.5px 10px;
    border-bottom: 1px solid #e5e5e5;
    .el-dialog__title {
      font-size: 15px;
      color: #323232;
      font-weight: bold;
    }
  }
  .el-dialog__body {
    padding: 0px;
  }
  .el-dialog__footer {
    padding: 0px;
    text-align: center;
    box-sizing: border-box;
    border-top: 1px solid #dadee5;
  }
  .product-view {
    .el-form-item__label {
      padding: 0;
    }
  }
}
</style>

 src/views/sales/quotation/index.vue

@@ -1,28 +1,26 @@
<template>
  <div class="quotation">
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <SearchCommonView
      ref="searchCommonView"
      :label-search="true"
      :query-class-options="queryClassOptions"
      :search-options="searchOptions"
    />
    <div class="btn-pager">
      <PublicFunctionBtnView
        :duplicate-check="true"
        :list-button="true"
        :map-button="true"
        :statistics="true"
        :operates-list="operatesList"
      />
      <PublicFunctionBtnView :submit-approval="true" :operates-list="operatesList" />
      <PagerView class="page" />
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
      <template slot="tableButton">
        <el-table-column label="操作" width="100">
        <el-table-column label="操作" width="60">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">跟进</el-button>
          </template>
        </el-table-column>
      </template>
    </TableCommonView>
    <!-- 新建/编辑 -->
    <AddSalesLeadDialog v-if="editSalesLeadConfig.visible" :edit-sales-lead-config="editSalesLeadConfig" />
    <AddQuotationDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
  </div>
</template>

@@ -31,7 +29,7 @@
import PublicFunctionBtnView from "@/components/makepager/PublicFunctionBtnView"
import PagerView from "@/components/makepager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import AddSalesLeadDialog from "@/views/custom/salesLead/AddSalesLeadDialog"
import AddQuotationDialog from "@/views/sales/quotation/AddQuotationDialog"

export default {
  name: "QuotationView",
@@ -41,7 +39,7 @@
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddSalesLeadDialog
    AddQuotationDialog
  },
  computed: {
    searchCommonHeight() {
@@ -53,9 +51,9 @@
      tableList: {},
      queryClassOptions: [
        { value: "1", label: "全部" },
        { value: "2", label: "广告宣传" },
        { value: "3", label: "跟进中" },
        { value: "4", label: "失败关闭" }
        { value: "2", label: "今日创建" },
        { value: "3", label: "本周创建" },
        { value: "4", label: "本月创建" }
      ],
      searchOptions: [],
      operatesList: [
@@ -66,9 +64,9 @@
        { id: "5", name: "更改创建人" },
        { id: "6", name: "树结构设置" },
        { id: "7", name: "审批设置" },
        { id: "8", name: "公海参数设置" }
        { id: "8", name: "恢复预设列宽" }
      ],
      editSalesLeadConfig: {
      editConfig: {
        visible: false,
        title: "新建",
        infomation: {}
@@ -83,31 +81,29 @@
      this.tableList = {
        tableInfomation: [
          {
            quotationNo: "QUO109",
            customName: "123123",
            customType: "普通客户",
            contactName: "马里奥",
            salesHead: "系统管理员",
            modifyTime: "2023-0703 11:22:12",
            customerSize: "499以上",
            importantLevel: "A类客户",
            customNumber: "AC651",
            customStatus: "潜在客户",
            subTotal: "￥9,499.00",
            total: "￥9,499.00",
            productName: "自动打印机",
            startDate: "2023-06-27",
            endDate: "2024-07-15"
            number: "1.00",
            priceTax: "￥9499.00"
          }
        ],
        tableColumn: [
          { label: "报价单号", prop: "quotationNo", min: 90 }, // 报价单号
          { label: "客户名称", prop: "customName", min: 120 }, // 客户名称
          { label: "客户类型", prop: "customType", min: 90 }, // 客户类型
          { label: "联系人姓名", prop: "contactName", min: 90 }, // 联系人姓名
          { label: "销售负责人", prop: "salesHead" }, // 销售负责人
          { label: "修改时间", prop: "modifyTime", min: 100 }, // 修改时间
          { label: "客户规模", prop: "customerSize" }, // 客户规模
          { label: "重要级别", prop: "importantLevel" }, // 重要级别
          { label: "客户编号", prop: "customNumber" }, // 客户编号
          { label: "客户状态", prop: "customStatus" }, // 客户状态
          { label: "小计", prop: "subTotal" }, // 小计
          { label: "合计", prop: "total" }, // 合计
          { label: "产品名称", prop: "productName" }, // 产品名称
          { label: "服务开始日期", prop: "startDate" }, // 服务开始日期
          { label: "服务到期日", prop: "endDate" } // 服务到期日
          { label: "数量", prop: "number" }, // 数量
          { label: "价税合计", prop: "priceTax" } // 价税合计
        ]
      }
      this.searchOptions = []
@@ -118,47 +114,41 @@
    },
    // 新建
    addBtnClick() {
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "新建"
      this.editSalesLeadConfig.infomation = {
      this.editConfig.visible = true
      this.editConfig.title = "新建"
      this.editConfig.infomation = {
        customName: "",
        saleLeadNumber: "LEA50",
        quotationNo: "AC6521",
        quotationStatus: "",
        validTo: "",
        contactName: "",
        contactDuties: "",
        phoneNumber: "",
        businessStatus: "新建",
        businessSource: "1",
        owner: "",
        position: "",
        map: "",
        country: "1",
        province: "1",
        city: "1",
        region: "1",
        address: ""
        salesHead: "",
        salesOpportunity: "",
        termsTreaty: "",
        approvalWorkflow: "",
        approvalSteps: "",
        approvalPerson: "",
        approvalOpinion: ""
      }
    },
    // 编辑
    handleClick(row) {
      console.log(row)
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "编辑"
      this.editSalesLeadConfig.infomation = {
        customName: row.customName,
        saleLeadNumber: row.saleLeadNumber,
        contactName: row.contactName,
        contactDuties: row.contactDuties,
        phoneNumber: row.phoneNumber,
        businessStatus: "新建",
        businessSource: row.businessSource,
        owner: row.owner,
        position: "",
        map: "",
        country: "1",
        province: "1",
        city: "1",
        region: "1",
        address: ""
      this.editConfig.visible = true
      this.editConfig.title = "编辑"
      this.editConfig.infomation = {
        customName: "",
        quotationNo: "AC6521",
        quotationStatus: "",
        validTo: "",
        contactName: "",
        salesHead: "",
        salesOpportunity: "",
        termsTreaty: "",
        approvalWorkflow: "",
        approvalSteps: "",
        approvalPerson: "",
        approvalOpinion: ""
      }
    }
  }

 src/views/sales/refundForm/index.vue

@@ -2,13 +2,7 @@
  <div class="refund-form">
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <div class="btn-pager">
      <PublicFunctionBtnView
        :duplicate-check="true"
        :list-button="true"
        :map-button="true"
        :statistics="true"
        :operates-list="operatesList"
      />
      <PublicFunctionBtnView :receive="false" :submit-approval="true" :operates-list="operatesList" />
      <PagerView class="page" />
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
@@ -16,13 +10,12 @@
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">跟进</el-button>
          </template>
        </el-table-column>
      </template>
    </TableCommonView>
    <!-- 新建/编辑 -->
    <AddSalesLeadDialog v-if="editSalesLeadConfig.visible" :edit-sales-lead-config="editSalesLeadConfig" />
    <AddSalesLeadDialog v-if="editConfig.visible" :edit-sales-lead-config="editConfig" />
  </div>
</template>

@@ -53,9 +46,9 @@
      tableList: {},
      queryClassOptions: [
        { value: "1", label: "全部" },
        { value: "2", label: "广告宣传" },
        { value: "3", label: "跟进中" },
        { value: "4", label: "失败关闭" }
        { value: "2", label: "现金退款" },
        { value: "3", label: "无需发票" },
        { value: "4", label: "本月退款" }
      ],
      searchOptions: [],
      operatesList: [
@@ -66,9 +59,9 @@
        { id: "5", name: "更改创建人" },
        { id: "6", name: "树结构设置" },
        { id: "7", name: "审批设置" },
        { id: "8", name: "公海参数设置" }
        { id: "8", name: "恢复预设列宽" }
      ],
      editSalesLeadConfig: {
      editConfig: {
        visible: false,
        title: "新建",
        infomation: {}
@@ -83,31 +76,27 @@
      this.tableList = {
        tableInfomation: [
          {
            customName: "123123",
            customType: "普通客户",
            refundOrderNo: "TKD20220118-44",
            customName: "万科物料发展有限公司",
            refundDate: "2022-01-18",
            account: "人民币账户",
            whetherInvoicing: "未开",
            paymentMethod: "现金",
            salesHead: "系统管理员",
            modifyTime: "2023-0703 11:22:12",
            customerSize: "499以上",
            importantLevel: "A类客户",
            customNumber: "AC651",
            customStatus: "潜在客户",
            productName: "自动打印机",
            startDate: "2023-06-27",
            endDate: "2024-07-15"
            modifyTime: "202-01-18 13:11:05",
            priceTax: "￥12.00"
          }
        ],
        tableColumn: [
          { label: "客户名称", prop: "customName", min: 120 }, // 客户名称
          { label: "客户类型", prop: "customType", min: 90 }, // 客户类型
          { label: "销售负责人", prop: "salesHead" }, // 销售负责人
          { label: "修改时间", prop: "modifyTime", min: 100 }, // 修改时间
          { label: "客户规模", prop: "customerSize" }, // 客户规模
          { label: "重要级别", prop: "importantLevel" }, // 重要级别
          { label: "客户编号", prop: "customNumber" }, // 客户编号
          { label: "客户状态", prop: "customStatus" }, // 客户状态
          { label: "产品名称", prop: "productName" }, // 产品名称
          { label: "服务开始日期", prop: "startDate" }, // 服务开始日期
          { label: "服务到期日", prop: "endDate" } // 服务到期日
          { label: "退款单编号", prop: "refundOrderNo" },
          { label: "客户名称", prop: "customName", min: 120 },
          { label: "退款日期", prop: "refundDate", min: 90 },
          { label: "账户", prop: "account" },
          { label: "是否开票", prop: "whetherInvoicing", min: 100 },
          { label: "付款方式", prop: "paymentMethod" },
          { label: "销售负责人", prop: "salesHead" },
          { label: "修改时间", prop: "modifyTime" },
          { label: "价税合计", prop: "priceTax" }
        ]
      }
      this.searchOptions = []
@@ -118,9 +107,9 @@
    },
    // 新建
    addBtnClick() {
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "新建"
      this.editSalesLeadConfig.infomation = {
      this.editConfig.visible = true
      this.editConfig.title = "新建"
      this.editConfig.infomation = {
        customName: "",
        saleLeadNumber: "LEA50",
        contactName: "",
@@ -141,9 +130,9 @@
    // 编辑
    handleClick(row) {
      console.log(row)
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "编辑"
      this.editSalesLeadConfig.infomation = {
      this.editConfig.visible = true
      this.editConfig.title = "编辑"
      this.editConfig.infomation = {
        customName: row.customName,
        saleLeadNumber: row.saleLeadNumber,
        contactName: row.contactName,

 src/views/sales/salesDetails/AddSalesDetailsDialog.vue

New file
@@ -0,0 +1,404 @@
<template>
  <div class="add-sales-details">
    <el-dialog
      :title="editCommonConfig.title + '销售明细单'"
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        :model="editConfig.infomation"
        :rules="rules"
        label-position="right"
        label-width="308px"
        size="mini"
        style="height: 60vh; overflow-x: hidden"
      >
        <!-- 信息 -->
        <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="customName">
                  <div class="custom-name">
                    <el-input v-model="editConfig.infomation.customName"></el-input>
                    <div class="common-select-btn"><i class="el-icon-circle-plus-outline" title="选择"></i></div>
                    <div class="common-select-btn"><i class="el-icon-edit" title="编辑"></i></div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="订单编号" prop="orderNumber">
                  <el-input v-model="editConfig.infomation.orderNumber"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="销售机会" prop="salesOpportunity">
                  <div class="custom-name">
                    <el-input v-model="editConfig.infomation.salesOpportunity"></el-input>
                    <div class="common-select-btn"><i class="el-icon-circle-plus-outline" title="选择"></i></div>
                    <div class="common-select-btn"><i class="el-icon-edit" title="编辑"></i></div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="选择源单" prop="selSourceOrder">
                  <el-select v-model="editConfig.infomation.selSourceOrder" size="mini" style="width: 63%">
                    <el-option
                      v-for="item in selSourceOrderOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="签约日期" prop="signDate">
                  <el-date-picker v-model="editConfig.infomation.signDate" type="date" placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="销售负责人" prop="salesHead">
                  <el-select
                    v-model="editConfig.infomation.salesHead"
                    placeholder="请选择"
                    size="mini"
                    style="width: 63%"
                  >
                    <el-option
                      v-for="item in salesHeadOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="交付日期" prop="deliveryDate">
                  <el-date-picker v-model="editConfig.infomation.deliveryDate" type="date" placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="微信订单状态" prop="wechatOrderStatus">
                  <CommonSelectView
                    :common-value="editConfig.infomation.wechatOrderStatus"
                    :common-options="wechatOrderStatusOptions"
                  />
                </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="consignee">
                  <el-input v-model="editConfig.infomation.consignee"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="收货人联系方式" prop="consigneeContactInfo">
                  <el-input v-model="editConfig.infomation.consigneeContactInfo"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="收货地址" prop="shippingAddress">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2 }"
                    v-model="editConfig.infomation.shippingAddress"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 条款与条件 -->
          <div class="basic-info-title">条款与条件</div>
          <div class="address-view">
            <el-row>
              <el-col :span="24">
                <el-form-item label="条款与条件" prop="termsTreaty">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 4 }"
                    v-model="editConfig.infomation.termsTreaty"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 备注信息 -->
          <div class="basic-info-title">备注信息</div>
          <div class="address-view">
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注" prop="notes">
                  <el-input type="textarea" :autosize="{ minRows: 2 }" v-model="editConfig.infomation.notes"></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="">
                  <div class="annex-view">
                    <div @click="addAnnexClick">添加</div>
                    <div class="setFormat" @click="setFormatClick">设置允许上传的文件格式</div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 产品管理 -->
          <div class="basic-info-title" style="display: flex">
            产品管理
            <div style="margin-left: 400px">
              币种
              <el-select v-model="editConfig.infomation.currency" placeholder="请选择" size="mini" style="width: 63%">
                <el-option v-for="item in currencyOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="product-view">
            <CommonFormTableView :product-table-list="productTableList" />
          </div>
          <!-- 选择审批流程 -->
          <div v-if="editConfig.title === '新建'" class="basic-info-title">选择审批流程</div>
          <div v-if="editConfig.title === '新建'" class="basic-info-view">
            <el-row>
              <el-col :span="20">
                <el-form-item label="审批流程" prop="approvalWorkflow">
                  <el-select
                    v-model="editConfig.infomation.approvalWorkflow"
                    placeholder="请选择"
                    size="mini"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in approvalWorkflowOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="审批步骤" prop="approvalSteps">
                  <el-input v-model="editConfig.infomation.approvalSteps"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="审批人" prop="approvalPerson">
                  <el-input v-model="editConfig.infomation.approvalPerson"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="需要加急审批" prop="approvalUrgent">
                  <el-checkbox v-model="editConfig.infomation.approvalUrgent"></el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="审批意见" prop="approvalOpinion">
                  <el-input v-model="editConfig.infomation.approvalOpinion" type="textarea" :rows="2"></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="editConfig.visible = false">保并提交审批</el-button>
        <el-button type="primary" size="small" @click="editConfig.visible = false">保存</el-button>
        <el-button size="small" @click="editConfig.visible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CommonSelectView from "@/components/makepager/CommonSelectView"
import CommonFormTableView from "@/components/makepager/CommonFormTableView"
export default {
  name: "AddSalesDetailsDialog",
  props: {
    editCommonConfig: {
      type: Object,
      default: () => {
        return {
          visible: false,
          title: "新建",
          infomation: {
            customName: "",
            orderNumber: "XSHT521",
            salesOpportunity: "",
            selSourceOrder: "",
            signDate: "",
            salesHead: "",
            deliveryDate: "",
            wechatOrderStatus: "",
            consignee: "",
            consigneeContactInfo: "",
            shippingAddress: "",
            termsTreaty: "",
            notes: "",
            approvalWorkflow: "",
            approvalSteps: "",
            approvalPerson: "",
            approvalUrgent: "",
            approvalOpinion: ""
          }
        }
      }
    }
  },
  components: { CommonSelectView, CommonFormTableView },
  computed: {},
  data() {
    return {
      dialogWidth: "80%",
      editConfig: this.editCommonConfig,
      rules: {
        customName: [{ required: true, message: "请输入", trigger: "blur" }],
        orderNumber: [{ required: true, message: "请输入", trigger: "blur" }],
        signDate: [{ required: true, message: "请选择", trigger: "change" }],
        salesHead: [{ required: true, message: "请选择负责人", trigger: "change" }],
        approvalOpinion: [{ required: true, message: "请输入", trigger: "blur" }]
      },
      salesHeadOptions: [
        // 销售负责人
        { value: "1", label: "BOSS" },
        { value: "2", label: "Mia" },
        { value: "3", label: "财务" },
        { value: "4", label: "市场" },
        { value: "5", label: "系统管理员" },
        { value: "6", label: "销售" },
        { value: "7", label: "销售总监" }
      ],
      selSourceOrderOptions: [{ value: "1", label: "销售子单" }],
      wechatOrderStatusOptions: [], // 微信订单状态
      currencyOptions: [
        { value: "1", label: "人民币(¥)" },
        { value: "2", label: "英镑(£)" },
        { value: "3", label: "欧元(€)" }
      ], // 币种
      approvalWorkflowOptions: [], // 审批流程
      productTableList: {
        tableData: [
          {
            id: "1",
            productNumber: "123",
            productName: "",
            startDate: "",
            endDate: "2016-05-02",
            number: "",
            address: ""
          }
        ]
      }
    }
  },
  created() {},
  methods: {
    handleClose() {
      this.editConfig.visible = false
    },
    // 添加附件
    addAnnexClick() {},
    // 设置允许上传文件格式
    setFormatClick() {}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.add-sales-details {
  .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 {
        display: flex;
        .common-select-btn {
          margin-left: 5px;
          font-size: 18px;
        }
      }
    }
    .address-view {
      margin-top: 10px;
      padding-right: 40px;
    }
    .annex-view {
      display: flex;
      color: #6166d3;
      .setFormat {
        margin-left: 10px;
      }
    }
  }
  .unflod-collapse {
    display: flex;
    height: 30px;
    justify-content: center;
    align-items: center;
    color: #6166d3;
  }
  .dialog-footer {
    background-color: #f5f5f5;
    height: 55px;
    line-height: 55px;
  }
}
::v-deep {
  .el-dialog__header {
    padding: 12.5px 10px;
    border-bottom: 1px solid #e5e5e5;
    .el-dialog__title {
      font-size: 15px;
      color: #323232;
      font-weight: bold;
    }
  }
  .el-dialog__body {
    padding: 0px;
  }
  .el-dialog__footer {
    padding: 0px;
    text-align: center;
    box-sizing: border-box;
    border-top: 1px solid #dadee5;
  }
  .product-view {
    .el-form-item__label {
      padding: 0;
    }
  }
}
</style>

 src/views/sales/salesDetails/index.vue

@@ -2,27 +2,20 @@
  <div class="sales-details">
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <div class="btn-pager">
      <PublicFunctionBtnView
        :duplicate-check="true"
        :list-button="true"
        :map-button="true"
        :statistics="true"
        :operates-list="operatesList"
      />
      <PublicFunctionBtnView :submit-approval="true" :operates-list="operatesList" />
      <PagerView class="page" />
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
    <TableCommonView ref="tableListRef" :show-summary="showSummary" :table-list="tableList">
      <template slot="tableButton">
        <el-table-column label="操作" width="100">
        <el-table-column label="操作" width="60">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">跟进</el-button>
          </template>
        </el-table-column>
      </template>
    </TableCommonView>
    <!-- 新建/编辑 -->
    <AddSalesLeadDialog v-if="editSalesLeadConfig.visible" :edit-sales-lead-config="editSalesLeadConfig" />
    <AddSalesDetailsDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
  </div>
</template>

@@ -31,7 +24,7 @@
import PublicFunctionBtnView from "@/components/makepager/PublicFunctionBtnView"
import PagerView from "@/components/makepager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import AddSalesLeadDialog from "@/views/custom/salesLead/AddSalesLeadDialog"
import AddSalesDetailsDialog from "@/views/sales/salesDetails/AddSalesDetailsDialog"

export default {
  name: "SalesDetails",
@@ -41,7 +34,7 @@
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddSalesLeadDialog
    AddSalesDetailsDialog
  },
  computed: {
    searchCommonHeight() {
@@ -53,9 +46,10 @@
      tableList: {},
      queryClassOptions: [
        { value: "1", label: "全部" },
        { value: "2", label: "广告宣传" },
        { value: "3", label: "跟进中" },
        { value: "4", label: "失败关闭" }
        { value: "2", label: "已发货" },
        { value: "3", label: "待采购" },
        { value: "4", label: "本月交付" },
        { value: "5", label: "已作废" }
      ],
      searchOptions: [],
      operatesList: [
@@ -66,12 +60,26 @@
        { id: "5", name: "更改创建人" },
        { id: "6", name: "树结构设置" },
        { id: "7", name: "审批设置" },
        { id: "8", name: "公海参数设置" }
        { id: "8", name: "恢复预设列宽" }
      ],
      editSalesLeadConfig: {
      editConfig: {
        visible: false,
        title: "新建",
        infomation: {}
      },
      showSummary: {
        show: true,
        sumProp: [
          "receiveTotalAmount",
          "total",
          "amountReceivable",
          "invoicedAmount",
          "uninvoicedAmount",
          "number",
          "unOutoundNo",
          "priceTax"
        ],
        mergeNumber: 6
      }
    }
  },
@@ -83,31 +91,39 @@
      this.tableList = {
        tableInfomation: [
          {
            customName: "123123",
            customType: "普通客户",
            orderNumber: "XSHT265",
            customName: "55555",
            signDate: "2023-06-25",
            salesHead: "系统管理员",
            modifyTime: "2023-0703 11:22:12",
            customerSize: "499以上",
            importantLevel: "A类客户",
            customNumber: "AC651",
            customStatus: "潜在客户",
            outboundStatus: "未出库",
            receiveTotalAmount: "8000.00",
            total: "8000.00",
            amountReceivable: "8000.00",
            invoicedAmount: "8000.00",
            uninvoicedAmount: "8000.00",
            productName: "自动打印机",
            startDate: "2023-06-27",
            endDate: "2024-07-15"
            number: "1.00",
            taxUnitPrice: "8000.00",
            unOutoundNo: "1.00",
            priceTax: "8000.00"
          }
        ],
        tableColumn: [
          { label: "客户名称", prop: "customName", min: 120 }, // 客户名称
          { label: "客户类型", prop: "customType", min: 90 }, // 客户类型
          { label: "销售负责人", prop: "salesHead" }, // 销售负责人
          { label: "修改时间", prop: "modifyTime", min: 100 }, // 修改时间
          { label: "客户规模", prop: "customerSize" }, // 客户规模
          { label: "重要级别", prop: "importantLevel" }, // 重要级别
          { label: "客户编号", prop: "customNumber" }, // 客户编号
          { label: "客户状态", prop: "customStatus" }, // 客户状态
          { label: "产品名称", prop: "productName" }, // 产品名称
          { label: "服务开始日期", prop: "startDate" }, // 服务开始日期
          { label: "服务到期日", prop: "endDate" } // 服务到期日
          { label: "订单编号", prop: "orderNumber" },
          { label: "客户名称", prop: "customName" },
          { label: "签约日期", prop: "signDate" },
          { label: "销售负责人", prop: "salesHead" },
          { label: "出库状态", prop: "outboundStatus" },
          { label: "已收总额", prop: "receiveTotalAmount", price: true },
          { label: "合计", prop: "total", price: true },
          { label: "应收余额", prop: "amountReceivable", price: true },
          { label: "已开票金额", prop: "invoicedAmount", price: true },
          { label: "未开票金额", prop: "uninvoicedAmount", price: true },
          { label: "产品名称", prop: "productName" },
          { label: "数量", prop: "number" },
          { label: "含税单价", prop: "taxUnitPrice", price: true },
          { label: "未出库数量", prop: "unOutoundNo" },
          { label: "价税合计", prop: "priceTax", price: true }
        ]
      }
      this.searchOptions = []
@@ -118,47 +134,51 @@
    },
    // 新建
    addBtnClick() {
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "新建"
      this.editSalesLeadConfig.infomation = {
      this.editConfig.visible = true
      this.editConfig.title = "新建"
      this.editConfig.infomation = {
        customName: "",
        saleLeadNumber: "LEA50",
        contactName: "",
        contactDuties: "",
        phoneNumber: "",
        businessStatus: "新建",
        businessSource: "1",
        owner: "",
        position: "",
        map: "",
        country: "1",
        province: "1",
        city: "1",
        region: "1",
        address: ""
        orderNumber: "XSHT521",
        salesOpportunity: "",
        selSourceOrder: "",
        signDate: "",
        salesHead: "",
        deliveryDate: "",
        wechatOrderStatus: "",
        consignee: "",
        consigneeContactInfo: "",
        shippingAddress: "",
        termsTreaty: "",
        notes: "",
        approvalWorkflow: "",
        approvalSteps: "",
        approvalPerson: "",
        approvalOpinion: ""
      }
    },
    // 编辑
    handleClick(row) {
      console.log(row)
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "编辑"
      this.editSalesLeadConfig.infomation = {
        customName: row.customName,
        saleLeadNumber: row.saleLeadNumber,
        contactName: row.contactName,
        contactDuties: row.contactDuties,
        phoneNumber: row.phoneNumber,
        businessStatus: "新建",
        businessSource: row.businessSource,
        owner: row.owner,
        position: "",
        map: "",
        country: "1",
        province: "1",
        city: "1",
        region: "1",
        address: ""
      this.editConfig.visible = true
      this.editConfig.title = "编辑"
      this.editConfig.infomation = {
        customName: "",
        orderNumber: "XSHT521",
        salesOpportunity: "",
        selSourceOrder: "",
        signDate: "",
        salesHead: "",
        deliveryDate: "",
        wechatOrderStatus: "",
        consignee: "",
        consigneeContactInfo: "",
        shippingAddress: "",
        termsTreaty: "",
        notes: "",
        approvalWorkflow: "",
        approvalSteps: "",
        approvalPerson: "",
        approvalOpinion: ""
      }
    }
  }
@@ -175,4 +195,10 @@
    }
  }
}
::v-deep {
  .el-table .cell,
  .el-table th.el-table__cell > .cell {
    padding: 0 2px;
  }
}
</style>

 src/views/sales/salesOpportunity/AddSalesOpportunityDialog.vue

New file
@@ -0,0 +1,558 @@
<template>
  <div class="add-sales-opportunity">
    <el-dialog
      :title="editCommonConfig.title + '销售机会'"
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        :model="editConfig.infomation"
        :rules="rules"
        label-position="right"
        label-width="308px"
        size="mini"
        style="height: 60vh; overflow-x: hidden"
      >
        <!-- 信息 -->
        <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="customName">
                  <div class="custom-name">
                    <el-input v-model="editConfig.infomation.customName"></el-input>
                    <div class="common-select-btn"><i class="el-icon-circle-plus-outline" title="选择"></i></div>
                    <div class="common-select-btn"><i class="el-icon-edit" title="编辑"></i></div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="销售机会编号" prop="salesOpportunityNo">
                  <el-input v-model="editConfig.infomation.salesOpportunityNo"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="机会名称" prop="opportunityName">
                  <div class="custom-name">
                    <el-input v-model="editConfig.infomation.opportunityName"></el-input>
                    <div class="common-select-btn"><i class="el-icon-circle-plus-outline" title="选择"></i></div>
                    <!-- <div class="common-select-btn"><i class="el-icon-edit" title="编辑"></i></div> -->
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系人姓名" prop="contactName">
                  <el-input v-model="editConfig.infomation.contactName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="商机来源" prop="businessSource">
                  <CommonSelectView
                    :common-value="editConfig.infomation.businessSource"
                    :common-options="businessSourceOptions"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="商机类型" prop="businessType">
                  <CommonSelectView
                    :common-value="editConfig.infomation.businessType"
                    :common-options="businessTypeOptions"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="销售阶段" prop="saleStage">
                  <CommonSelectView
                    :common-value="editConfig.infomation.saleStage"
                    :common-options="saleStageOptions"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="销售负责人" prop="salesHead">
                  <el-select
                    v-model="editConfig.infomation.salesHead"
                    placeholder="请选择"
                    size="mini"
                    style="width: 63%"
                  >
                    <el-option
                      v-for="item in salesHeadOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="老客户营销" prop="oldCustomerMarket">
                  <CommonSelectView
                    :common-value="editConfig.infomation.oldCustomerMarket"
                    :common-options="oldCustomerMarketOptions"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="竞争对手" prop="competitor">
                  <el-input v-model="editConfig.infomation.competitor"></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="possible">
                  <CommonSelectView :common-value="editConfig.infomation.possible" :common-options="possibleOptions" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="币种" prop="currency">
                  <el-select
                    v-model="editConfig.infomation.currency"
                    placeholder="请选择"
                    size="mini"
                    style="width: 63%"
                  >
                    <el-option
                      v-for="item in currencyOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="预算绝对值" prop="budgetAbsoluteValue">
                  <el-input v-model="editConfig.infomation.budgetAbsoluteValue"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="预计成交日期" prop="expectDealDate">
                  <el-date-picker v-model="editConfig.infomation.expectDealDate" type="date" placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="预计合同金额" prop="expectContractAmount">
                  <el-input v-model="editConfig.infomation.expectContractAmount"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="当前状态" prop="currentState">
                  <CommonSelectView
                    :common-value="editConfig.infomation.currentState"
                    :common-options="currentStateOptions"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 商机七要素 -->
          <div class="basic-info-title">商机七要素(5W2P)</div>
          <div class="address-view">
            <el-row>
              <el-col :span="20">
                <el-form-item label="客户需求或痛点（why）" prop="demandPainPoint">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2 }"
                    v-model="editConfig.infomation.demandPainPoint"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="是否已经立项（plan）" prop="projectApproval">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2 }"
                    v-model="editConfig.infomation.projectApproval"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="资金预算是多少（plan）" prop="fundBudget">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2 }"
                    v-model="editConfig.infomation.fundBudget"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="关键决策人是谁（who）" prop="decisionMaker">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2 }"
                    v-model="editConfig.infomation.decisionMaker"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="关键决策因素有哪些（what）" prop="decisionFactors">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2 }"
                    v-model="editConfig.infomation.decisionFactors"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="决策流程是怎样的（what）" prop="decisionFlow">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2 }"
                    v-model="editConfig.infomation.decisionFlow"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="竞争对手提供的方案（what）" prop="programme">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2 }"
                    v-model="editConfig.infomation.programme"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- SWOT分析 -->
          <div class="basic-info-title">SWOT分析</div>
          <div class="address-view">
            <el-row>
              <el-col :span="12">
                <el-form-item label="优势(S)" prop="advantage">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2 }"
                    v-model="editConfig.infomation.advantage"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="劣势(W)" prop="disadvantage">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2 }"
                    v-model="editConfig.infomation.disadvantage"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="机会(O)" prop="opportunity">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2 }"
                    v-model="editConfig.infomation.opportunity"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="威胁(T)" prop="threaten">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2 }"
                    v-model="editConfig.infomation.threaten"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 地址信息 -->
          <div class="basic-info-title">地址信息</div>
          <div class="address-view">
            <el-row>
              <el-col :span="20">
                <el-form-item label="定位" prop="position">
                  <el-input v-model="editConfig.infomation.position"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="地图" prop="map">
                  <div style="height: 100px"></div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="国家" prop="country">
                  <CommonSelectView :common-value="editConfig.infomation.country" :common-options="countryOptions" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="省份" prop="province">
                  <CommonSelectView :common-value="editConfig.infomation.province" :common-options="provinceOptions" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="城市" prop="city">
                  <CommonSelectView :common-value="editConfig.infomation.city" :common-options="cityOptions" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="区域" prop="region">
                  <CommonSelectView :common-value="editConfig.infomation.region" :common-options="regionOptions" />
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="详细地址" prop="address">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    placeholder="请输入内容"
                    v-model="editConfig.infomation.address"
                  ></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="20">
                <el-form-item label="备注" prop="notes">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    placeholder="请输入内容"
                    v-model="editConfig.infomation.notes"
                  ></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="">
                  <div class="annex-view">
                    <div @click="addAnnexClick">添加</div>
                    <div class="setFormat" @click="setFormatClick">设置允许上传的文件格式</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="editConfig.visible = false">保存</el-button>
        <el-button size="small" @click="editConfig.visible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CommonSelectView from "@/components/makepager/CommonSelectView"
export default {
  name: "AddSalesOpportunityDialog",
  props: {
    editCommonConfig: {
      type: Object,
      default: () => {
        return {
          visible: false,
          title: "新建",
          infomation: {
            customName: "",
            salesOpportunityNo: "POT521",
            opportunityName: "",
            contactName: "",
            businessSource: "",
            businessType: "",
            saleStage: "",
            salesHead: "",
            oldCustomerMarket: "",
            competitor: "",
            possible: "",
            currency: "",
            budgetAbsoluteValue: "",
            expectDealDate: "",
            expectContractAmount: "",
            currentState: "",
            demandPainPoint: "",
            projectApproval: "",
            fundBudget: "",
            decisionMaker: "",
            decisionFactors: "",
            decisionFlow: "",
            programme: "",
            advantage: "",
            disadvantage: "",
            opportunity: "",
            threaten: "",
            position: "",
            map: "",
            country: "1",
            province: "1",
            city: "1",
            region: "1",
            notes: ""
          }
        }
      }
    }
  },
  components: { CommonSelectView },
  computed: {
    searchCommonHeight() {
      return this.$refs.searchCommonView.offsetHeight
    }
  },
  data() {
    return {
      dialogWidth: "80%",
      editConfig: this.editCommonConfig,
      rules: {
        salesOpportunityNo: [{ required: true, message: "请输入", trigger: "blur" }],
        opportunityName: [{ required: true, message: "请选择", trigger: "change" }],
        salesHead: [{ required: true, message: "请选择", trigger: "change" }],
        saleStage: [{ required: true, message: "请选择", trigger: "change" }],
        currency: [{ required: true, message: "请选择", trigger: "change" }],
        expectDealDate: [{ required: true, message: "请选择", trigger: "change" }],
        expectContractAmount: [{ required: true, message: "请选择", trigger: "change" }]
      },
      businessSourceOptions: [
        { value: "1", label: "后台注册" },
        { value: "2", label: "代理商客户" },
        { value: "3", label: "电话陌生拜访" },
        { value: "4", label: "直接访问" },
        { value: "5", label: "项目合作" },
        { value: "6", label: "个人自找" },
        { value: "7", label: "二次销售" },
        { value: "8", label: "公司电话" }
      ],
      salesHeadOptions: [
        { value: "1", label: "BOSS" },
        { value: "2", label: "Mia" },
        { value: "3", label: "财务" },
        { value: "4", label: "市场" },
        { value: "5", label: "系统管理员" },
        { value: "6", label: "销售" },
        { value: "7", label: "销售总监" }
      ],
      businessTypeOptions: [], // 商机类型
      saleStageOptions: [], // 销售阶段
      oldCustomerMarketOptions: [], // 老客户营销
      possibleOptions: [], // 可能性
      currencyOptions: [], // 币种
      currentStateOptions: [], // 当前状态
      countryOptions: [{ value: "1", label: "中国" }], // 国家
      provinceOptions: [
        { value: "1", label: "北京市" },
        { value: "2", label: "上海市" },
        { value: "3", label: "吉林省" },
        { value: "4", label: "陕西省" }
      ], // 省份
      cityOptions: [
        { value: "1", label: "北京市" },
        { value: "2", label: "上海市" },
        { value: "3", label: "吉林市" },
        { value: "4", label: "西安市" }
      ], // 城市
      regionOptions: [
        { value: "1", label: "朝阳区" },
        { value: "2", label: "海淀区" },
        { value: "3", label: "通州区" },
        { value: "4", label: "西城区" }
      ] // 区域
    }
  },
  created() {},
  methods: {
    handleClose() {
      this.editConfig.visible = false
    },
    // 添加附件
    addAnnexClick() {},
    // 设置允许上传文件格式
    setFormatClick() {}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.add-sales-opportunity {
  .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 {
        display: flex;
        .common-select-btn {
          margin-left: 5px;
          font-size: 18px;
        }
      }
    }
    .address-view {
      margin-top: 10px;
      padding-right: 40px;
    }
    .annex-view {
      display: flex;
      color: #6166d3;
      .setFormat {
        margin-left: 10px;
      }
    }
  }
  .unflod-collapse {
    display: flex;
    height: 30px;
    justify-content: center;
    align-items: center;
    color: #6166d3;
  }
  .dialog-footer {
    background-color: #f5f5f5;
    height: 55px;
    line-height: 55px;
  }
}
::v-deep {
  .el-dialog__header {
    padding: 12.5px 10px;
    border-bottom: 1px solid #e5e5e5;
    .el-dialog__title {
      font-size: 15px;
      color: #323232;
      font-weight: bold;
    }
  }
  .el-dialog__body {
    padding: 0px;
  }
  .el-dialog__footer {
    padding: 0px;
    text-align: center;
    box-sizing: border-box;
    border-top: 1px solid #dadee5;
  }
}
</style>

 src/views/sales/salesOpportunity/index.vue

@@ -4,9 +4,8 @@
    <div class="btn-pager">
      <PublicFunctionBtnView
        :duplicate-check="true"
        :list-button="true"
        :map-button="true"
        :statistics="true"
        :custom-funnel="true"
        :operates-list="operatesList"
      />
      <PagerView class="page" />
@@ -22,7 +21,7 @@
      </template>
    </TableCommonView>
    <!-- 新建/编辑 -->
    <AddSalesLeadDialog v-if="editSalesLeadConfig.visible" :edit-sales-lead-config="editSalesLeadConfig" />
    <AddSalesOpportunityDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
  </div>
</template>

@@ -31,7 +30,7 @@
import PublicFunctionBtnView from "@/components/makepager/PublicFunctionBtnView"
import PagerView from "@/components/makepager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import AddSalesLeadDialog from "@/views/custom/salesLead/AddSalesLeadDialog"
import AddSalesOpportunityDialog from "@/views/sales/salesOpportunity/AddSalesOpportunityDialog"

export default {
  name: "SalesOpportunity",
@@ -41,7 +40,7 @@
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddSalesLeadDialog
    AddSalesOpportunityDialog
  },
  computed: {
    searchCommonHeight() {
@@ -51,7 +50,21 @@
  data() {
    return {
      tableList: {},
      queryClassOptions: [{ value: "1", label: "全部" }],
      queryClassOptions: [
        { value: "1", label: "全部" },
        { value: "2", label: "初期沟通" },
        { value: "3", label: "商务谈判" },
        { value: "4", label: "成功结案" },
        { value: "5", label: "失败结案" },
        { value: "6", label: "本周创建" },
        { value: "7", label: "本月创建" },
        { value: "8", label: "本周预计成交" },
        { value: "9", label: "本月预计成交" },
        { value: "10", label: "在谈商机" },
        { value: "11", label: "项目暂停" },
        { value: "12", label: "15天未联系商机" },
        { value: "13", label: "预计金额1W以上" }
      ],
      searchOptions: [],
      operatesList: [
        { id: "1", name: "共享" },
@@ -61,9 +74,9 @@
        { id: "5", name: "更改创建人" },
        { id: "6", name: "树结构设置" },
        { id: "7", name: "审批设置" },
        { id: "8", name: "恢復" }
        { id: "8", name: "恢复预设列宽" }
      ],
      editSalesLeadConfig: {
      editConfig: {
        visible: false,
        title: "新建",
        infomation: {}
@@ -78,31 +91,29 @@
      this.tableList = {
        tableInfomation: [
          {
            customName: "123123",
            customType: "普通客户",
            salesHead: "系统管理员",
            modifyTime: "2023-0703 11:22:12",
            customerSize: "499以上",
            importantLevel: "A类客户",
            customNumber: "AC651",
            customStatus: "潜在客户",
            productName: "自动打印机",
            startDate: "2023-06-27",
            endDate: "2024-07-15"
            opportunityName: "123123",
            customName: "上海铃铛",
            salesOpportunityNo: "POT205",
            contactName: "刘总",
            saleStage: "初期沟通",
            possible: "A类客户",
            expectDealDate: "50",
            expectContractAmount: "2023-05-28",
            budgetAbsoluteValue: "￥200,000.00",
            salesHead: "系统管理员"
          }
        ],
        tableColumn: [
          { label: "客户名称", prop: "customName", min: 120 }, // 客户名称
          { label: "客户类型", prop: "customType", min: 90 }, // 客户类型
          { label: "销售负责人", prop: "salesHead" }, // 销售负责人
          { label: "修改时间", prop: "modifyTime", min: 100 }, // 修改时间
          { label: "客户规模", prop: "customerSize" }, // 客户规模
          { label: "重要级别", prop: "importantLevel" }, // 重要级别
          { label: "客户编号", prop: "customNumber" }, // 客户编号
          { label: "客户状态", prop: "customStatus" }, // 客户状态
          { label: "产品名称", prop: "productName" }, // 产品名称
          { label: "服务开始日期", prop: "startDate" }, // 服务开始日期
          { label: "服务到期日", prop: "endDate" } // 服务到期日
          { label: "机会名称", prop: "opportunityName", min: 120 }, // 机会名称
          { label: "客户名称", prop: "customName", min: 90 }, // 客户名称
          { label: "销售机会编号", prop: "salesOpportunityNo" }, // 销售机会编号
          { label: "联系人姓名", prop: "contactName", min: 100 }, // 联系人姓名
          { label: "销售阶段", prop: "saleStage" }, // 销售阶段
          { label: "可能性(%)", prop: "possible" }, // 可能性
          { label: "预计成交日期", prop: "expectDealDate" }, // 预计成交日期
          { label: "预计合同金额", prop: "expectContractAmount" }, // 预计合同金额
          { label: "预算绝对值", prop: "budgetAbsoluteValue" }, // 预算绝对值
          { label: "销售负责人", prop: "salesHead" } // 销售负责人
        ]
      }
      this.searchOptions = []
@@ -113,47 +124,85 @@
    },
    // 新建
    addBtnClick() {
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "新建"
      this.editSalesLeadConfig.infomation = {
      this.editConfig.visible = true
      this.editConfig.title = "新建"
      this.editConfig.infomation = {
        customName: "",
        saleLeadNumber: "LEA50",
        salesOpportunityNo: "POT521",
        opportunityName: "",
        contactName: "",
        contactDuties: "",
        phoneNumber: "",
        businessStatus: "新建",
        businessSource: "1",
        owner: "",
        businessSource: "",
        businessType: "",
        saleStage: "",
        salesHead: "",
        oldCustomerMarket: "",
        competitor: "",
        possible: "",
        currency: "",
        budgetAbsoluteValue: "",
        expectDealDate: "",
        expectContractAmount: "",
        currentState: "",
        demandPainPoint: "",
        projectApproval: "",
        fundBudget: "",
        decisionMaker: "",
        decisionFactors: "",
        decisionFlow: "",
        programme: "",
        advantage: "",
        disadvantage: "",
        opportunity: "",
        threaten: "",
        position: "",
        map: "",
        country: "1",
        province: "1",
        city: "1",
        region: "1",
        address: ""
        notes: ""
      }
    },
    // 编辑
    handleClick(row) {
      console.log(row)
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "编辑"
      this.editSalesLeadConfig.infomation = {
        customName: row.customName,
        saleLeadNumber: row.saleLeadNumber,
        contactName: row.contactName,
        contactDuties: row.contactDuties,
        phoneNumber: row.phoneNumber,
        businessStatus: "新建",
        businessSource: row.businessSource,
        owner: row.owner,
      this.editConfig.visible = true
      this.editConfig.title = "编辑"
      this.editConfig.infomation = {
        customName: "",
        salesOpportunityNo: "POT521",
        opportunityName: "",
        contactName: "",
        businessSource: "",
        businessType: "",
        saleStage: "",
        salesHead: "",
        oldCustomerMarket: "",
        competitor: "",
        possible: "",
        currency: "",
        budgetAbsoluteValue: "",
        expectDealDate: "",
        expectContractAmount: "",
        currentState: "",
        demandPainPoint: "",
        projectApproval: "",
        fundBudget: "",
        decisionMaker: "",
        decisionFactors: "",
        decisionFlow: "",
        programme: "",
        advantage: "",
        disadvantage: "",
        opportunity: "",
        threaten: "",
        position: "",
        map: "",
        country: "1",
        province: "1",
        city: "1",
        region: "1",
        address: ""
        notes: ""
      }
    }
  }

 src/views/sales/salesReturn/index.vue

@@ -2,27 +2,20 @@
  <div class="sales-return">
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <div class="btn-pager">
      <PublicFunctionBtnView
        :duplicate-check="true"
        :list-button="true"
        :map-button="true"
        :statistics="true"
        :operates-list="operatesList"
      />
      <PublicFunctionBtnView :receive="false" :import-button="false" receive:operates-list="operatesList" />
      <PagerView class="page" />
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
      <template slot="tableButton">
        <el-table-column label="操作" width="100">
        <el-table-column label="操作" width="60">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">跟进</el-button>
          </template>
        </el-table-column>
      </template>
    </TableCommonView>
    <!-- 新建/编辑 -->
    <AddSalesLeadDialog v-if="editSalesLeadConfig.visible" :edit-sales-lead-config="editSalesLeadConfig" />
    <AddSalesLeadDialog v-if="editConfig.visible" :edit-sales-lead-config="editConfig" />
  </div>
</template>

@@ -53,9 +46,10 @@
      tableList: {},
      queryClassOptions: [
        { value: "1", label: "全部" },
        { value: "2", label: "广告宣传" },
        { value: "3", label: "跟进中" },
        { value: "4", label: "失败关闭" }
        { value: "2", label: "中止" },
        { value: "3", label: "结束" },
        { value: "4", label: "已入库" },
        { value: "4", label: "未入库" }
      ],
      searchOptions: [],
      operatesList: [
@@ -66,9 +60,9 @@
        { id: "5", name: "更改创建人" },
        { id: "6", name: "树结构设置" },
        { id: "7", name: "审批设置" },
        { id: "8", name: "公海参数设置" }
        { id: "8", name: "恢复预设列宽" }
      ],
      editSalesLeadConfig: {
      editConfig: {
        visible: false,
        title: "新建",
        infomation: {}
@@ -83,31 +77,27 @@
      this.tableList = {
        tableInfomation: [
          {
            customName: "123123",
            customType: "普通客户",
            salesReturnOrderNo: "THD20230607-44",
            customName: "欧克科技股份有限公司",
            returnDate: "2023-06-07",
            state: "未入库",
            returnWarehouse: "总仓",
            refundabe: "￥9,499.00",
            refunded: "￥1,499.00",
            salesHead: "系统管理员",
            modifyTime: "2023-0703 11:22:12",
            customerSize: "499以上",
            importantLevel: "A类客户",
            customNumber: "AC651",
            customStatus: "潜在客户",
            productName: "自动打印机",
            startDate: "2023-06-27",
            endDate: "2024-07-15"
            modifyTime: "2023-06-07 11:10:25"
          }
        ],
        tableColumn: [
          { label: "客户名称", prop: "customName", min: 120 }, // 客户名称
          { label: "客户类型", prop: "customType", min: 90 }, // 客户类型
          { label: "销售负责人", prop: "salesHead" }, // 销售负责人
          { label: "修改时间", prop: "modifyTime", min: 100 }, // 修改时间
          { label: "客户规模", prop: "customerSize" }, // 客户规模
          { label: "重要级别", prop: "importantLevel" }, // 重要级别
          { label: "客户编号", prop: "customNumber" }, // 客户编号
          { label: "客户状态", prop: "customStatus" }, // 客户状态
          { label: "产品名称", prop: "productName" }, // 产品名称
          { label: "服务开始日期", prop: "startDate" }, // 服务开始日期
          { label: "服务到期日", prop: "endDate" } // 服务到期日
          { label: "销售退货单编号", prop: "salesReturnOrderNo", min: 120 },
          { label: "客户名称", prop: "customName", min: 90 },
          { label: "退货日期", prop: "returnDate", min: 100 },
          { label: "状态", prop: "state" },
          { label: "退入仓库", prop: "returnWarehouse" },
          { label: "应退款", prop: "refundabe" },
          { label: "已退款", prop: "refunded" },
          { label: "销售负责人", prop: "salesHead" },
          { label: "修改时间", prop: "modifyTime" }
        ]
      }
      this.searchOptions = []
@@ -118,9 +108,9 @@
    },
    // 新建
    addBtnClick() {
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "新建"
      this.editSalesLeadConfig.infomation = {
      this.editConfig.visible = true
      this.editConfig.title = "新建"
      this.editConfig.infomation = {
        customName: "",
        saleLeadNumber: "LEA50",
        contactName: "",
@@ -141,9 +131,9 @@
    // 编辑
    handleClick(row) {
      console.log(row)
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "编辑"
      this.editSalesLeadConfig.infomation = {
      this.editConfig.visible = true
      this.editConfig.title = "编辑"
      this.editConfig.infomation = {
        customName: row.customName,
        saleLeadNumber: row.saleLeadNumber,
        contactName: row.contactName,

 src/views/sales/subOrder/AddSubOrderDialog.vue

New file
@@ -0,0 +1,294 @@
<template>
  <div class="add-quotation">
    <el-dialog
      :title="editCommonConfig.title + '销售子单'"
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
    >
      <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="customName">
                  <div class="custom-name">
                    <el-input v-model="editConfig.infomation.customName"></el-input>
                    <div class="common-select-btn"><i class="el-icon-circle-plus-outline" title="选择"></i></div>
                    <div class="common-select-btn"><i class="el-icon-edit" title="编辑"></i></div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单据编号" prop="documentNumber">
                  <el-input v-model="editConfig.infomation.documentNumber"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="销售总单" prop="masterOrder">
                  <div class="custom-name">
                    <el-input v-model="editConfig.infomation.masterOrder"></el-input>
                    <div class="common-select-btn"><i class="el-icon-circle-plus-outline" title="选择"></i></div>
                    <div class="common-select-btn"><i class="el-icon-edit" title="编辑"></i></div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="负责人" prop="owner">
                  <el-select v-model="editConfig.infomation.owner" placeholder="请选择" size="mini" style="width: 63%">
                    <el-option v-for="item in ownerOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </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="">
                  <div class="annex-view">
                    <div @click="addAnnexClick">添加</div>
                    <div class="setFormat" @click="setFormatClick">设置允许上传的文件格式</div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 产品管理 -->
          <div class="basic-info-title" style="display: flex">
            产品管理
            <div style="margin-left: 400px">
              币种
              <el-select v-model="editConfig.infomation.currency" placeholder="请选择" size="mini" style="width: 63%">
                <el-option v-for="item in currencyOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="product-view">
            <CommonFormTableView :product-table-list="productTableList" />
          </div>
          <!-- 合计 -->
          <div class="basic-info-view">
            <el-row>
              <el-col :span="7" :offset="17">
                <el-form-item prop="discount">
                  <template slot="label">
                    <span>整单折扣</span>
                    <el-select
                      v-model="discount"
                      placeholder="请选择"
                      size="mini"
                      style="width: 104px; margin-left: 3px"
                    >
                      <el-option
                        v-for="item in discountOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </template>
                  <el-input v-model="editConfig.infomation.discount"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7" :offset="17">
                <el-form-item prop="discount">
                  <template slot="label">
                    <span>调整</span>
                    <el-select v-model="adjust" placeholder="请选择" size="mini" style="width: 74px; margin-left: 3px">
                      <el-option
                        v-for="item in adjustOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </template>
                  <el-input v-model="editConfig.infomation.discount"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7" :offset="17">
                <el-form-item label="合计" prop="total">
                  <el-button type="text" v-model="editConfig.infomation.total" style="color: #555; font-size: 13px">{{
                    editConfig.infomation.total ? editConfig.infomation.total : "0.00"
                  }}</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="editConfig.visible = false">保存</el-button>
        <el-button size="small" @click="editConfig.visible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CommonFormTableView from "@/components/makepager/CommonFormTableView"
export default {
  name: "QuotationDialog",
  components: { CommonFormTableView },
  props: {
    editCommonConfig: {
      type: Object,
      default: () => {
        return {
          visible: false,
          title: "新建",
          infomation: {
            customName: "",
            documentNumber: "AC6521",
            masterOrder: "",
            owner: "",
            currency: "",
            discount: "",
            total: "14.00"
          }
        }
      }
    }
  },
  computed: {},
  data() {
    return {
      dialogWidth: "80%",
      editConfig: this.editCommonConfig,
      rules: {
        documentNumber: [{ required: true, message: "请输入", trigger: "blur" }],
        owner: [{ required: true, message: "请选择", trigger: "change" }]
      },
      ownerOptions: [
        // 负责人
        { value: "1", label: "BOSS" },
        { value: "2", label: "Mia" },
        { value: "3", label: "财务" },
        { value: "4", label: "市场" },
        { value: "5", label: "系统管理员" },
        { value: "6", label: "销售" },
        { value: "7", label: "销售总监" }
      ],
      discount: "2",
      discountOptions: [
        { value: "1", label: "百分比降价" },
        { value: "2", label: "直接降价" }
      ], // 整单折扣
      adjust: "1",
      adjustOptions: [
        { value: "1", label: "增加" },
        { value: "2", label: "减少" }
      ], // 调整
      productTableList: {
        tableData: [
          {
            id: "1",
            productNumber: "123",
            productName: "",
            startDate: "",
            endDate: "2016-05-02",
            number: "",
            address: ""
          }
        ]
      }
    }
  },
  created() {},
  methods: {
    handleClose() {
      this.editConfig.visible = false
    },
    // 添加附件
    addAnnexClick() {},
    // 设置允许上传文件格式
    setFormatClick() {}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.add-quotation {
  .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 {
        display: flex;
        .common-select-btn {
          margin-left: 5px;
          font-size: 18px;
        }
      }
    }
    .address-view {
      margin-top: 10px;
      padding-right: 40px;
    }
    .annex-view {
      display: flex;
      color: #6166d3;
      .setFormat {
        margin-left: 10px;
      }
    }
  }
  .dialog-footer {
    background-color: #f5f5f5;
    height: 55px;
    line-height: 55px;
  }
}
::v-deep {
  .el-dialog__header {
    padding: 12.5px 10px;
    border-bottom: 1px solid #e5e5e5;
    .el-dialog__title {
      font-size: 15px;
      color: #323232;
      font-weight: bold;
    }
  }
  .el-dialog__body {
    padding: 0px;
  }
  .el-dialog__footer {
    padding: 0px;
    text-align: center;
    box-sizing: border-box;
    border-top: 1px solid #dadee5;
  }
  .product-view {
    .el-form-item__label {
      padding: 0;
    }
  }
}
</style>

 src/views/sales/subOrder/index.vue

@@ -2,27 +2,20 @@
  <div class="sub-order">
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <div class="btn-pager">
      <PublicFunctionBtnView
        :duplicate-check="true"
        :list-button="true"
        :map-button="true"
        :statistics="true"
        :operates-list="operatesList"
      />
      <PublicFunctionBtnView :operates-list="operatesList" />
      <PagerView class="page" />
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
    <TableCommonView ref="tableListRef" :show-summary="showSummary" :table-list="tableList">
      <template slot="tableButton">
        <el-table-column label="操作" width="100">
        <el-table-column label="操作" width="60">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">跟进</el-button>
          </template>
        </el-table-column>
      </template>
    </TableCommonView>
    <!-- 新建/编辑 -->
    <AddSalesLeadDialog v-if="editSalesLeadConfig.visible" :edit-sales-lead-config="editSalesLeadConfig" />
    <AddSubOrderDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
  </div>
</template>

@@ -31,7 +24,7 @@
import PublicFunctionBtnView from "@/components/makepager/PublicFunctionBtnView"
import PagerView from "@/components/makepager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import AddSalesLeadDialog from "@/views/custom/salesLead/AddSalesLeadDialog"
import AddSubOrderDialog from "@/views/sales/subOrder/AddSubOrderDialog"

export default {
  name: "SubOrder",
@@ -41,7 +34,7 @@
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddSalesLeadDialog
    AddSubOrderDialog
  },
  computed: {
    searchCommonHeight() {
@@ -53,9 +46,11 @@
      tableList: {},
      queryClassOptions: [
        { value: "1", label: "全部" },
        { value: "2", label: "广告宣传" },
        { value: "3", label: "跟进中" },
        { value: "4", label: "失败关闭" }
        { value: "2", label: "已批准" },
        { value: "3", label: "审批中" },
        { value: "4", label: "未提交" },
        { value: "5", label: "已驳回" },
        { value: "6", label: "已拒绝" }
      ],
      searchOptions: [],
      operatesList: [
@@ -66,12 +61,17 @@
        { id: "5", name: "更改创建人" },
        { id: "6", name: "树结构设置" },
        { id: "7", name: "审批设置" },
        { id: "8", name: "公海参数设置" }
        { id: "8", name: "恢复预设列宽" }
      ],
      editSalesLeadConfig: {
      editConfig: {
        visible: false,
        title: "新建",
        infomation: {}
      },
      showSummary: {
        show: true,
        sumProp: ["number"],
        mergeNumber: 7
      }
    }
  },
@@ -83,31 +83,23 @@
      this.tableList = {
        tableInfomation: [
          {
            customName: "123123",
            customType: "普通客户",
            salesHead: "系统管理员",
            modifyTime: "2023-0703 11:22:12",
            customerSize: "499以上",
            importantLevel: "A类客户",
            customNumber: "AC651",
            customStatus: "潜在客户",
            documentNumber: "ZDYBD12-1",
            customName: "上海有限公司",
            masterOrder: "ZDYBD03-1",
            owner: "系统管理员",
            approvalStatus: "未提交",
            productName: "自动打印机",
            startDate: "2023-06-27",
            endDate: "2024-07-15"
            number: "2.00"
          }
        ],
        tableColumn: [
          { label: "单据编号", prop: "documentNumber", min: 120 }, // 单据编号
          { label: "客户名称", prop: "customName", min: 120 }, // 客户名称
          { label: "客户类型", prop: "customType", min: 90 }, // 客户类型
          { label: "销售负责人", prop: "salesHead" }, // 销售负责人
          { label: "修改时间", prop: "modifyTime", min: 100 }, // 修改时间
          { label: "客户规模", prop: "customerSize" }, // 客户规模
          { label: "重要级别", prop: "importantLevel" }, // 重要级别
          { label: "客户编号", prop: "customNumber" }, // 客户编号
          { label: "客户状态", prop: "customStatus" }, // 客户状态
          { label: "销售总单", prop: "masterOrder", min: 90 }, // 销售总单
          { label: "负责人", prop: "owner" }, // 负责人
          { label: "审批状态", prop: "approvalStatus" }, // 审批状态
          { label: "产品名称", prop: "productName" }, // 产品名称
          { label: "服务开始日期", prop: "startDate" }, // 服务开始日期
          { label: "服务到期日", prop: "endDate" } // 服务到期日
          { label: "数量", prop: "number", min: 100 } // 数量
        ]
      }
      this.searchOptions = []
@@ -118,47 +110,31 @@
    },
    // 新建
    addBtnClick() {
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "新建"
      this.editSalesLeadConfig.infomation = {
      this.editConfig.visible = true
      this.editConfig.title = "新建"
      this.editConfig.infomation = {
        customName: "",
        saleLeadNumber: "LEA50",
        contactName: "",
        contactDuties: "",
        phoneNumber: "",
        businessStatus: "新建",
        businessSource: "1",
        documentNumber: "AC6521",
        masterOrder: "",
        owner: "",
        position: "",
        map: "",
        country: "1",
        province: "1",
        city: "1",
        region: "1",
        address: ""
        currency: "",
        discount: "",
        total: ""
      }
    },
    // 编辑
    handleClick(row) {
      console.log(row)
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "编辑"
      this.editSalesLeadConfig.infomation = {
        customName: row.customName,
        saleLeadNumber: row.saleLeadNumber,
        contactName: row.contactName,
        contactDuties: row.contactDuties,
        phoneNumber: row.phoneNumber,
        businessStatus: "新建",
        businessSource: row.businessSource,
        owner: row.owner,
        position: "",
        map: "",
        country: "1",
        province: "1",
        city: "1",
        region: "1",
        address: ""
      this.editConfig.visible = true
      this.editConfig.title = "编辑"
      this.editConfig.infomation = {
        customName: "",
        documentNumber: "AC6521",
        masterOrder: "",
        owner: "",
        currency: "",
        discount: "",
        total: "14.00"
      }
    }
  }

 src/views/service/serviceContract/AddServiceContractDialog.vue

@@ -1,5 +1,5 @@
<template>
  <div class="service-contract">
  <div class="add-service-contract">
    <el-dialog
      :title="editCommonConfig.title + '服务合同'"
      :visible.sync="editConfig.visible"
@@ -339,7 +339,7 @@

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.service-contract {
.add-service-contract {
  .basic-info {
    .basic-info-title {
      background-color: #f4f8fe;

 src/views/service/serviceFeeManage/AddServiceFeeManageDialog.vue

@@ -262,7 +262,6 @@
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="editConfig.visible = false">保并提交审批</el-button>
        <el-button type="primary" size="small" @click="editConfig.visible = false">保存</el-button>
        <el-button size="small" @click="editConfig.visible = false">取消</el-button>
      </div>

 src/views/service/serviceFollowup/AddServiceFollowupDialog.vue

@@ -143,7 +143,6 @@
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="editConfig.visible = false">保并提交审批</el-button>
        <el-button type="primary" size="small" @click="editConfig.visible = false">保存</el-button>
        <el-button size="small" @click="editConfig.visible = false">取消</el-button>
      </div>