服务管理模块和销售管理模块新增及路由配置

yangfeng

2023-07-05 5cc1ac83a9cc0aa10acffb54a1c4d62b73b595d5

服务管理模块和销售管理模块新增及路由配置

 src/components/layout/components/AppMain.vue

@@ -1,9 +1,7 @@
<template>
  <div class="app-main">
    <AppHeader :headerTitle="$route.meta.title" />
    <transition>
      <router-view :key="key" />
    </transition>
  </div>
</template>


 src/components/layout/components/appsidebar/index.vue

@@ -27,6 +27,15 @@
            <i class="el-icon-location"></i>
            <span>销售管理</span>
          </template>
          <el-menu-item index="/sales/salesOpportunity">销售机会</el-menu-item>
          <el-menu-item index="/sales/quotation">报价单</el-menu-item>
          <el-menu-item index="/sales/masterOrder">销售总单</el-menu-item>
          <el-menu-item index="/sales/subOrder">销售子单</el-menu-item>
          <el-menu-item index="/sales/salesDetails">销售明细单</el-menu-item>
          <el-menu-item index="/sales/salesReturn">销售退货单</el-menu-item>
          <el-menu-item index="/sales/refundForm">销售退款单</el-menu-item>
          <el-menu-item index="/sales/contractManage">合同管理</el-menu-item>
          <el-menu-item index="/sales/productPlan">生产计划</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">

 src/components/makepager/CommonFormTableView.vue

New file
@@ -0,0 +1,120 @@
<template>
  <div class="page-view">
    <el-form ref="form" :model="productTableList" :show-message="false" label-position="right">
      <el-table :data="productTableList.tableData" style="width: 100%">
        <el-table-column prop="id" label="#" width="30"></el-table-column>
        <el-table-column prop="productName" label="产品名称">
          <template slot-scope="scope">
            <el-form-item
              label=" "
              :prop="'tableData.' + scope.$index + '.productName'"
              :rules="[{ required: true, message: '输入不能为空' }]"
            >
              <el-input v-model.trim="scope.row.productName" maxlength="50" size="mini" style="width: 70px"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="productNumber" label="产品编号"></el-table-column>
        <el-table-column prop="startDate" label="服务开始日" width="140">
          <template slot-scope="scope">
            <el-form-item
              label=" "
              :prop="'tableData.' + scope.$index + '.startDate'"
              :rules="[{ required: true, message: '输入不能为空' }]"
            >
              <el-date-picker
                v-model="scope.row.startDate"
                size="mini"
                type="date"
                placeholder="选择日期"
                style="width: 90px"
              >
              </el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="endDate" label="服务到期日" width="140">
          <template slot-scope="scope">
            <el-form-item
              label=" "
              :prop="'tableData.' + scope.$index + '.endDate'"
              :rules="[{ required: true, message: '输入不能为空' }]"
            >
              <el-date-picker
                v-model="scope.row.endDate"
                size="mini"
                type="date"
                placeholder="选择日期"
                style="width: 90px"
              >
              </el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="number" label="数量"></el-table-column>
        <el-table-column prop="" label="含税单价"> </el-table-column>
        <el-table-column prop="" label="不含税单价"> </el-table-column>
        <el-table-column prop="" label="折扣率(%)"></el-table-column>
        <el-table-column prop="" label="折扣额"> </el-table-column>
        <el-table-column prop="" label="税(销售)"> </el-table-column>
        <el-table-column prop="" label="实际含税单价"></el-table-column>
        <el-table-column prop="" label="价税合计"> </el-table-column>
        <el-table-column prop="" label="描述"> </el-table-column>
      </el-table>
    </el-form>
    <div style="margin: 10px">
      <el-button size="small" type="primary">新增</el-button>
      <el-button size="small" type="primary">导入明细</el-button>
      <el-button size="small" type="primary">清空</el-button>
      <el-button size="small" type="primary">重算</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "CommmonFormTableView",
  props: {
    productTableList: {
      type: Object,
      default: () => {
        return {
          tableData: [], // 接口返回数据
          tableColumn: [
            // table表单
            { label: "", prop: "", min: 200, tooltip: true }
          ]
        }
      }
    }
  },
  data() {
    return {}
  },
  computed: {
    maxHeight() {
      if (this.productTableList.height) {
        return `calc(100vh - ${this.productTableList.height})`
      }
      return undefined
    }
  },
  methods: {
    handleReserve(row) {
      return row._id ? row._id : row.id
    },
    handleSelectionChange(val) {
      this.$emit("getSelectArray", val)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.page-view {
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>

 src/components/makepager/TableCommonView.vue

@@ -28,7 +28,7 @@

<script>
export default {
  name: "PagerView",
  name: "TableCommonView",
  props: {
    tableList: {
      type: Object,

 src/router/index.js

@@ -3,13 +3,13 @@
// import type from "@/router/deployCode"

import customRouter from "./custom/index.js"
// import salesRouter from "./sales/index.js"
import salesRouter from "./sales/index.js"
import serviceRouter from "./service/index.js"

Vue.use(Router)
const login = (resolve) => require(["@/views/login/index"], resolve)
const custom = (resolve) => require(["@/views/custom/index"], resolve)
// const sales = (resolve) => require(["@/views/sales/index"], resolve)
const sales = (resolve) => require(["@/views/sales/index"], resolve)
const service = (resolve) => require(["@/views/service/index"], resolve)

export const routes = [
@@ -23,16 +23,16 @@
      isAllways: true
    }
  },
  // {
  //   path: "sales", // 销售管理
  //   name: "sales",
  //   component: sales,
  //   children: salesRouter,
  //   meta: {
  //     title: "销售管理",
  //     isAllways: true
  //   }
  // },
  {
    path: "sales", // 销售管理
    name: "sales",
    component: sales,
    children: salesRouter,
    meta: {
      title: "销售管理",
      isAllways: true
    }
  },
  {
    path: "service", // 服务管理
    name: "service",

 src/router/sales/index.js

@@ -1,41 +1,86 @@
// const type from '@/router/deployCode'

const salesLead = (resolve) => require(["@/views/custom/salesLead/index"], resolve) // 销售线索
const customManage = (resolve) => require(["@/views/custom/customManage/index"], resolve) // 销售线索
const contacts = (resolve) => require(["@/views/custom/contacts/index"], resolve) // 联系人
const followupRecords = (resolve) => require(["@/views/custom/followupRecords/index"], resolve) // 跟进记录
const salesOpportunity = (resolve) => require(["@/views/sales/salesOpportunity/index"], resolve) // 销售机会
const quotation = (resolve) => require(["@/views/sales/quotation/index"], resolve) // 报价单
const masterOrder = (resolve) => require(["@/views/sales/masterOrder/index"], resolve) // 销售总单
const subOrder = (resolve) => require(["@/views/sales/subOrder/index"], resolve) // 销售子单
const salesDetails = (resolve) => require(["@/views/sales/salesDetails/index"], resolve) // 销售明细单
const salesReturn = (resolve) => require(["@/views/sales/salesReturn/index"], resolve) // 销售退货单
const refundForm = (resolve) => require(["@/views/sales/refundForm/index"], resolve) // 销售退款单
const contractManage = (resolve) => require(["@/views/sales/contractManage/index"], resolve) // 合同管理
const productPlan = (resolve) => require(["@/views/sales/productPlan/index"], resolve) // 生产计划

const appconfig = [
  {
    path: "/custom/salesLead",
    name: "salesLead",
    component: salesLead,
    path: "/sales/salesOpportunity",
    name: "salesOpportunity",
    component: salesOpportunity,
    meta: {
      title: "销售线索"
      title: "销售机会"
    }
  },
  {
    path: "/custom/customManage",
    name: "customManage",
    component: customManage,
    path: "/sales/quotation",
    name: "quotation",
    component: quotation,
    meta: {
      title: "客户管理"
      title: "报价单"
    }
  },
  {
    path: "/custom/contacts",
    name: "contacts",
    component: contacts,
    path: "/sales/masterOrder",
    name: "masterOrder",
    component: masterOrder,
    meta: {
      title: "联系人"
      title: "销售总单"
    }
  },
  {
    path: "/custom/followupRecords",
    name: "followupRecords",
    component: followupRecords,
    path: "/sales/subOrder",
    name: "subOrder",
    component: subOrder,
    meta: {
      title: "跟进记录"
      title: "销售子单"
    }
  },
  {
    path: "/sales/salesDetails",
    name: "salesDetails",
    component: salesDetails,
    meta: {
      title: "销售明细单"
    }
  },
  {
    path: "/sales/salesReturn",
    name: "salesReturn",
    component: salesReturn,
    meta: {
      title: "销售退货单"
    }
  },
  {
    path: "/sales/refundForm",
    name: "refundForm",
    component: refundForm,
    meta: {
      title: "销售退款单"
    }
  },
  {
    path: "/sales/contractManage",
    name: "contractManage",
    component: contractManage,
    meta: {
      title: "合同管理"
    }
  },
  {
    path: "/sales/productPlan",
    name: "productPlan",
    component: productPlan,
    meta: {
      title: "生产计划"
    }
  }
]

 src/views/custom/contacts/AddContactsDialog.vue

@@ -208,11 +208,7 @@
    }
  },
  components: { CommonSelectView },
  computed: {
    searchCommonHeight() {
      return this.$refs.searchCommonView.offsetHeight
    }
  },
  computed: {},
  data() {
    return {
      dialogWidth: "80%",

 src/views/custom/contacts/index.vue

@@ -36,11 +36,7 @@
    TableCommonView,
    AddContactsDialog
  },
  computed: {
    searchCommonHeight() {
      return this.$refs.searchCommonView.offsetHeight
    }
  },
  computed: {},
  data() {
    return {
      tableList: {},

 src/views/custom/customManage/AddCustomManageDialog.vue

@@ -1,7 +1,7 @@
<template>
  <div class="add-custom-manage">
    <el-dialog
      :title="editContactsConfig.title + '客户管理'"
      :title="editCuntomManageConfig.title + '客户管理'"
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
@@ -25,12 +25,8 @@
                <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-brush" title="工商查询"></i>
                    </div>
                    <div class="common-select-btn">
                      <i class="el-icon-search" title="查重"></i>
                    </div>
                    <div class="common-select-btn"><i class="el-icon-house" title="工商查询"></i></div>
                    <div class="common-select-btn"><i class="el-icon-search" title="查重"></i></div>
                  </div>
                </el-form-item>
              </el-col>
@@ -345,7 +341,7 @@
export default {
  name: "AddCustomManageDialog",
  props: {
    editContactsConfig: {
    editCuntomManageConfig: {
      type: Object,
      default: () => {
        return {
@@ -400,7 +396,7 @@
  data() {
    return {
      dialogWidth: "80%",
      editConfig: this.editContactsConfig,
      editConfig: this.editCuntomManageConfig,
      rules: {
        customName: [{ required: true, message: "请输入客户名称", trigger: "blur" }],
        customStatus: [{ required: true, message: "请选择客户状态", trigger: "change" }],

 src/views/custom/customManage/index.vue

@@ -41,7 +41,7 @@
      </template>
    </TableCommonView>
    <!-- 新建/编辑客户管理 -->
    <AddCustomManageDialog v-if="editConfig.visible" :edit-contacts-config="editConfig" />
    <AddCustomManageDialog v-if="editConfig.visible" :edit-cuntom-manage-config="editConfig" />
  </div>
</template>

@@ -69,7 +69,7 @@
  data() {
    return {
      tableList: {},
      activeName: "second",
      activeName: "first",
      gonghaiValue: "",
      gonghaiOptions: [],
      queryClassOptions: [

 src/views/custom/followupRecords/AddFollowupRecordsDialog.vue

@@ -212,16 +212,7 @@
        owner: [{ required: true, message: "请选择负责人", trigger: "change" }],
        followupRecords: [{ 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: "公司电话" }
      ],
      customStatusOptions: [], // 客户状态
      ownerOptions: [
        { value: "1", label: "BOSS" },
        { value: "2", label: "Mia" },

 src/views/sales/contractManage/index.vue

New file
@@ -0,0 +1,178 @@
<template>
  <div class="contract-manage">
    <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"
      />
      <PagerView class="page" />
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
      <template slot="tableButton">
        <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" />
  </div>
</template>

<script>
import SearchCommonView from "@/components/makepager/SearchCommonView"
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"

export default {
  name: "ContractManage ",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddSalesLeadDialog
  },
  computed: {
    searchCommonHeight() {
      return this.$refs.searchCommonView.offsetHeight
    }
  },
  data() {
    return {
      tableList: {},
      queryClassOptions: [
        { value: "1", label: "全部" },
        { value: "2", label: "广告宣传" },
        { value: "3", label: "跟进中" },
        { value: "4", label: "失败关闭" }
      ],
      searchOptions: [],
      operatesList: [
        { id: "1", name: "共享" },
        { id: "2", name: "批量编辑" },
        { id: "3", name: "导出" },
        { id: "4", name: "下载全部附件" },
        { id: "5", name: "更改创建人" },
        { id: "6", name: "树结构设置" },
        { id: "7", name: "审批设置" },
        { id: "8", name: "公海参数设置" }
      ],
      editSalesLeadConfig: {
        visible: false,
        title: "新建",
        infomation: {}
      }
    }
  },
  created() {
    this.setTable()
  },
  methods: {
    setTable() {
      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"
          }
        ],
        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" } // 服务到期日
        ]
      }
      this.searchOptions = []
      for (let i = 0; i < this.tableList.tableColumn.length; i++) {
        const label = this.tableList.tableColumn[i].label
        this.searchOptions.push({ value: (i + 1).toString(), label: label })
      }
    },
    // 新建
    addBtnClick() {
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "新建"
      this.editSalesLeadConfig.infomation = {
        customName: "",
        saleLeadNumber: "LEA50",
        contactName: "",
        contactDuties: "",
        phoneNumber: "",
        businessStatus: "新建",
        businessSource: "1",
        owner: "",
        position: "",
        map: "",
        country: "1",
        province: "1",
        city: "1",
        region: "1",
        address: ""
      }
    },
    // 编辑
    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: ""
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.contract-manage {
  .btn-pager {
    display: flex;
    .page {
      margin-left: auto;
    }
  }
}
</style>

 src/views/sales/masterOrder/index.vue

New file
@@ -0,0 +1,178 @@
<template>
  <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"
      />
      <PagerView class="page" />
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
      <template slot="tableButton">
        <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" />
  </div>
</template>

<script>
import SearchCommonView from "@/components/makepager/SearchCommonView"
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"

export default {
  name: "MasterOrder",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddSalesLeadDialog
  },
  computed: {
    searchCommonHeight() {
      return this.$refs.searchCommonView.offsetHeight
    }
  },
  data() {
    return {
      tableList: {},
      queryClassOptions: [
        { value: "1", label: "全部" },
        { value: "2", label: "广告宣传" },
        { value: "3", label: "跟进中" },
        { value: "4", label: "失败关闭" }
      ],
      searchOptions: [],
      operatesList: [
        { id: "1", name: "共享" },
        { id: "2", name: "批量编辑" },
        { id: "3", name: "导出" },
        { id: "4", name: "下载全部附件" },
        { id: "5", name: "更改创建人" },
        { id: "6", name: "树结构设置" },
        { id: "7", name: "审批设置" },
        { id: "8", name: "公海参数设置" }
      ],
      editSalesLeadConfig: {
        visible: false,
        title: "新建",
        infomation: {}
      }
    }
  },
  created() {
    this.setTable()
  },
  methods: {
    setTable() {
      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"
          }
        ],
        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" } // 服务到期日
        ]
      }
      this.searchOptions = []
      for (let i = 0; i < this.tableList.tableColumn.length; i++) {
        const label = this.tableList.tableColumn[i].label
        this.searchOptions.push({ value: (i + 1).toString(), label: label })
      }
    },
    // 新建
    addBtnClick() {
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "新建"
      this.editSalesLeadConfig.infomation = {
        customName: "",
        saleLeadNumber: "LEA50",
        contactName: "",
        contactDuties: "",
        phoneNumber: "",
        businessStatus: "新建",
        businessSource: "1",
        owner: "",
        position: "",
        map: "",
        country: "1",
        province: "1",
        city: "1",
        region: "1",
        address: ""
      }
    },
    // 编辑
    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: ""
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.master-order {
  .btn-pager {
    display: flex;
    .page {
      margin-left: auto;
    }
  }
}
</style>

 src/views/sales/productPlan/index.vue

New file
@@ -0,0 +1,178 @@
<template>
  <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"
      />
      <PagerView class="page" />
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
      <template slot="tableButton">
        <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" />
  </div>
</template>

<script>
import SearchCommonView from "@/components/makepager/SearchCommonView"
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"

export default {
  name: "ProductPlan ",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddSalesLeadDialog
  },
  computed: {
    searchCommonHeight() {
      return this.$refs.searchCommonView.offsetHeight
    }
  },
  data() {
    return {
      tableList: {},
      queryClassOptions: [
        { value: "1", label: "全部" },
        { value: "2", label: "广告宣传" },
        { value: "3", label: "跟进中" },
        { value: "4", label: "失败关闭" }
      ],
      searchOptions: [],
      operatesList: [
        { id: "1", name: "共享" },
        { id: "2", name: "批量编辑" },
        { id: "3", name: "导出" },
        { id: "4", name: "下载全部附件" },
        { id: "5", name: "更改创建人" },
        { id: "6", name: "树结构设置" },
        { id: "7", name: "审批设置" },
        { id: "8", name: "公海参数设置" }
      ],
      editSalesLeadConfig: {
        visible: false,
        title: "新建",
        infomation: {}
      }
    }
  },
  created() {
    this.setTable()
  },
  methods: {
    setTable() {
      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"
          }
        ],
        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" } // 服务到期日
        ]
      }
      this.searchOptions = []
      for (let i = 0; i < this.tableList.tableColumn.length; i++) {
        const label = this.tableList.tableColumn[i].label
        this.searchOptions.push({ value: (i + 1).toString(), label: label })
      }
    },
    // 新建
    addBtnClick() {
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "新建"
      this.editSalesLeadConfig.infomation = {
        customName: "",
        saleLeadNumber: "LEA50",
        contactName: "",
        contactDuties: "",
        phoneNumber: "",
        businessStatus: "新建",
        businessSource: "1",
        owner: "",
        position: "",
        map: "",
        country: "1",
        province: "1",
        city: "1",
        region: "1",
        address: ""
      }
    },
    // 编辑
    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: ""
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.product-plan {
  .btn-pager {
    display: flex;
    .page {
      margin-left: auto;
    }
  }
}
</style>

 src/views/sales/quotation/index.vue

New file
@@ -0,0 +1,178 @@
<template>
  <div class="quotation">
    <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"
      />
      <PagerView class="page" />
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
      <template slot="tableButton">
        <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" />
  </div>
</template>

<script>
import SearchCommonView from "@/components/makepager/SearchCommonView"
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"

export default {
  name: "QuotationView",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddSalesLeadDialog
  },
  computed: {
    searchCommonHeight() {
      return this.$refs.searchCommonView.offsetHeight
    }
  },
  data() {
    return {
      tableList: {},
      queryClassOptions: [
        { value: "1", label: "全部" },
        { value: "2", label: "广告宣传" },
        { value: "3", label: "跟进中" },
        { value: "4", label: "失败关闭" }
      ],
      searchOptions: [],
      operatesList: [
        { id: "1", name: "共享" },
        { id: "2", name: "批量编辑" },
        { id: "3", name: "导出" },
        { id: "4", name: "下载全部附件" },
        { id: "5", name: "更改创建人" },
        { id: "6", name: "树结构设置" },
        { id: "7", name: "审批设置" },
        { id: "8", name: "公海参数设置" }
      ],
      editSalesLeadConfig: {
        visible: false,
        title: "新建",
        infomation: {}
      }
    }
  },
  created() {
    this.setTable()
  },
  methods: {
    setTable() {
      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"
          }
        ],
        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" } // 服务到期日
        ]
      }
      this.searchOptions = []
      for (let i = 0; i < this.tableList.tableColumn.length; i++) {
        const label = this.tableList.tableColumn[i].label
        this.searchOptions.push({ value: (i + 1).toString(), label: label })
      }
    },
    // 新建
    addBtnClick() {
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "新建"
      this.editSalesLeadConfig.infomation = {
        customName: "",
        saleLeadNumber: "LEA50",
        contactName: "",
        contactDuties: "",
        phoneNumber: "",
        businessStatus: "新建",
        businessSource: "1",
        owner: "",
        position: "",
        map: "",
        country: "1",
        province: "1",
        city: "1",
        region: "1",
        address: ""
      }
    },
    // 编辑
    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: ""
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.quotation {
  .btn-pager {
    display: flex;
    .page {
      margin-left: auto;
    }
  }
}
</style>

 src/views/sales/refundForm/index.vue

New file
@@ -0,0 +1,178 @@
<template>
  <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"
      />
      <PagerView class="page" />
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
      <template slot="tableButton">
        <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" />
  </div>
</template>

<script>
import SearchCommonView from "@/components/makepager/SearchCommonView"
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"

export default {
  name: "RefundForm",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddSalesLeadDialog
  },
  computed: {
    searchCommonHeight() {
      return this.$refs.searchCommonView.offsetHeight
    }
  },
  data() {
    return {
      tableList: {},
      queryClassOptions: [
        { value: "1", label: "全部" },
        { value: "2", label: "广告宣传" },
        { value: "3", label: "跟进中" },
        { value: "4", label: "失败关闭" }
      ],
      searchOptions: [],
      operatesList: [
        { id: "1", name: "共享" },
        { id: "2", name: "批量编辑" },
        { id: "3", name: "导出" },
        { id: "4", name: "下载全部附件" },
        { id: "5", name: "更改创建人" },
        { id: "6", name: "树结构设置" },
        { id: "7", name: "审批设置" },
        { id: "8", name: "公海参数设置" }
      ],
      editSalesLeadConfig: {
        visible: false,
        title: "新建",
        infomation: {}
      }
    }
  },
  created() {
    this.setTable()
  },
  methods: {
    setTable() {
      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"
          }
        ],
        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" } // 服务到期日
        ]
      }
      this.searchOptions = []
      for (let i = 0; i < this.tableList.tableColumn.length; i++) {
        const label = this.tableList.tableColumn[i].label
        this.searchOptions.push({ value: (i + 1).toString(), label: label })
      }
    },
    // 新建
    addBtnClick() {
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "新建"
      this.editSalesLeadConfig.infomation = {
        customName: "",
        saleLeadNumber: "LEA50",
        contactName: "",
        contactDuties: "",
        phoneNumber: "",
        businessStatus: "新建",
        businessSource: "1",
        owner: "",
        position: "",
        map: "",
        country: "1",
        province: "1",
        city: "1",
        region: "1",
        address: ""
      }
    },
    // 编辑
    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: ""
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.refund-form {
  .btn-pager {
    display: flex;
    .page {
      margin-left: auto;
    }
  }
}
</style>

 src/views/sales/salesDetails/index.vue

New file
@@ -0,0 +1,178 @@
<template>
  <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"
      />
      <PagerView class="page" />
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
      <template slot="tableButton">
        <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" />
  </div>
</template>

<script>
import SearchCommonView from "@/components/makepager/SearchCommonView"
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"

export default {
  name: "SalesDetails",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddSalesLeadDialog
  },
  computed: {
    searchCommonHeight() {
      return this.$refs.searchCommonView.offsetHeight
    }
  },
  data() {
    return {
      tableList: {},
      queryClassOptions: [
        { value: "1", label: "全部" },
        { value: "2", label: "广告宣传" },
        { value: "3", label: "跟进中" },
        { value: "4", label: "失败关闭" }
      ],
      searchOptions: [],
      operatesList: [
        { id: "1", name: "共享" },
        { id: "2", name: "批量编辑" },
        { id: "3", name: "导出" },
        { id: "4", name: "下载全部附件" },
        { id: "5", name: "更改创建人" },
        { id: "6", name: "树结构设置" },
        { id: "7", name: "审批设置" },
        { id: "8", name: "公海参数设置" }
      ],
      editSalesLeadConfig: {
        visible: false,
        title: "新建",
        infomation: {}
      }
    }
  },
  created() {
    this.setTable()
  },
  methods: {
    setTable() {
      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"
          }
        ],
        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" } // 服务到期日
        ]
      }
      this.searchOptions = []
      for (let i = 0; i < this.tableList.tableColumn.length; i++) {
        const label = this.tableList.tableColumn[i].label
        this.searchOptions.push({ value: (i + 1).toString(), label: label })
      }
    },
    // 新建
    addBtnClick() {
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "新建"
      this.editSalesLeadConfig.infomation = {
        customName: "",
        saleLeadNumber: "LEA50",
        contactName: "",
        contactDuties: "",
        phoneNumber: "",
        businessStatus: "新建",
        businessSource: "1",
        owner: "",
        position: "",
        map: "",
        country: "1",
        province: "1",
        city: "1",
        region: "1",
        address: ""
      }
    },
    // 编辑
    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: ""
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.sales-details {
  .btn-pager {
    display: flex;
    .page {
      margin-left: auto;
    }
  }
}
</style>

 src/views/sales/salesReturn/index.vue

New file
@@ -0,0 +1,178 @@
<template>
  <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"
      />
      <PagerView class="page" />
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
      <template slot="tableButton">
        <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" />
  </div>
</template>

<script>
import SearchCommonView from "@/components/makepager/SearchCommonView"
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"

export default {
  name: "SalesReturn",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddSalesLeadDialog
  },
  computed: {
    searchCommonHeight() {
      return this.$refs.searchCommonView.offsetHeight
    }
  },
  data() {
    return {
      tableList: {},
      queryClassOptions: [
        { value: "1", label: "全部" },
        { value: "2", label: "广告宣传" },
        { value: "3", label: "跟进中" },
        { value: "4", label: "失败关闭" }
      ],
      searchOptions: [],
      operatesList: [
        { id: "1", name: "共享" },
        { id: "2", name: "批量编辑" },
        { id: "3", name: "导出" },
        { id: "4", name: "下载全部附件" },
        { id: "5", name: "更改创建人" },
        { id: "6", name: "树结构设置" },
        { id: "7", name: "审批设置" },
        { id: "8", name: "公海参数设置" }
      ],
      editSalesLeadConfig: {
        visible: false,
        title: "新建",
        infomation: {}
      }
    }
  },
  created() {
    this.setTable()
  },
  methods: {
    setTable() {
      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"
          }
        ],
        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" } // 服务到期日
        ]
      }
      this.searchOptions = []
      for (let i = 0; i < this.tableList.tableColumn.length; i++) {
        const label = this.tableList.tableColumn[i].label
        this.searchOptions.push({ value: (i + 1).toString(), label: label })
      }
    },
    // 新建
    addBtnClick() {
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "新建"
      this.editSalesLeadConfig.infomation = {
        customName: "",
        saleLeadNumber: "LEA50",
        contactName: "",
        contactDuties: "",
        phoneNumber: "",
        businessStatus: "新建",
        businessSource: "1",
        owner: "",
        position: "",
        map: "",
        country: "1",
        province: "1",
        city: "1",
        region: "1",
        address: ""
      }
    },
    // 编辑
    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: ""
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.sales-return {
  .btn-pager {
    display: flex;
    .page {
      margin-left: auto;
    }
  }
}
</style>

 src/views/sales/subOrder/index.vue

New file
@@ -0,0 +1,178 @@
<template>
  <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"
      />
      <PagerView class="page" />
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
      <template slot="tableButton">
        <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" />
  </div>
</template>

<script>
import SearchCommonView from "@/components/makepager/SearchCommonView"
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"

export default {
  name: "SubOrder",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddSalesLeadDialog
  },
  computed: {
    searchCommonHeight() {
      return this.$refs.searchCommonView.offsetHeight
    }
  },
  data() {
    return {
      tableList: {},
      queryClassOptions: [
        { value: "1", label: "全部" },
        { value: "2", label: "广告宣传" },
        { value: "3", label: "跟进中" },
        { value: "4", label: "失败关闭" }
      ],
      searchOptions: [],
      operatesList: [
        { id: "1", name: "共享" },
        { id: "2", name: "批量编辑" },
        { id: "3", name: "导出" },
        { id: "4", name: "下载全部附件" },
        { id: "5", name: "更改创建人" },
        { id: "6", name: "树结构设置" },
        { id: "7", name: "审批设置" },
        { id: "8", name: "公海参数设置" }
      ],
      editSalesLeadConfig: {
        visible: false,
        title: "新建",
        infomation: {}
      }
    }
  },
  created() {
    this.setTable()
  },
  methods: {
    setTable() {
      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"
          }
        ],
        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" } // 服务到期日
        ]
      }
      this.searchOptions = []
      for (let i = 0; i < this.tableList.tableColumn.length; i++) {
        const label = this.tableList.tableColumn[i].label
        this.searchOptions.push({ value: (i + 1).toString(), label: label })
      }
    },
    // 新建
    addBtnClick() {
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "新建"
      this.editSalesLeadConfig.infomation = {
        customName: "",
        saleLeadNumber: "LEA50",
        contactName: "",
        contactDuties: "",
        phoneNumber: "",
        businessStatus: "新建",
        businessSource: "1",
        owner: "",
        position: "",
        map: "",
        country: "1",
        province: "1",
        city: "1",
        region: "1",
        address: ""
      }
    },
    // 编辑
    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: ""
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.sub-order {
  .btn-pager {
    display: flex;
    .page {
      margin-left: auto;
    }
  }
}
</style>

 src/views/service/orderManage/AddOrderManageDialog.vue

New file
@@ -0,0 +1,290 @@
<template>
  <div class="order-manage">
    <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="orderName">
                  <el-input v-model="editConfig.infomation.orderName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工单类型" prop="orderType">
                  <CommonSelectView
                    :common-value="editConfig.infomation.orderType"
                    :common-options="orderTypeOptions"
                  />
                </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="repairSource">
                  <CommonSelectView
                    :common-value="editConfig.infomation.repairSource"
                    :common-options="repairSourceOptions"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="选择源单" prop="selSourceOrder">
                  <el-select v-model="editConfig.infomation.selSourceOrder" size="mini">
                    <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-row>
          </div>
          <!-- 问题描述 -->
          <div class="basic-info-title">问题描述</div>
          <div class="basic-info-view">
            <el-row>
              <el-col :span="24">
                <el-form-item label="问题描述" prop="problemDesc">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    placeholder="请输入内容"
                    v-model="editConfig.infomation.problemDesc"
                  ></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">选择审批流程</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"
export default {
  name: "AddOrderManageDialog",
  props: {
    editCommonConfig: {
      type: Object,
      default: () => {
        return {
          visible: false,
          title: "新建",
          infomation: {
            customName: "",
            orderNumber: "AC6521",
            orderName: "",
            orderType: "",
            contactName: "",
            repairSource: "",
            selSourceOrder: "",
            problemDesc: "",
            approvalWorkflow: "",
            approvalSteps: "",
            approvalPerson: "",
            approvalOpinion: ""
          }
        }
      }
    }
  },
  components: { CommonSelectView },
  computed: {
    searchCommonHeight() {
      return this.$refs.searchCommonView.offsetHeight
    }
  },
  data() {
    return {
      dialogWidth: "80%",
      editConfig: this.editCommonConfig,
      rules: {
        customName: [{ required: true, message: "请输入客户名称", trigger: "blur" }],
        orderNumber: [{ required: true, message: "请输入工单编号", trigger: "blur" }],
        orderType: [{ required: true, message: "请选择", trigger: "change" }],
        problemDesc: [{ required: true, message: "请输入问题描述", trigger: "blur" }]
      },
      orderTypeOptions: [], // 工单类型
      repairSourceOptions: [], // 报修来源
      selSourceOrderOptions: [
        { value: "1", label: "销售明细单" },
        { value: "2", label: "服务合同" }
      ],
      approvalWorkflowOptions: [] // 审批流程
    }
  },
  created() {},
  methods: {
    handleClose() {
      this.editConfig.visible = false
    },
    // 添加附件
    addAnnexClick() {},
    // 设置允许上传文件格式
    setFormatClick() {}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.order-manage {
  .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;
        }
      }
    }
    .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;
  }
}
</style>

 src/views/service/orderManage/index.vue

@@ -1,5 +1,14 @@
<template>
  <div class="sales-lead">
    <div class="tab-view">
      <el-tabs v-model="activeName" @tab-click="tabsClick">
        <el-tab-pane label="全部" name="first"></el-tab-pane>
        <el-tab-pane label="待分配" name="second"></el-tab-pane>
        <el-tab-pane label="已催单" name="third"></el-tab-pane>
        <el-tab-pane label="处理中" name="fourth"></el-tab-pane>
        <el-tab-pane label="已结单" name="aaa"></el-tab-pane>
      </el-tabs>
    </div>
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <div class="btn-pager">
      <PublicFunctionBtnView :receive="true" :submit-approval="true" :operates-list="operatesList" />
@@ -14,8 +23,8 @@
        </el-table-column>
      </template>
    </TableCommonView>
    <!-- 新建/编辑销售线索 -->
    <AddSalesLeadDialog v-if="editSalesLeadConfig.visible" :edit-sales-lead-config="editSalesLeadConfig" />
    <!-- 新建/编辑 -->
    <AddOrderManageDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
  </div>
</template>

@@ -24,7 +33,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 AddOrderManageDialog from "@/views/service/orderManage/AddOrderManageDialog"

export default {
  name: "SalesLead",
@@ -34,7 +43,7 @@
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddSalesLeadDialog
    AddOrderManageDialog
  },
  computed: {
    searchCommonHeight() {
@@ -43,8 +52,15 @@
  },
  data() {
    return {
      activeName: "first",
      tableList: {},
      queryClassOptions: [{ value: "1", label: "全部" }],
      queryClassOptions: [
        { value: "1", label: "全部" },
        { value: "2", label: "小程序报修" },
        { value: "3", label: "面访报修" },
        { value: "4", label: "今日内创建" },
        { value: "5", label: "三天内创建" }
      ],
      searchOptions: [],
      operatesList: [
        { id: "1", name: "共享" },
@@ -56,7 +72,7 @@
        { id: "7", name: "审批设置" },
        { id: "8", name: "恢复预设列宽" }
      ],
      editSalesLeadConfig: {
      editConfig: {
        visible: false,
        title: "新建",
        infomation: {}
@@ -96,49 +112,46 @@
        this.searchOptions.push({ value: (i + 1).toString(), label: label })
      }
    },
    // tab切换
    tabsClick(tab, event) {
      console.log(tab, event)
    },
    // 新建
    addBtnClick() {
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "新建"
      this.editSalesLeadConfig.infomation = {
      this.editConfig.visible = true
      this.editConfig.title = "新建"
      this.editConfig.infomation = {
        customName: "",
        saleLeadNumber: "LEA50",
        orderNumber: "CS21",
        orderName: "",
        orderType: "",
        contactName: "",
        contactDuties: "",
        phoneNumber: "",
        businessStatus: "新建",
        businessSource: "1",
        owner: "",
        position: "",
        map: "",
        country: "1",
        province: "1",
        city: "1",
        region: "1",
        address: ""
        repairSource: "",
        selSourceOrder: "",
        problemDesc: "",
        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,
      this.editConfig.visible = true
      this.editConfig.title = "编辑"
      this.editConfig.infomation = {
        orderNumber: row.orderNumber,
        orderName: row.orderName,
        orderType: row.orderType,
        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: ""
        repairSource: row.repairSource,
        selSourceOrder: row.selSourceOrder,
        problemDesc: row.problemDesc,
        approvalWorkflow: "",
        approvalSteps: "",
        approvalPerson: "",
        approvalOpinion: ""
      }
    }
  }
@@ -155,4 +168,13 @@
    }
  }
}
::v-deep {
  .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
    padding-left: 25px;
  }
  .el-tabs__item {
    padding: 0 25px;
    height: 45px;
  }
}
</style>

 src/views/service/serviceContract/AddServiceContractDialog.vue

@@ -1,7 +1,7 @@
<template>
  <div class="service-contract">
    <el-dialog
      :title="editCommonConfig.title + '客户管理'"
      :title="editCommonConfig.title + '服务合同'"
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
@@ -183,50 +183,9 @@
              </el-select>
            </div>
          </div>
          <div class="basic-info-view">
            <el-form ref="form" :model="productTableList" :show-message="false" label-position="right">
              <el-table :data="productTableList.tableData" style="width: 100%">
                <el-table-column prop="id" label="#" width="30"></el-table-column>
                <el-table-column prop="productName" label="产品名称">
                  <template slot-scope="scope">
                    <el-form-item
                      label=" "
                      :prop="'productTableList.tableData.' + scope.$index + '.productName'"
                      :rules="[{ required: true, message: '输入不能为空' }]"
                    >
                      <el-input
                        v-model.trim="scope.row.productName"
                        maxlength="50"
                        size="mini"
                        style="width: 60px"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column prop="productNumber" label="产品编号"></el-table-column>
                <el-table-column prop="startDate" label="服务开始日">
                  <el-form-item
                    label=" "
                    prop="'productTableList.tableData.' + scope.$index + '.startDate'"
                    :rules="[{ required: true, message: '输入不能为空' }]"
                  >
                    <el-date-picker v-model="scope.row.startDate" type="date" placeholder="选择日期"> </el-date-picker>
                  </el-form-item>
                </el-table-column>
                <el-table-column prop="address" label="服务到期日"> </el-table-column>
                <el-table-column prop="productNumber" label="数量"></el-table-column>
                <el-table-column prop="name" label="含税单价"> </el-table-column>
                <el-table-column prop="address" label="不含税单价"> </el-table-column>
                <el-table-column prop="productNumber" label="折扣率(%)"></el-table-column>
                <el-table-column prop="name" label="折扣额"> </el-table-column>
                <el-table-column prop="address" label="税(销售)"> </el-table-column>
                <el-table-column prop="productNumber" label="实际含税单价"></el-table-column>
                <el-table-column prop="name" label="价税合计"> </el-table-column>
                <el-table-column prop="address" label="描述"> </el-table-column>
              </el-table>
            </el-form>
          <div class="product-view">
            <CommonFormTableView :product-table-list="productTableList" />
          </div>

          <!-- 选择审批流程 -->
          <div class="basic-info-title">选择审批流程</div>
          <div class="basic-info-view">
@@ -254,6 +213,7 @@
                  <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>
@@ -280,6 +240,7 @@

<script>
import CommonSelectView from "@/components/makepager/CommonSelectView"
import CommonFormTableView from "@/components/makepager/CommonFormTableView"
export default {
  name: "AddServiceContractDialog",
  props: {
@@ -314,7 +275,7 @@
      }
    }
  },
  components: { CommonSelectView },
  components: { CommonSelectView, CommonFormTableView },
  computed: {
    searchCommonHeight() {
      return this.$refs.searchCommonView.offsetHeight
@@ -330,16 +291,6 @@
        owner: [{ 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: "公司电话" }
      ],
      ownerOptions: [
        // 负责人
        { value: "1", label: "BOSS" },
@@ -363,9 +314,11 @@
          {
            id: "1",
            productNumber: "123",
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄"
            productName: "",
            startDate: "",
            endDate: "2016-05-02",
            number: "",
            address: ""
          }
        ]
      }
@@ -452,5 +405,10 @@
    box-sizing: border-box;
    border-top: 1px solid #dadee5;
  }
  .product-view {
    .el-form-item__label {
      padding: 0;
    }
  }
}
</style>

 src/views/service/serviceContract/index.vue

@@ -1,5 +1,5 @@
<template>
  <div class="sales-lead">
  <div class="service-contract">
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <div class="btn-pager">
      <PublicFunctionBtnView :submit-approval="true" :operates-list="operatesList" />
@@ -14,7 +14,7 @@
        </el-table-column>
      </template>
    </TableCommonView>
    <!-- 新建/编辑销售线索 -->
    <!-- 新建/编辑 -->
    <AddServiceContractDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
  </div>
</template>
@@ -27,7 +27,7 @@
import AddServiceContractDialog from "@/views/service/serviceContract/AddServiceContractDialog"

export default {
  name: "SalesLead",
  name: "ServiceContract",
  props: {},
  components: {
    SearchCommonView,
@@ -125,37 +125,13 @@
        signDate: "",
        startDate: "",
        endDate: "",

        customType: "",
        customSource: "",
        importantLevel: "",
        serviceAgent: "",
        nextFollowupDate: "",
        latestServiceDate: "",

        customStatus: "",
        phoneNumber: "",
        duties: "",
        wechat: "1",
        contactsEmail: "",
        industry: "",
        legalPerson: "",
        registerTime: "",
        registerCapital: "",
        companyNature: "",
        customerSize: "",
        operateRange: "",
        position: "",
        map: "",
        country: "1",
        province: "1",
        city: "1",
        region: "1",
        contractStatus: "",
        serviceNumber: "",
        termsTreaty: "",
        notes: "",
        approvalWorkflow: "",
        approvalSteps: "",
        approvalPerson: "",
        approvalUrgent: "",
        approvalOpinion: ""
      }
    },
@@ -165,21 +141,25 @@
      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: ""
        customName: "",
        serviceContractNumber: "AC6521",
        owner: "5",
        contactName: "",
        salesOpportunity: "",
        contractOrder: "",
        quotation: "",
        contractType: "",
        signDate: "",
        startDate: "",
        endDate: "",
        contractStatus: "",
        serviceNumber: "",
        termsTreaty: "",
        notes: "",
        approvalWorkflow: "",
        approvalSteps: "",
        approvalPerson: "",
        approvalOpinion: ""
      }
    }
  }
@@ -188,7 +168,7 @@

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.sales-lead {
.service-contract {
  .btn-pager {
    display: flex;
    .page {

 src/views/service/serviceFeeManage/AddServiceFeeManageDialog.vue

New file
@@ -0,0 +1,462 @@
<template>
  <div class="service-fee-manage">
    <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="isUnflod ? { height: '60vh', 'overflow-x': 'hidden' } : ''"
      >
        <!-- 信息 -->
        <div class="basic-info">
          <!-- 基本信息 -->
          <div v-if="isUnflod" 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-house" title="工商查询"></i></div>
                    <div class="common-select-btn"><i class="el-icon-search" title="查重"></i></div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="服务收费人" prop="serviceCharger">
                  <el-select
                    v-model="editConfig.infomation.serviceCharger"
                    placeholder="请选择"
                    size="mini"
                    style="width: 63%"
                  >
                    <el-option
                      v-for="item in serviceCharger"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-if="isUnflod" :span="12">
                <el-form-item label="客户编号" prop="customNumber">
                  <el-input v-model="editConfig.infomation.customNumber"></el-input>
                </el-form-item>
              </el-col>
              <el-col v-if="isUnflod" :span="12">
                <el-form-item label="客户规模" prop="customerSize">
                  <CommonSelectView
                    :common-value="editConfig.infomation.customerSize"
                    :common-options="customerSizeOptions"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="客户状态" prop="customStatus">
                  <CommonSelectView
                    :common-value="editConfig.infomation.customStatus"
                    :common-options="customStatusOptions"
                  />
                </el-form-item>
              </el-col>
              <el-col v-if="isUnflod" :span="12">
                <el-form-item label="重要级别" prop="importantLevel">
                  <CommonSelectView
                    :common-value="editConfig.infomation.importantLevel"
                    :common-options="importantLevelOptions"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="客户来源" prop="customSource">
                  <CommonSelectView
                    :common-value="editConfig.infomation.customSource"
                    :common-options="customSourceOptions"
                  />
                </el-form-item>
              </el-col>
              <el-col v-if="isUnflod" :span="12">
                <el-form-item label="客户类型" prop="customType">
                  <CommonSelectView
                    :common-value="editConfig.infomation.customType"
                    :common-options="customTypeOptions"
                  />
                </el-form-item>
              </el-col>
              <el-col v-if="isUnflod" :span="12">
                <el-form-item label="服务代表" prop="serviceAgent">
                  <el-select
                    v-model="editConfig.infomation.serviceAgent"
                    placeholder="请选择"
                    size="mini"
                    style="width: 63%"
                  >
                    <el-option
                      v-for="item in serviceAgentOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 动态信息 -->
          <div v-if="isUnflod" class="basic-info-title">动态信息</div>
          <div class="basic-info-view">
            <el-row>
              <el-col :span="12">
                <el-form-item label="最晚服务到期日" prop="latestServiceDate">
                  <el-date-picker v-model="editConfig.infomation.latestServiceDate" type="date" placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 客户首要联系人 -->
          <div v-if="isUnflod" class="basic-info-title">客户首要联系人</div>
          <div class="basic-info-view">
            <el-row>
              <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="duties">
                  <el-input v-model="editConfig.infomation.duties"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系人手机" prop="phoneNumber">
                  <el-input v-model="editConfig.infomation.phoneNumber"></el-input>
                </el-form-item>
              </el-col>
              <el-col v-if="isUnflod" :span="12">
                <el-form-item label="联系人Email" prop="contactsEmail">
                  <el-input v-model="editConfig.infomation.contactsEmail"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 地址信息 -->
          <div v-if="isUnflod" class="basic-info-title">地址信息</div>
          <div class="address-view">
            <el-row>
              <el-col v-if="isUnflod" :span="24">
                <el-form-item label="定位" prop="position">
                  <el-input
                    v-model="editConfig.infomation.position"
                    placeholder="定位地址中必须包含省份和城市,请输入准确的地址!"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col v-if="isUnflod" :span="24">
                <el-form-item label="地图" prop="map">
                  <div style="height: 100px"></div>
                </el-form-item>
              </el-col>
              <el-col v-if="isUnflod" :span="12">
                <el-form-item label="国家" prop="country">
                  <CommonSelectView :common-value="editConfig.infomation.country" :common-options="countryOptions" />
                </el-form-item>
              </el-col>
              <el-col v-if="isUnflod" :span="12">
                <el-form-item label="省份" prop="province">
                  <CommonSelectView :common-value="editConfig.infomation.province" :common-options="provinceOptions" />
                </el-form-item>
              </el-col>
              <el-col v-if="isUnflod" :span="12">
                <el-form-item label="城市" prop="city">
                  <CommonSelectView :common-value="editConfig.infomation.city" :common-options="cityOptions" />
                </el-form-item>
              </el-col>
              <el-col v-if="isUnflod" :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="24">
                <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 v-if="isUnflod" class="basic-info-title">工商信息</div>
          <div v-if="isUnflod" class="address-view">
            <el-row>
              <el-col :span="12">
                <el-form-item label="所属行业" prop="industry">
                  <CommonSelectView :common-value="editConfig.infomation.industry" :common-options="industryOptions" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="公司性质" prop="companyNature">
                  <CommonSelectView
                    :common-value="editConfig.infomation.companyNature"
                    :common-options="companyNatureOptions"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="公司网址" prop="companyWeb">
                  <el-input v-model="editConfig.infomation.companyWeb"></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="24">
                <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 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 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: "AddServiceFeeManageDialog",
  props: {
    editCommonConfig: {
      type: Object,
      default: () => {
        return {
          visible: false,
          title: "新建",
          infomation: {
            customName: "",
            serviceCharger: "",
            customNumber: "",
            customerSize: "",
            customStatus: "",
            importantLevel: "",
            customType: "",
            customSource: "",
            serviceAgent: "",
            latestServiceDate: "",
            contactName: "",
            duties: "",
            phoneNumber: "",
            contactsEmail: "",
            operateRange: "",
            position: "",
            map: "",
            country: "1",
            province: "1",
            city: "1",
            region: "1",
            address: "",
            industry: "",
            companyNature: "",
            companyWeb: "",
            notes: ""
          }
        }
      }
    }
  },
  components: { CommonSelectView },
  computed: {},
  data() {
    return {
      dialogWidth: "80%",
      editConfig: this.editCommonConfig,
      rules: {
        customName: [{ required: true, message: "请输入客户名称", trigger: "blur" }],
        serviceCharger: [{ required: true, message: "请选择", trigger: "change" }],
        customStatus: [{ required: true, message: "请选择", trigger: "change" }]
      },
      serviceChargerOptions: [
        // 服务收费人
        { value: "1", label: "BOSS" },
        { value: "2", label: "Mia" },
        { value: "3", label: "财务" },
        { value: "4", label: "市场" },
        { value: "5", label: "系统管理员" },
        { value: "6", label: "销售" },
        { value: "7", label: "销售总监" }
      ],
      customerSizeOptions: [], // 客户规模
      customStatusOptions: [], // 客户状态
      importantLevelOptions: [], // 重要级别
      customSourceOptions: [], // 客户来源
      customTypeOptions: [], // 客户类型
      serviceAgentOptions: [], // 服务代表

      industryOptions: [], // 所属行业
      companyNatureOptions: [], // 公司性质

      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: "西城区" }
      ], // 区域
      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>
.service-fee-manage {
  .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/service/serviceFeeManage/index.vue

@@ -1,5 +1,5 @@
<template>
  <div class="sales-lead">
  <div class="service-fee-manage">
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <div class="btn-pager">
      <PublicFunctionBtnView
@@ -21,8 +21,8 @@
        </el-table-column>
      </template>
    </TableCommonView>
    <!-- 新建/编辑销售线索 -->
    <AddSalesLeadDialog v-if="editSalesLeadConfig.visible" :edit-sales-lead-config="editSalesLeadConfig" />
    <!-- 新建/编辑服务收费管理 -->
    <AddServiceFeeManageDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
  </div>
</template>

@@ -31,17 +31,17 @@
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 AddServiceFeeManageDialog from "@/views/service/serviceFeeManage/AddServiceFeeManageDialog"

export default {
  name: "SalesLead",
  name: "ServiceFeeManage",
  props: {},
  components: {
    SearchCommonView,
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddSalesLeadDialog
    AddServiceFeeManageDialog
  },
  computed: {
    searchCommonHeight() {
@@ -53,9 +53,12 @@
      tableList: {},
      queryClassOptions: [
        { value: "1", label: "全部" },
        { value: "2", label: "广告宣传" },
        { value: "3", label: "跟进中" },
        { value: "4", label: "失败关闭" }
        { value: "2", label: "过期未满60天" },
        { value: "3", label: "过期未满30天" },
        { value: "4", label: "即将到期60天" },
        { value: "5", label: "即将到期30天" },
        { value: "6", label: "已过期" },
        { value: "7", label: "无服务" }
      ],
      searchOptions: [],
      operatesList: [
@@ -66,9 +69,9 @@
        { id: "5", name: "更改创建人" },
        { id: "6", name: "树结构设置" },
        { id: "7", name: "审批设置" },
        { id: "8", name: "公海参数设置" }
        { id: "8", name: "恢复预设列宽" }
      ],
      editSalesLeadConfig: {
      editConfig: {
        visible: false,
        title: "新建",
        infomation: {}
@@ -118,47 +121,69 @@
    },
    // 新建
    addBtnClick() {
      this.editSalesLeadConfig.visible = true
      this.editSalesLeadConfig.title = "新建"
      this.editSalesLeadConfig.infomation = {
      this.editConfig.visible = true
      this.editConfig.title = "新建"
      this.editConfig.infomation = {
        customName: "",
        saleLeadNumber: "LEA50",
        serviceCharger: "",
        customNumber: "",
        customerSize: "",
        customStatus: "",
        importantLevel: "",
        customType: "",
        customSource: "",
        serviceAgent: "",
        latestServiceDate: "",
        contactName: "",
        contactDuties: "",
        duties: "",
        phoneNumber: "",
        businessStatus: "新建",
        businessSource: "1",
        owner: "",
        contactsEmail: "",
        operateRange: "",
        position: "",
        map: "",
        country: "1",
        province: "1",
        city: "1",
        region: "1",
        address: ""
        address: "",
        industry: "",
        companyNature: "",
        companyWeb: "",
        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: "",
        serviceCharger: "",
        customNumber: "",
        customerSize: "",
        customStatus: "",
        importantLevel: "",
        customType: "",
        customSource: "",
        serviceAgent: "",
        latestServiceDate: "",
        contactName: "",
        duties: "",
        phoneNumber: "",
        contactsEmail: "",
        operateRange: "",
        position: "",
        map: "",
        country: "1",
        province: "1",
        city: "1",
        region: "1",
        address: ""
        address: "",
        industry: "",
        companyNature: "",
        companyWeb: "",
        notes: ""
      }
    }
  }
@@ -167,7 +192,7 @@

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.sales-lead {
.service-fee-manage {
  .btn-pager {
    display: flex;
    .page {

 src/views/service/serviceFollowup/AddServiceFollowupDialog.vue

New file
@@ -0,0 +1,288 @@
<template>
  <div class="service-followup">
    <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="followupNumber">
                  <el-input v-model="editConfig.infomation.followupNumber"></el-input>
                </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="customServiceForm">
                  <div class="custom-name">
                    <el-input v-model="editConfig.infomation.customServiceForm"></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="visitor">
                  <el-select v-model="editConfig.infomation.visitor" size="mini">
                    <el-option v-for="item in visitorOptions" :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="projectPlan">
                  <div class="custom-name">
                    <el-input v-model="editConfig.infomation.projectPlan"></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="satisfaction">
                  <CommonSelectView
                    :common-value="editConfig.infomation.satisfaction"
                    :common-options="satisfactionOptions"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="及时率" prop="timelyRate">
                  <CommonSelectView
                    :common-value="editConfig.infomation.timelyRate"
                    :common-options="satisfactionOptions"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="解决率" prop="resolveRate">
                  <CommonSelectView
                    :common-value="editConfig.infomation.resolveRate"
                    :common-options="satisfactionOptions"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="原服务人员" prop="originServicePerson">
                  <el-select v-model="editConfig.infomation.originServicePerson" size="mini">
                    <el-option v-for="item in visitorOptions" :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="haveBeen">
                  <CommonSelectView :common-value="editConfig.infomation.haveBeen" :common-options="haveBeenOptions" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 备注 -->
          <div class="basic-info-title">备注</div>
          <div class="basic-info-view">
            <el-row>
              <el-col :span="24">
                <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 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: "AddServiceFollowupDialog",
  props: {
    editCommonConfig: {
      type: Object,
      default: () => {
        return {
          visible: false,
          title: "新建",
          infomation: {
            customName: "",
            followupNumber: "HF21",
            contactName: "",
            customServiceForm: "",
            visitor: "",
            projectPlan: "",
            satisfaction: "",
            timelyRate: "",
            resolveRate: "",
            originServicePerson: "",
            haveBeen: "",
            notes: ""
          }
        }
      }
    }
  },
  components: { CommonSelectView },
  computed: {
    searchCommonHeight() {
      return this.$refs.searchCommonView.offsetHeight
    }
  },
  data() {
    return {
      dialogWidth: "80%",
      editConfig: this.editCommonConfig,
      rules: {
        followupNumber: [{ required: true, message: "请输入回访单单编号", trigger: "blur" }],
        visitor: [{ required: true, message: "请选择", trigger: "change" }]
      },
      satisfactionOptions: [], // 满意度 及时率 解决率
      haveBeenOptions: [], // 服务人员是否来过
      visitorOptions: [
        // 回访人
        { value: "1", label: "系统管理员" },
        { value: "2", 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>
.service-followup {
  .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/service/serviceFollowup/index.vue

@@ -14,8 +14,8 @@
        </el-table-column>
      </template>
    </TableCommonView>
    <!-- 新建/编辑销售线索 -->
    <AddSalesLeadDialog v-if="editSalesLeadConfig.visible" :edit-sales-lead-config="editSalesLeadConfig" />
    <!-- 新建/编辑 -->
    <AddServiceFollowupDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
  </div>
</template>

@@ -24,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 AddServiceFollowupDialog from "@/views/service/serviceFollowup/AddServiceFollowupDialog"

export default {
  name: "SalesLead",
@@ -34,7 +34,7 @@
    PublicFunctionBtnView,
    PagerView,
    TableCommonView,
    AddSalesLeadDialog
    AddServiceFollowupDialog
  },
  computed: {
    searchCommonHeight() {
@@ -56,7 +56,7 @@
        { id: "7", name: "审批设置" },
        { id: "8", name: "恢复预设列宽" }
      ],
      editSalesLeadConfig: {
      editConfig: {
        visible: false,
        title: "新建",
        infomation: {}
@@ -98,47 +98,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",
        followupNumber: "HF21",
        contactName: "",
        contactDuties: "",
        phoneNumber: "",
        businessStatus: "新建",
        businessSource: "1",
        owner: "",
        position: "",
        map: "",
        country: "1",
        province: "1",
        city: "1",
        region: "1",
        address: ""
        customServiceForm: "",
        visitor: "",
        projectPlan: "",
        satisfaction: "",
        timelyRate: "",
        resolveRate: "",
        originServicePerson: "",
        haveBeen: "",
        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,
        position: "",
        map: "",
        country: "1",
        province: "1",
        city: "1",
        region: "1",
        address: ""
      this.editConfig.visible = true
      this.editConfig.title = "编辑"
      this.editConfig.infomation = {
        customName: "",
        followupNumber: "HF21",
        contactName: "",
        customServiceForm: "",
        visitor: "",
        projectPlan: "",
        satisfaction: "",
        timelyRate: "",
        resolveRate: "",
        originServicePerson: "",
        haveBeen: "",
        notes: ""
      }
    }
  }