添加营销系统模块

src/views/MarketingCenter/CRM/index.vue

@@ -0,0 +1,573 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <span>客户名称：</span>
+      <el-select v-model="CustomerNameValue" filterable placeholder="请输入客户名称" style="margin-right: 10px" size="small" clearable>
+        <el-option
+          v-for="item in CustomerName"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"/>
+      </el-select>
+      <!--<el-input v-model="CustomerName" placeholder="请输入客户名称" size="small"></el-input>-->
+      <!--<span class="move">销售经理：</span>-->
+      <!--<el-input clearable v-model="MarketingManagerValue" @dblclick.native="dialogFormVisiblePeople = true" size="small" style="width:200px" placeholder="请选择营销经理" clearable></el-input>-->
+      <!--<span class="move">信誉等级：</span>-->
+      <!--<el-select v-model="CreditRatingValue" placeholder="请选择信誉等级" size="small">-->
+      <!--<el-option-->
+      <!--v-for="item in CreditRating"-->
+      <!--:key="item.value"-->
+      <!--:label="item.label"-->
+      <!--:value="item.value">-->
+      <!--</el-option>-->
+      <!--</el-select>-->
+      <el-button type="success" icon="el-icon-search" class="move" size="small" @click="selectCustomerOfName">查询</el-button>
+    </el-card>
+    <el-row>
+      <el-col :span="4">
+        <el-card>
+          <el-table
+            v-loading="loading1"
+            ref="multipleTable"
+            :data="tableData1"
+            stripe
+            tooltip-effect="dark"
+            style="width: 100%"
+            height="730"
+            highlight-current-row
+            border>
+            <el-table-column align="center" label="序号" width="80">
+              <template slot-scope="scope">
+                <el-radio :label="scope.row.省份流水号" v-model="radio" @change.native="getCurrentRow(scope.row.省份流水号, scope.row.省份)"/>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="地区">
+              <template slot-scope="scope">
+                {{ scope.row.省份 }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-col>
+      <el-col :span="20">
+        <el-card>
+          <el-button type="text" icon="el-icon-circle-plus-outline" size="mini" @click="addMarketingManager();flag = 1">添加销售经理</el-button>
+          <span style="float: right">销售经理</span>
+          <el-table v-loading="loading3" :data="tableData3" height="192" style="width: 100%;margin-top: 10px" border highlight-current-row>
+            <el-table-column label="责权省份" align="center" width="80">
+              <template slot-scope="scope">
+                {{ scope.row.省份 }}
+              </template>
+            </el-table-column>
+            <el-table-column label="姓名" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.姓名 }}
+              </template>
+            </el-table-column>
+            <el-table-column label="性别" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.性别 }}
+              </template>
+            </el-table-column>
+            <el-table-column label="联系电话" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.联系电话 }}
+              </template>
+            </el-table-column>
+            <el-table-column label="生日" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.出生日期 }}
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" width="200px" fixed="right">
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="primary"
+                  class="el-icon-edit"
+                  @click="handleEditMarketingManager(scope.row);flag = 2">编辑</el-button>
+                <el-button
+                  size="mini"
+                  type="danger"
+                  class="el-icon-delete"
+                  @click="handleDeleteMarketingManager(scope.$index, scope.row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+        <el-card>
+          <el-button type="text" icon="el-icon-circle-plus-outline" size="mini" @click = "addCustomer();flag1 = 1">新增客户</el-button>
+          <span style="float: right">客户信息</span>
+          <el-table v-loading="loading2" :data="tableData2" height="400" style="width: 100%;margin-top: 10px" border highlight-current-row>
+            <el-table-column label="省份" align="center" width="80px">
+              <template slot-scope="scope">
+                {{ scope.row.省份 }}
+              </template>
+            </el-table-column>
+            <el-table-column label="客户名称" align="center" width="280">
+              <template slot-scope="scope">
+                {{ scope.row.客户名称 }}
+              </template>
+            </el-table-column>
+            <el-table-column label="联系人" align="center" width="100spx">
+              <template slot-scope="scope">
+                {{ scope.row.联系人 }}
+              </template>
+            </el-table-column>
+            <el-table-column label="联系电话" align="center" width="192px">
+              <template slot-scope="scope">
+                {{ scope.row.电话 }}
+              </template>
+            </el-table-column>
+            <el-table-column label="传真" align="center" width="140px">
+              <template slot-scope="scope">
+                {{ scope.row.传真 }}
+              </template>
+            </el-table-column>
+            <el-table-column label="联系地址" align="center" width="200px">
+              <template slot-scope="scope">
+                {{ scope.row.地址 }}
+              </template>
+            </el-table-column>
+            <el-table-column label="电子邮箱" align="center" width="200px">
+              <template slot-scope="scope">
+                {{ scope.row.电子邮箱 }}
+              </template>
+            </el-table-column>
+            <el-table-column label="税号" align="center" width="100px">
+              <template slot-scope="scope">
+                {{ scope.row.税号 }}
+              </template>
+            </el-table-column>
+            <el-table-column label="银行账号" align="center" width="200px">
+              <template slot-scope="scope">
+                {{ scope.row.银行账号 }}
+              </template>
+            </el-table-column>
+            <el-table-column label="信誉等级" align="center" width="100px">
+              <template slot-scope="scope">
+                {{ scope.row.价值评估 }}
+              </template>
+            </el-table-column>
+            <el-table-column label="备注" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.备注 }}
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" width="200px" fixed="right">
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="primary"
+                  class="el-icon-edit"
+                  @click="handleEdit(scope.row);flag1 = 2">编辑</el-button>
+                <el-button
+                  size="mini"
+                  type="danger"
+                  class="el-icon-delete"
+                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="block">
+            <el-pagination
+              v-if="!loading2"
+              :current-page="pageCurrent"
+              :page-sizes="[10, 20, 30, 40]"
+              :page-size="pageSize"
+              :total="total"
+              layout="total, sizes, prev, pager, next, jumper"
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"/>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <!--选择人员-->
+    <el-dialog :visible.sync="dialogFormVisiblePeople" title="人员信息" center width="750px">
+      <div style="height: 420px">
+        <div style="float: left;margin-top: 10px;margin-left: 20px;overflow-y: scroll;height: 400px">
+          <el-tree
+            :data="dataPeople"
+            node-key="id"
+            style="width: 150px;float: left"
+            height="400"
+            accordion
+            @node-click="handleNodeClick"
+          />
+        </div>
+        <el-table :data="ListPeople" highlight-current-row height="400" style="width: 400px;float: left;margin-left: 30px" @row-click="handleChange">
+          <el-table-column label="考勤编号" align="center" >
+            <template slot-scope="scope">
+              {{ scope.row.考勤编号 }}
+            </template>
+          </el-table-column>
+          <el-table-column label="姓名" align="center" >
+            <template slot-scope="scope">
+              {{ scope.row.姓名 }}
+            </template>
+          </el-table-column>
+          <el-table-column label="性别" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.性别 }}
+            </template>
+          </el-table-column>
+          <el-table-column label="工作岗位" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.岗位名称 }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <el-button style="margin-left: 260px" @click="offName">取消</el-button>
+      <el-button type="primary" style="margin-top: 20px" @click="getName">确认</el-button>
+    </el-dialog>
+
+    <el-dialog :title="title1" :visible.sync="dialogFormVisible1" center width="400px">
+      <el-form ref="form1" :model="form1" :rules="rules1" label-position="left" label-width="110px" class="demo-ruleForm" style="margin: auto">
+        <el-form-item label="营销经理" prop="营销经理">
+          <el-input v-model="form1.营销经理" clearable size="small" style="width:200px" placeholder="请选择营销经理" @dblclick.native="dialogFormVisiblePeople = true"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="callOff1()">取消</el-button>
+        <el-button type="primary" @click="submit1('form1')">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog :title="title2" :visible.sync="dialogFormVisible2" center width="700px">
+      <el-row>
+        <el-col :span="12">
+          <el-form ref="form2" :model="form2" :rules="rules2" label-position="left" label-width="90px" class="demo-ruleForm" style="margin: auto">
+            <el-form-item label="省份:" prop="省份">
+              <el-input v-model="form2.省份" :disabled="true" clearable size="small" style="width:200px" placeholder="请选择省份"/>
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <el-col :span="12">
+          <el-form ref="form2" :model="form2" :rules="rules2" label-position="left" label-width="90px" class="demo-ruleForm" style="margin: auto">
+            <el-form-item label="客户名称:" prop="客户名称">
+              <el-input v-model="form2.客户名称" clearable size="small" style="width:200px" placeholder="请输入客户名称"/>
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <el-col :span="12">
+          <el-form ref="form2" :model="form2" :rules="rules2" label-position="left" label-width="90px" class="demo-ruleForm" style="margin: auto">
+            <el-form-item label="联系人:" prop="联系人">
+              <el-input v-model="form2.联系人" clearable size="small" style="width:200px" placeholder="请输入联系人"/>
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <el-col :span="12">
+          <el-form ref="form2" :model="form2" :rules="rules2" label-position="left" label-width="90px" class="demo-ruleForm" style="margin: auto">
+            <el-form-item label="联系电话:" prop="联系电话">
+              <el-input v-model="form2.联系电话" clearable size="small" style="width:200px" placeholder="请输入联系电话"/>
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <el-col :span="12">
+          <el-form ref="form2" :model="form2" :rules="rules2" label-position="left" label-width="90px" class="demo-ruleForm" style="margin: auto">
+            <el-form-item label="传真:" prop="传真">
+              <el-input v-model="form2.传真" clearable size="small" style="width:200px" placeholder="请输入传真"/>
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <el-col :span="12">
+          <el-form ref="form2" :model="form2" :rules="rules2" label-position="left" label-width="90px" class="demo-ruleForm" style="margin: auto">
+            <el-form-item label="联系地址:" prop="联系地址">
+              <el-input v-model="form2.联系地址" clearable size="small" style="width:200px" placeholder="请输入联系地址"/>
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <el-col :span="12">
+          <el-form ref="form2" :model="form2" :rules="rules2" label-position="left" label-width="90px" class="demo-ruleForm" style="margin: auto">
+            <el-form-item label="电子邮箱:" prop="电子邮箱">
+              <el-input v-model="form2.电子邮箱" clearable size="small" style="width:200px" placeholder="请输入电子邮箱"/>
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <el-col :span="12">
+          <el-form ref="form2" :model="form2" :rules="rules2" label-position="left" label-width="90px" class="demo-ruleForm" style="margin: auto">
+            <el-form-item label="税号:" prop="税号">
+              <el-input v-model="form2.税号" clearable size="small" style="width:200px" placeholder="请输入税号"/>
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <el-col :span="12">
+          <el-form ref="form2" :model="form2" :rules="rules2" label-position="left" label-width="90px" class="demo-ruleForm" style="margin: auto">
+            <el-form-item label="银行账号:" prop="银行账号">
+              <el-input v-model="form2.银行账号" clearable size="small" style="width:200px" placeholder="请输入银行账号"/>
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <el-col :span="12">
+          <el-form ref="form2" :model="form2" :rules="rules2" label-position="left" label-width="90px" class="demo-ruleForm" style="margin: auto">
+            <el-form-item label="信用等级:" prop="信用等级">
+              <el-select v-model="form2.信用等级" placeholder="请选择信誉等级" size="small">
+                <el-option
+                  v-for="item in CreditRating"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"/>
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <el-col :span="24">
+          <el-form ref="form2" :model="form2" :rules="rules2" label-position="left" label-width="90px" class="demo-ruleForm" style="margin: auto">
+            <el-form-item label="备注:" prop="备注">
+              <el-input v-model="form2.备注" clearable size="small" style="width:530px" placeholder="请输入备注"/>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-row>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="callOff2()">取消</el-button>
+        <el-button type="primary" @click="submit2('form2')">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { searchValue, selectAdress, selectCustomer, getTree, tree, getTablePeople, selectMarketingManager, selectCustomerOfName, initCustomer, deleteCustomer, deleteMarketingManager, addMarketingManager, editMarketingManager, addCustomer, selectAdressOfID, editCustomer } from '@/api/MarketingCenter/CRM'
+export default {
+  data() {
+    return {
+      a: '', // 营销经理地区流水号
+      b: '', // 省份
+      c: '', // 客户流水号
+      flag: null,
+      flag1: null,
+      title1: '', // 营销经理对话框
+      title2: '', // 客户对话框
+      dialogFormVisible1: false, // 营销经理对话框可见性
+      dialogFormVisible2: false, // 客户对话框可见性
+      CustomerNameValue: '',
+      CustomerName: [], // 客户名称
+      // CreditRatingValue: '', // 信誉等级
+      CreditRating: [], // 信誉等级数组
+      tableData1: [], // 地区表
+      loading1: false, // 地区的加载动画
+      loading2: false, // 客户的加载动画
+      radio: null, // 地区选择框
+      tableData2: [], // 客户表
+      pageCurrent: 1,
+      pageSize: 10,
+      total: null,
+      AdressID: null, // 地区流水号
+      MarketingManagerValue: '', // 营销经理
+      dialogFormVisiblePeople: false,
+      dataPeople: [],
+      ListPeople: [],
+      peoplename: '',
+      peopleid: '',
+      tableData3: [],
+      loading3: false,
+      form1: {
+        营销经理: '' // 营销经理
+      },
+      form2: {
+        省份: '',
+        客户名称: '',
+        联系人: '',
+        联系电话: '',
+        传真: '',
+        联系地址: '',
+        电子邮箱: '',
+        税号: '',
+        银行账号: '',
+        信用等级: 1,
+        备注: ''
+      },
+      rules1: { // 表单验证规则
+        营销经理: [{ required: true, message: '请选择营销经理', trigger: 'change' }]
+      },
+      rules2: { // 表单验证规则
+        省份: [{ required: true, message: '请选择省份' }],
+        客户名称: [{ required: true, message: '请输入客户名称' }],
+        联系人: [{ required: true, message: '请输入联系人' }],
+        信用等级: [{ required: true, message: '请选择信用等级' }]
+      }
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.loading1 = true
+      selectAdress().then(response => {
+        this.tableData1 = response.data
+        this.loading1 = false
+      })
+      this.getSelect(searchValue, ['价值评估', '价值评估流水号'], 'CreditRating')
+      getTree().then(response => { // 获取人员信息树
+        const data = response.data
+        this.dataPeople = tree(data, 0)
+      })
+      this.getSelect(initCustomer, ['客户名称', '客户流水号'], 'CustomerName')
+    },
+    getCurrentRow(row) {
+      this.CustomerNameValue = ''
+      this.AdressID = row
+      this.getTable(selectCustomer, [this.AdressID, this.pageCurrent, this.pageSize], ['tableData2', 'total', 'loading2'])
+      this.loading3 = true
+      selectMarketingManager(this.AdressID).then(response => {
+        this.loading3 = false
+        this.tableData3 = response.data
+      })
+    },
+    handleSizeChange(val) {
+      this.pageCurrent = 1
+      this.pageSize = val
+      this.getTable(selectCustomer, [this.AdressID, this.pageCurrent, this.pageSize], ['tableData2', 'total', 'loading2'])
+    },
+    handleCurrentChange(val) {
+      this.pageCurrent = val
+      this.getTable(selectCustomer, [this.AdressID, this.pageCurrent, this.pageSize], ['tableData2', 'total', 'loading2'])
+    },
+    handleNodeClick(data) { // 树节点点击
+      this.getData(getTablePeople, 'ListPeople', data.id)
+    },
+    offName() {
+      this.dialogFormVisiblePeople = false
+      this.peopleid = ''
+      this.peoplename = ''
+    },
+    getName() {
+      this.dialogFormVisiblePeople = false
+      this.form1.营销经理 = this.peoplename
+    },
+    handleChange(row) {
+      this.peopleid = row.人员编号
+      this.peoplename = row.姓名
+    },
+    selectCustomerOfName() {
+      selectCustomerOfName(this.CustomerNameValue, this.pageCurrent, this.pageSize).then(response => {
+        this.radio = parseInt(response.data.rows[0].客户名称省份流水号)
+        this.AdressID = parseInt(response.data.rows[0].客户名称省份流水号)
+        this.tableData2 = response.data.rows
+        return this.AdressID
+      }).then(data => {
+        this.loading3 = false
+        selectMarketingManager(data).then(response => {
+          this.loading3 = false
+          this.tableData3 = response.data
+        })
+      })
+    },
+    handleDelete(index, row) {
+      function a() {
+        if (this.CustomerNameValue === '') {
+          this.getTable(selectCustomer, [this.AdressID, this.pageCurrent, this.pageSize], ['tableData2', 'total', 'loading2'])
+        }
+        if (this.CustomerNameValue !== '') {
+          selectCustomerOfName(row.客户流水号, this.pageCurrent, this.pageSize).then(response => {
+            this.tableData2 = response.data.rows
+          })
+        }
+      }
+      this.deleteRow(deleteCustomer, row.客户流水号, a)
+    },
+    handleDeleteMarketingManager(index, row) {
+      function a() {
+        selectMarketingManager(this.AdressID).then(response => {
+          this.loading3 = false
+          this.tableData3 = response.data
+        })
+      }
+      this.deleteRow(deleteMarketingManager, row.营销经理地区流水号, a)
+    },
+    addMarketingManager() {
+      if (this.AdressID === '' || this.AdressID === null) {
+        this.$message.warning('请选择一个省份')
+      } else {
+        this.dialogFormVisible1 = true
+        this.title1 = '增加'
+        this.addForm('form1')
+      }
+    },
+    callOff1() {
+      this.dialogFormVisible1 = false
+    },
+    submit1() {
+      function a() {
+        this.dialogFormVisible1 = false
+        this.loading3 = true
+        selectMarketingManager(this.AdressID).then(response => {
+          this.loading3 = false
+          this.tableData3 = response.data
+        })
+      }
+      if (this.flag === 1) {
+        this.addTable(addMarketingManager, [this.peopleid, this.AdressID], 'form1', a)
+      } else {
+        this.editTable(editMarketingManager, [this.peopleid, this.a], 'form1', a)
+      }
+    },
+    handleEditMarketingManager(row) {
+      this.dialogFormVisible1 = true
+      this.title1 = '编辑'
+      this.form1.营销经理 = row.姓名
+      this.peopleid = row.营销经理流水号
+      this.a = row.营销经理地区流水号
+    },
+    addCustomer() {
+      if (this.AdressID === '' || this.AdressID === null) {
+        this.$message.warning('请选择一个省份')
+      } else {
+        this.dialogFormVisible2 = true
+        this.title2 = '增加'
+        this.addForm('form2')
+      }
+      selectAdressOfID(this.AdressID).then(response => {
+        this.form2.省份 = response.data[0].省份
+      })
+    },
+    callOff2() {
+      this.dialogFormVisible2 = false
+    },
+    handleEdit(row) {
+      this.dialogFormVisible2 = true
+      this.title2 = '编辑'
+      this.form2.省份 = row.省份
+      this.form2.客户名称 = row.客户名称
+      this.form2.联系电话 = row.电话
+      this.form2.传真 = row.传真
+      this.form2.联系地址 = row.地址
+      this.form2.联系人 = row.联系人
+      this.form2.电子邮箱 = row.电子邮箱
+      this.form2.银行账号 = row.银行账号
+      this.form2.税号 = row.税号
+      this.form2.信用等级 = parseInt(row.价值评估流水号)
+      this.form2.备注 = row.备注
+      this.c = row.客户流水号
+    },
+    submit2() {
+      function a() {
+        this.dialogFormVisible2 = false
+        this.getTable(selectCustomer, [this.AdressID, this.pageCurrent, this.pageSize], ['tableData2', 'total', 'loading2'])
+      }
+      if (this.flag1 === 1) {
+        this.addTable(addCustomer, [this.AdressID, this.form2.客户名称, this.form2.联系电话, this.form2.传真, this.form2.联系地址, this.form2.联系人, this.form2.电子邮箱, this.form2.银行账号, this.form2.税号, this.form2.信用等级, this.form2.备注], 'form2', a)
+      } else {
+        this.editTable(editCustomer, [this.AdressID, this.form2.客户名称, this.form2.联系电话, this.form2.传真, this.form2.联系地址, this.form2.联系人, this.form2.电子邮箱, this.form2.银行账号, this.form2.税号, this.form2.信用等级, this.form2.备注, this.c], 'form2', a)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-input{
+    width: 200px;
+  }
+  .el-select{
+    width: 200px;
+  }
+  .move{
+    margin-left: 10px;
+  }
+
+</style>