feature: 选择客户、联系人、经销商、产品、项目组件

src/api/customer/index.js

@@ -27,7 +27,7 @@ export default {
   },
   // 客户联系人详情
   getContact(query) {
-    return micro_request.postRequest(basePath, 'Contant', 'GetEntityById', query)
+    return micro_request.postRequest(basePath, 'Contact', 'GetList', query)
   },
   // 客户动态
   dynamicsList(query) {
@@ -39,11 +39,11 @@ export default {
   },
   // 编辑联系人
   updateContact(query) {
-    return micro_request.postRequest(basePath, 'Contant', 'UpdateById', query)
+    return micro_request.postRequest(basePath, 'Contact', 'UpdateById', query)
   },
   // 删除联系人
   deleteContact(query) {
-    return micro_request.postRequest(basePath, 'Contant', 'DeleteById', query)
+    return micro_request.postRequest(basePath, 'Contact', 'DeleteById', query)
   },
   // 公海列表
   getList(query) {
@@ -83,6 +83,6 @@ export default {
   },
   // 新建联系人
   createContact(query) {
-    return micro_request.postRequest(basePath, 'Contant', 'Create', query)
+    return micro_request.postRequest(basePath, 'Contact', 'Create', query)
   },
 }

src/components/select/SelectBusiness.vue

@@ -0,0 +1,212 @@
+<template>
+  <el-dialog append-to-body :title="title" :visible.sync="innerVisible">
+    <el-row>
+      <el-col :span="24">
+        <div style="float: right">
+          <el-button size="mini" type="primary" @click="handleAdd">新建项目</el-button>
+          <el-dropdown style="margin-left: 10px" trigger="click">
+            <el-button icon="el-icon-more" size="mini" />
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item icon="el-icon-upload2">导入</el-dropdown-item>
+              <el-dropdown-item icon="el-icon-download">导出</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24">
+        <el-input
+          v-model="queryForm.nboName"
+          clearable
+          placeholder="项目名称"
+          style="width: 30%; margin-right: 10px"
+          suffix-icon="el-icon-search" />
+        <!--        <span>显示：</span>-->
+        <!--        <el-radio-group v-model="queryForm.type">-->
+        <!--          <el-radio-button label="全部客户" />-->
+        <!--          <el-radio-button label="我负责的客户" />-->
+        <!--        </el-radio-group>-->
+        <table-tool :check-list.sync="checkList" :columns="columns" style="float: right" />
+      </el-col>
+    </el-row>
+    <el-table ref="table" v-loading="listLoading" :data="list" @selection-change="setSelectRows">
+      <el-table-column align="center" type="selection" />
+      <el-table-column
+        v-for="(item, index) in finallyColumns"
+        :key="index"
+        align="center"
+        :label="item.label"
+        :prop="item.prop"
+        show-overflow-tooltip
+        :sortable="item.sortable"
+        :width="item.width">
+        <template #default="{ row }">
+          <span v-if="item.prop === 'custStatus'">
+            {{ row.custStatus == 10 ? '正常' : '异常' }}
+          </span>
+          <span v-else>{{ row[item.prop] }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      background
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange" />
+    <span slot="footer">
+      <el-button size="mini" type="primary" @click="save">保存</el-button>
+      <el-button size="mini" @click="innerVisible = false">取消</el-button>
+    </span>
+    <!-- 新建项目弹窗 -->
+    <business-edit ref="businessEdit" />
+  </el-dialog>
+</template>
+
+<script>
+  import businessApi from '@/api/proj/business'
+  import TableTool from '@/components/table/TableTool'
+  import BusinessEdit from '@/views/proj/business/components/BusinessEdit'
+
+  export default {
+    name: 'SelectBusiness',
+    components: {
+      TableTool,
+      BusinessEdit,
+    },
+    props: {
+      title: {
+        type: String,
+        default: '选择',
+      },
+      multiple: Boolean,
+      queryParams: {
+        type: Object,
+        default() {
+          return {}
+        },
+      },
+    },
+    data() {
+      return {
+        innerVisible: false,
+        queryForm: {
+          nboName: '',
+          type: '全部客户',
+          pageNum: 1,
+          pageSize: 10,
+        },
+        checkList: [],
+        columns: [
+          {
+            label: '商机标题',
+            width: 'auto',
+            prop: 'nboName',
+            sortable: true,
+            disableCheck: true,
+          },
+          {
+            label: '关联客户',
+            width: 'auto',
+            prop: 'custName',
+          },
+          {
+            label: '审批状态',
+            width: 'auto',
+            prop: 'approStatus',
+          },
+          {
+            label: '商机状态',
+            width: 'auto',
+            prop: 'nboPhase',
+          },
+          {
+            label: '商机类别',
+            width: 'auto',
+            prop: 'nboType',
+          },
+          {
+            label: '商机金额',
+            width: 'auto',
+            prop: 'nboBudget',
+          },
+          {
+            label: '最后跟进时间',
+            width: 'auto',
+            prop: 'finalFollowTime',
+          },
+          {
+            label: '下次跟进时间',
+            width: 'auto',
+            prop: 'nextFollowTime',
+          },
+        ],
+        list: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        selectRows: [],
+      }
+    },
+    computed: {
+      finallyColumns() {
+        return this.columns.filter((item) => this.checkList.includes(item.label))
+      },
+    },
+    mounted() {
+      this.fetchData()
+    },
+    methods: {
+      open() {
+        this.innerVisible = true
+      },
+      save() {
+        this.innerVisible = false
+        this.$emit('save', this.selectRows)
+      },
+      handleAdd() {
+        this.$refs.businessEdit.showEdit()
+      },
+      async fetchData() {
+        this.listLoading = true
+        let query = Object.assign(this.queryForm, this.queryParams)
+        const {
+          data: { list, total },
+        } = await businessApi.getList(query)
+        this.list = list
+        this.total = total
+        this.listLoading = false
+      },
+      setSelectRows(val) {
+        if (!this.multiple && val.length === this.list.length) {
+          // 返回单条数据情况下-控制全选情况下单选第一条数据
+          if (this.selectRows.length === 1) {
+            this.$refs.table.clearSelection()
+            return
+          }
+          this.$refs.table.clearSelection()
+          this.$refs.table.toggleRowSelection(val.shift(), true)
+        } else if (!this.multiple && val.length > 1) {
+          // 返回单条数据情况下-控制选择当前点击数据
+          this.$refs.table.clearSelection()
+          this.$refs.table.toggleRowSelection(val.pop(), true)
+        } else {
+          this.selectRows = val
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+    },
+  }
+</script>
+
+<style scoped></style>

src/components/select/SelectContact.vue

@@ -0,0 +1,215 @@
+<template>
+  <el-dialog append-to-body :title="title" :visible.sync="innerVisible">
+    <el-row>
+      <el-col :span="24">
+        <div style="float: right">
+          <el-button size="mini" type="primary" @click="handleAdd">新建联系人</el-button>
+          <el-dropdown style="margin-left: 10px" trigger="click">
+            <el-button icon="el-icon-more" size="mini" />
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item icon="el-icon-upload2">导入</el-dropdown-item>
+              <el-dropdown-item icon="el-icon-download">导出</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24">
+        <el-input
+          v-model="queryForm.keyword"
+          clearable
+          placeholder="客户名称/手机/电话"
+          style="width: 30%; margin-right: 10px"
+          suffix-icon="el-icon-search" />
+        <!--        <span>显示：</span>-->
+        <!--        <el-radio-group v-model="queryForm.type">-->
+        <!--          <el-radio-button label="全部客户" />-->
+        <!--          <el-radio-button label="我负责的客户" />-->
+        <!--        </el-radio-group>-->
+        <table-tool :check-list.sync="checkList" :columns="columns" style="float: right" />
+      </el-col>
+    </el-row>
+    <el-table ref="table" v-loading="listLoading" :data="list" @selection-change="setSelectRows">
+      <el-table-column align="center" type="selection" />
+      <el-table-column
+        v-for="(item, index) in finallyColumns"
+        :key="index"
+        align="center"
+        :label="item.label"
+        :prop="item.prop"
+        show-overflow-tooltip
+        :sortable="item.sortable"
+        :width="item.width">
+        <template #default="{ row }">
+          <span v-if="item.prop === 'custStatus'">
+            {{ row.custStatus == 10 ? '正常' : '异常' }}
+          </span>
+          <span v-else>{{ row[item.prop] }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      background
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange" />
+    <span slot="footer">
+      <el-button size="mini" type="primary" @click="save">保存</el-button>
+      <el-button size="mini" @click="innerVisible = false">取消</el-button>
+    </span>
+    <!-- 新建联系人弹窗 -->
+    <customer-contact ref="contact" />
+  </el-dialog>
+</template>
+
+<script>
+  import customerApi from '@/api/customer/index'
+  import TableTool from '@/components/table/TableTool'
+  import CustomerContact from '@/views/customer/components/Contact'
+
+  export default {
+    name: 'SelectContact',
+    components: {
+      TableTool,
+      CustomerContact,
+    },
+    props: {
+      title: {
+        type: String,
+        default: '选择',
+      },
+      multiple: Boolean,
+      queryParams: {
+        type: Object,
+        default() {
+          return {}
+        },
+      },
+    },
+    data() {
+      return {
+        innerVisible: false,
+        queryForm: {
+          keyword: '',
+          type: '全部客户',
+          pageNum: 1,
+          pageSize: 10,
+        },
+        checkList: [],
+        columns: [
+          {
+            label: '联系人姓名',
+            width: 'auto',
+            prop: 'cuctName',
+            // sortable: true,
+            disableCheck: true,
+          },
+          {
+            label: '客户名称',
+            width: 'auto',
+            prop: 'custName',
+          },
+          {
+            label: '手机号码',
+            width: 'auto',
+            prop: 'telephone',
+          },
+          {
+            label: '微信',
+            width: 'auto',
+            prop: 'wechat',
+          },
+          {
+            label: '邮箱',
+            width: 'auto',
+            prop: 'email',
+          },
+          {
+            label: '职务',
+            width: 'auto',
+            prop: 'postion',
+          },
+          {
+            label: '关键决策人',
+            width: 'auto',
+            prop: 'policy',
+          },
+          {
+            label: '性别',
+            width: 'auto',
+            prop: 'cuctGender',
+            // sortable: true,
+          },
+        ],
+        list: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        selectRows: [],
+      }
+    },
+    computed: {
+      finallyColumns() {
+        return this.columns.filter((item) => this.checkList.includes(item.label))
+      },
+    },
+    mounted() {
+      this.fetchData()
+    },
+    methods: {
+      open() {
+        this.innerVisible = true
+      },
+      save() {
+        this.innerVisible = false
+        this.$emit('save', this.selectRows)
+      },
+      handleAdd(res) {
+        this.$refs.contact.contactForm.custId = res.id
+        this.$refs.contact.contactForm.custName = res.name
+        this.$refs.contact.contactVisible = true
+      },
+      async fetchData() {
+        this.listLoading = true
+        let query = Object.assign(this.queryForm, this.queryParams)
+        const {
+          data: { list, total },
+        } = await customerApi.getContact(query)
+        this.list = list
+        this.total = total
+        this.listLoading = false
+      },
+      setSelectRows(val) {
+        if (!this.multiple && val.length === this.list.length) {
+          // 返回单条数据情况下-控制全选情况下单选第一条数据
+          if (this.selectRows.length === 1) {
+            this.$refs.table.clearSelection()
+            return
+          }
+          this.$refs.table.clearSelection()
+          this.$refs.table.toggleRowSelection(val.shift(), true)
+        } else if (!this.multiple && val.length > 1) {
+          // 返回单条数据情况下-控制选择当前点击数据
+          this.$refs.table.clearSelection()
+          this.$refs.table.toggleRowSelection(val.pop(), true)
+        } else {
+          this.selectRows = val
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+    },
+  }
+</script>
+
+<style scoped></style>

src/components/select/SelectCustomer.vue

@@ -0,0 +1,222 @@
+<template>
+  <el-dialog append-to-body :title="title" :visible.sync="innerVisible">
+    <el-row>
+      <el-col :span="24">
+        <div style="float: right">
+          <el-button size="mini" type="primary" @click="handleAdd">新建客户</el-button>
+          <el-dropdown style="margin-left: 10px" trigger="click">
+            <el-button icon="el-icon-more" size="mini" />
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item icon="el-icon-upload2">导入</el-dropdown-item>
+              <el-dropdown-item icon="el-icon-download">导出</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24">
+        <el-input
+          v-model="queryForm.custName"
+          clearable
+          placeholder="客户名称"
+          style="width: 30%; margin-right: 10px"
+          suffix-icon="el-icon-search" />
+        <!--        <span>显示：</span>-->
+        <!--        <el-radio-group v-model="queryForm.type">-->
+        <!--          <el-radio-button label="全部客户" />-->
+        <!--          <el-radio-button label="我负责的客户" />-->
+        <!--        </el-radio-group>-->
+        <table-tool :check-list.sync="checkList" :columns="columns" style="float: right" />
+      </el-col>
+    </el-row>
+    <el-table ref="table" v-loading="listLoading" :data="list" @selection-change="setSelectRows">
+      <el-table-column align="center" type="selection" />
+      <el-table-column
+        v-for="(item, index) in finallyColumns"
+        :key="index"
+        align="center"
+        :label="item.label"
+        :prop="item.prop"
+        show-overflow-tooltip
+        :sortable="item.sortable"
+        :width="item.width">
+        <template #default="{ row }">
+          <span v-if="item.prop === 'custStatus'">
+            {{ row.custStatus == 10 ? '正常' : '异常' }}
+          </span>
+          <span v-else>{{ row[item.prop] }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      background
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange" />
+    <span slot="footer">
+      <el-button size="mini" type="primary" @click="save">保存</el-button>
+      <el-button size="mini" @click="innerVisible = false">取消</el-button>
+    </span>
+    <!-- 新增编辑客户弹窗 -->
+    <customer-edit ref="edit" @createContact="createContact" @customerSave="fetchData" />
+    <!-- 新建联系人弹窗 -->
+    <customer-contact ref="contact" />
+  </el-dialog>
+</template>
+
+<script>
+  import customerApi from '@/api/customer/index'
+  import TableTool from '@/components/table/TableTool'
+  import CustomerEdit from '@/views/customer/components/Edit'
+  import CustomerContact from '@/views/customer/components/Contact'
+
+  export default {
+    name: 'SelectCustomer',
+    components: {
+      TableTool,
+      CustomerEdit,
+      CustomerContact,
+    },
+    props: {
+      title: {
+        type: String,
+        default: '选择',
+      },
+      multiple: Boolean,
+      queryParams: {
+        type: Object,
+        default() {
+          return {}
+        },
+      },
+    },
+    data() {
+      return {
+        innerVisible: false,
+        queryForm: {
+          custName: '',
+          pageNum: 1,
+          pageSize: 10,
+        },
+        checkList: [],
+        columns: [
+          {
+            label: '客户名称',
+            width: 'auto',
+            prop: 'custName',
+            // sortable: true,
+            disableCheck: true,
+          },
+          {
+            label: '助记名',
+            width: 'auto',
+            prop: 'abbrName',
+          },
+          {
+            label: '所在地区',
+            width: 'auto',
+            prop: 'custLocation',
+          },
+          {
+            label: '客户行业',
+            width: 'auto',
+            prop: 'custIndustry',
+          },
+          {
+            label: '客户级别',
+            width: 'auto',
+            prop: 'custLevel',
+          },
+          {
+            label: '客户状态',
+            width: 'auto',
+            prop: 'custStatus',
+          },
+          {
+            label: '创建人',
+            width: 'auto',
+            prop: 'createdName',
+          },
+          {
+            label: '创建时间',
+            width: 'auto',
+            prop: 'createdTime',
+            // sortable: true,
+          },
+        ],
+        list: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        selectRows: [],
+      }
+    },
+    computed: {
+      finallyColumns() {
+        return this.columns.filter((item) => this.checkList.includes(item.label))
+      },
+    },
+    mounted() {
+      this.fetchData()
+    },
+    methods: {
+      open() {
+        this.innerVisible = true
+      },
+      save() {
+        this.innerVisible = false
+        this.$emit('save', this.selectRows)
+      },
+      handleAdd() {
+        this.$refs.edit.init()
+      },
+      // 联系人弹窗
+      async createContact(res) {
+        this.$refs.contact.contactForm.custId = res.id
+        this.$refs.contact.contactForm.custName = res.name
+        this.$refs.contact.contactVisible = true
+      },
+      async fetchData() {
+        this.listLoading = true
+        let query = Object.assign(this.queryForm, this.queryParams)
+        const {
+          data: { list, total },
+        } = await customerApi.getList(query)
+        this.list = list
+        this.total = total
+        this.listLoading = false
+      },
+      setSelectRows(val) {
+        if (!this.multiple && val.length === this.list.length) {
+          // 返回单条数据情况下-控制全选情况下单选第一条数据
+          if (this.selectRows.length === 1) {
+            this.$refs.table.clearSelection()
+            return
+          }
+          this.$refs.table.clearSelection()
+          this.$refs.table.toggleRowSelection(val.shift(), true)
+        } else if (!this.multiple && val.length > 1) {
+          // 返回单条数据情况下-控制选择当前点击数据
+          this.$refs.table.clearSelection()
+          this.$refs.table.toggleRowSelection(val.pop(), true)
+        } else {
+          this.selectRows = val
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+    },
+  }
+</script>
+
+<style scoped></style>

src/components/select/SelectDistributor.vue

@@ -0,0 +1,212 @@
+<template>
+  <el-dialog append-to-body :title="title" :visible.sync="innerVisible">
+    <el-row>
+      <el-col :span="24">
+        <div style="float: right">
+          <el-button size="mini" type="primary" @click="handleAdd">新建经销商</el-button>
+          <el-dropdown style="margin-left: 10px" trigger="click">
+            <el-button icon="el-icon-more" size="mini" />
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item icon="el-icon-upload2">导入</el-dropdown-item>
+              <el-dropdown-item icon="el-icon-download">导出</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24">
+        <el-input
+          v-model="queryForm.distName"
+          clearable
+          placeholder="经销商名称"
+          style="width: 30%; margin-right: 10px"
+          suffix-icon="el-icon-search" />
+        <table-tool :check-list.sync="checkList" :columns="columns" style="float: right" />
+      </el-col>
+    </el-row>
+    <el-table ref="table" v-loading="listLoading" :data="list" @selection-change="setSelectRows">
+      <el-table-column align="center" type="selection" />
+      <el-table-column
+        v-for="(item, index) in finallyColumns"
+        :key="index"
+        align="center"
+        :label="item.label"
+        :prop="item.prop"
+        show-overflow-tooltip
+        :sortable="item.sortable"
+        :width="item.width">
+        <template #default="{ row }">
+          <span v-if="item.prop === 'custStatus'">
+            {{ row.custStatus == 10 ? '正常' : '异常' }}
+          </span>
+          <span v-else>{{ row[item.prop] }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      background
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange" />
+    <span slot="footer">
+      <el-button size="mini" type="primary" @click="save">保存</el-button>
+      <el-button size="mini" @click="innerVisible = false">取消</el-button>
+    </span>
+    <!-- 新增编辑经销商弹窗 -->
+    <distributor-edit ref="edit" @customerSave="fetchData" />
+  </el-dialog>
+</template>
+
+<script>
+  import distributorApi from '@/api/base/distr/distr'
+  import TableTool from '@/components/table/TableTool'
+  import DistributorEdit from '@/views/base/distributor/components/DistrEdit'
+
+  export default {
+    name: 'SelectDistributor',
+    components: {
+      TableTool,
+      DistributorEdit,
+    },
+    props: {
+      title: {
+        type: String,
+        default: '选择',
+      },
+      multiple: Boolean,
+      queryParams: {
+        type: Object,
+        default() {
+          return {}
+        },
+      },
+    },
+    data() {
+      return {
+        innerVisible: false,
+        queryForm: {
+          distName: '',
+          pageNum: 1,
+          pageSize: 10,
+        },
+        checkList: [],
+        columns: [
+          {
+            label: '经销商名称',
+            width: 'auto',
+            prop: 'distName',
+            // sortable: true,
+            disableCheck: true,
+          },
+          {
+            label: '助记名',
+            width: 'auto',
+            prop: 'abbrName',
+          },
+          {
+            label: '所在省份',
+            width: 'auto',
+            prop: 'provinceDesc',
+          },
+          {
+            label: '归属销售',
+            width: 'auto',
+            prop: 'belongSale',
+          },
+          {
+            label: '业务范围',
+            width: 'auto',
+            prop: 'businessScope',
+          },
+          {
+            label: '负责人',
+            width: 'auto',
+            prop: 'distBoss',
+          },
+          {
+            label: '负责人电话',
+            width: 'auto',
+            prop: 'distBossPhone',
+          },
+          {
+            label: '创建人',
+            width: 'auto',
+            prop: 'createdName',
+          },
+          {
+            label: '创建时间',
+            width: 'auto',
+            prop: 'createdTime',
+            // sortable: true,
+          },
+        ],
+        list: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        selectRows: [],
+      }
+    },
+    computed: {
+      finallyColumns() {
+        return this.columns.filter((item) => this.checkList.includes(item.label))
+      },
+    },
+    mounted() {
+      this.fetchData()
+    },
+    methods: {
+      open() {
+        this.innerVisible = true
+      },
+      save() {
+        this.innerVisible = false
+        this.$emit('save', this.selectRows)
+      },
+      handleAdd() {
+        this.$refs.edit.showEdit()
+      },
+      async fetchData() {
+        this.listLoading = true
+        let query = Object.assign(this.queryForm, this.queryParams)
+        const {
+          data: { list, total },
+        } = await distributorApi.getList(query)
+        this.list = list
+        this.total = total
+        this.listLoading = false
+      },
+      setSelectRows(val) {
+        if (!this.multiple && val.length === this.list.length) {
+          // 返回单条数据情况下-控制全选情况下单选第一条数据
+          if (this.selectRows.length === 1) {
+            this.$refs.table.clearSelection()
+            return
+          }
+          this.$refs.table.clearSelection()
+          this.$refs.table.toggleRowSelection(val.shift(), true)
+        } else if (!this.multiple && val.length > 1) {
+          // 返回单条数据情况下-控制选择当前点击数据
+          this.$refs.table.clearSelection()
+          this.$refs.table.toggleRowSelection(val.pop(), true)
+        } else {
+          this.selectRows = val
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+    },
+  }
+</script>
+
+<style scoped></style>

src/components/select/SelectProduct.vue

@@ -0,0 +1,213 @@
+<template>
+  <el-dialog append-to-body :title="title" :visible.sync="innerVisible">
+    <el-row>
+      <el-col :span="24">
+        <div style="float: right">
+          <el-button size="mini" type="primary" @click="handleAdd">新建产品</el-button>
+          <el-dropdown style="margin-left: 10px" trigger="click">
+            <el-button icon="el-icon-more" size="mini" />
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item icon="el-icon-upload2">导入</el-dropdown-item>
+              <el-dropdown-item icon="el-icon-download">导出</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24">
+        <el-input
+          v-model="queryForm.prodName"
+          clearable
+          placeholder="产品名称"
+          style="width: 30%; margin-right: 10px"
+          suffix-icon="el-icon-search" />
+        <table-tool :check-list.sync="checkList" :columns="columns" style="float: right" />
+      </el-col>
+    </el-row>
+    <el-table ref="table" v-loading="listLoading" :data="list" @selection-change="setSelectRows">
+      <el-table-column align="center" type="selection" />
+      <el-table-column
+        v-for="(item, index) in finallyColumns"
+        :key="index"
+        align="center"
+        :label="item.label"
+        :prop="item.prop"
+        show-overflow-tooltip
+        :sortable="item.sortable"
+        :width="item.width">
+        <template #default="{ row }">
+          <span v-if="item.prop === 'custStatus'">
+            {{ row.custStatus == 10 ? '正常' : '异常' }}
+          </span>
+          <span v-else>{{ row[item.prop] }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      background
+      :current-page="queryForm.pageNo"
+      :layout="layout"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange" />
+    <span slot="footer">
+      <el-button size="mini" type="primary" @click="save">保存</el-button>
+      <el-button size="mini" @click="innerVisible = false">取消</el-button>
+    </span>
+    <!-- 新增编辑产品弹窗 -->
+    <product-edit ref="edit" @fetch-data="fetchData" />
+  </el-dialog>
+</template>
+
+<script>
+  import productApi from '@/api/product'
+  import TableTool from '@/components/table/TableTool'
+  import ProductEdit from '@/views/product/components/ProductEdit'
+
+  export default {
+    name: 'SelectProduct',
+    components: {
+      TableTool,
+      ProductEdit,
+    },
+    props: {
+      title: {
+        type: String,
+        default: '选择',
+      },
+      multiple: Boolean,
+      queryParams: {
+        type: Object,
+        default() {
+          return {}
+        },
+      },
+    },
+    data() {
+      return {
+        innerVisible: false,
+        queryForm: {
+          prodName: '',
+          type: '全部客户',
+          pageNum: 1,
+          pageSize: 10,
+        },
+        checkList: [],
+        columns: [
+          {
+            label: '产品名称',
+            width: 'auto',
+            prop: 'prodName',
+            // sortable: true,
+            disableCheck: true,
+          },
+          {
+            label: '产品类别',
+            width: 'auto',
+            prop: 'prodClass',
+          },
+          {
+            label: '产品型号',
+            width: 'auto',
+            prop: 'prodCode',
+          },
+          {
+            label: '签约代理价',
+            width: 'auto',
+            prop: 'agentPrice',
+          },
+          {
+            label: '经销商价',
+            width: 'auto',
+            prop: 'distPrice',
+          },
+          {
+            label: '建议成交价',
+            width: 'auto',
+            prop: 'guidPrice',
+          },
+          {
+            label: '市场报价',
+            width: 'auto',
+            prop: 'marketPrice',
+          },
+          {
+            label: '创建人',
+            width: 'auto',
+            prop: 'createdName',
+          },
+          {
+            label: '创建时间',
+            width: 'auto',
+            prop: 'createdTime',
+            // sortable: true,
+          },
+        ],
+        list: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        selectRows: [],
+      }
+    },
+    computed: {
+      finallyColumns() {
+        return this.columns.filter((item) => this.checkList.includes(item.label))
+      },
+    },
+    mounted() {
+      this.fetchData()
+    },
+    methods: {
+      open() {
+        this.innerVisible = true
+      },
+      save() {
+        this.innerVisible = false
+        this.$emit('save', this.selectRows)
+      },
+      handleAdd() {
+        this.$refs.edit.showEdit()
+      },
+      async fetchData() {
+        this.listLoading = true
+        let query = Object.assign(this.queryForm, this.queryParams)
+        const {
+          data: { list, total },
+        } = await productApi.getList(query)
+        this.list = list
+        this.total = total
+        this.listLoading = false
+      },
+      setSelectRows(val) {
+        if (!this.multiple && val.length === this.list.length) {
+          // 返回单条数据情况下-控制全选情况下单选第一条数据
+          if (this.selectRows.length === 1) {
+            this.$refs.table.clearSelection()
+            return
+          }
+          this.$refs.table.clearSelection()
+          this.$refs.table.toggleRowSelection(val.shift(), true)
+        } else if (!this.multiple && val.length > 1) {
+          // 返回单条数据情况下-控制选择当前点击数据
+          this.$refs.table.clearSelection()
+          this.$refs.table.toggleRowSelection(val.pop(), true)
+        } else {
+          this.selectRows = val
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.pageSize = val
+        this.fetchData()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.pageNo = val
+        this.fetchData()
+      },
+    },
+  }
+</script>
+
+<style scoped></style>

src/views/base/distributor/components/DistrEdit.vue

@@ -50,7 +50,7 @@
   </el-dialog>
 </template> -->
 <template>
-  <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="handleClose">
+  <el-dialog append-to-body :title="title" :visible.sync="dialogFormVisible" @close="handleClose">
     <el-form ref="form" :model="form" :rules="rules">
       <el-row :gutter="20">
         <el-col :span="12">

src/views/base/distributor/index.vue

@@ -106,6 +106,7 @@
   import Edit from './components/DistrEdit'
   import distrApi from '@/api/distr'
   import TableTool from '@/components/table/TableTool'
+
   export default {
     name: 'Distr',
     components: { Edit, TableTool },

src/views/customer/components/Contact.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 新建联系人弹窗 -->
-  <el-dialog :title="title" :visible.sync="contactVisible" @close="contactClose">
+  <el-dialog append-to-body :title="title" :visible.sync="contactVisible" @close="contactClose">
     <el-form ref="contactForm" :model="contactForm" :rules="contactRules">
       <el-row :gutter="20">
         <el-col :span="12">

src/views/customer/components/Edit.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="title" :visible.sync="editVisible" @close="handleClose">
+  <el-dialog append-to-body :title="title" :visible.sync="editVisible" @close="handleClose">
     <el-form ref="editForm" :model="editForm" :rules="editRules">
       <el-row :gutter="20">
         <el-col :span="12">

src/views/product/components/ProductEdit.vue

@@ -36,7 +36,7 @@
   </el-dialog>
 </template> -->
 <template>
-  <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="handleClose">
+  <el-dialog append-to-body :title="title" :visible.sync="dialogFormVisible" @close="handleClose">
     <el-form ref="form" :model="form" :rules="rules">
       <el-row :gutter="20">
         <el-col :span="12">