vue-insagent-pc/src/views/DistributionManage/CarInsurance/DistributionManage.vue

<template>
  <div>
    <el-main ref="elMain" style="padding: 0px;">
      <Split :gutterSize="2" style="height: calc(100vh - 120px);">
        <!-- 左侧树Start -->
        <SplitArea :size="leftSplitWidth" :minSize="240">
          <div>
            <div>
              <el-checkbox v-model="containsSubDept">包含下级机构</el-checkbox>

              <kt-button style="margin-left: 15px;margin-bottom: 10px;" icon="el-icon-plus" label="添加分销" type="primary"
                perms="sys:distributionManage:add" @click="handleAddButton" />
            </div>
            <el-divider></el-divider>

            <tree :setting="ztreeSetting" :nodes="ztreeNodes" @onClick="onZTreeClick" @onCreated="onZTreeCreated" />
          </div>
        </SplitArea>
        <!-- 左侧树End -->

        <!-- 右侧列表页面Start -->
        <SplitArea :size="rightSplitWidth">
          <el-row class="queryFrom">
            <el-form ref="queryFormRef" :model="queryFrom" label-width="80px">
              <el-row>
                <el-col :span="5">
                  <el-form-item label="分销级别">
                    <el-select style="100%" clearable size="small" v-model="queryFrom.retailtype" placeholder="请选择">
                      <el-option label="一级分销" value="1"></el-option>
                      <el-option label="二级分销" value="2"></el-option>
                      <!--<el-option label="三级分销" value="3"></el-option>-->
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="">
                    <el-button size="small" type="primary" @click="queryInfo">查询</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-row>


          <kt-common-table permsEdit="sys:distributionManage:edit" permsDelete="sys:distributionManage:delete"
            :data="pageResult" :columns="columns" editButtonName="编辑" deleteButtonName="删除" :showBatchDelete="false"
            @findPage="findPage" @handleEdit="handleTableEdit" deleteName="批量删除" @handleDeleteFlag="handleTableDeleteFlag"
            @handleDelete="handleTableBatchDelete">
          </kt-common-table>
        </SplitArea>
        <!-- 右侧列表页面End -->
      </Split>
    </el-main>

    <el-dialog v-dialogDrag title="分销管理" :visible.sync="dialogVisible" width="1200px" @close="closeDialog"
      :before-close="handleDialogBefore">
      <el-tabs v-model="activeTabs">
        <el-tab-pane label="行政信息" name="first">
          <el-form label-width="120px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="机构编码">
                  <el-input size="medium" style="width: 100%;" :value="deptInfo.id" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="机构名称">
                  <el-input size="medium" style="width: 100%;" :value="deptInfo.name" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="上级机构编码">
                  <el-input size="medium" style="width: 100%;" :value="deptInfo.parentId" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="机构类型">
                  <el-select size="medium" style="width: 100%;" disabled :value="deptInfo.comtype" placeholder="请选择">
                    <el-option v-for="item in comtypeoptions" :key="item.label" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="机构级别">
                  <el-select size="medium" style="width: 100%;" disabled :value="deptInfo.comlevel" placeholder="请选择">
                    <el-option v-for="item in comleveloptions" :key="item.label" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="机构性质">
                  <el-select size="medium" style="width: 100%;" disabled :value="deptInfo.comattribute" placeholder="请选择">
                    <el-option v-for="item in comattributeoptions" :key="item.label" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="机构地址" style="width: 100%;">
                  <el-input size="medium" type="textarea" :rows="3" style="width: 100%;"
                    :autosize="{ minRows: 3, maxRows: 4 }" placeholder="请输入内容" :value="deptInfo.address" disabled>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="团队编码">
                  <el-input size="medium" style="width: 100%;" :value="deptInfo.teamid" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="团队名称">
                  <el-input size="medium" style="width: 100%;" :value="deptInfo.teamname" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>


          </el-form>
        </el-tab-pane>
        <el-tab-pane label="分佣设置" name="second">
          <el-form v-model="distributionForm" label-width="120px">
            <el-form-item label="分销方式:">
              <el-radio-group v-model="distributionForm.retailtype" @change="retailtypeChange">
                <el-row style="margin: 15px 0px;"><el-radio label="1">一级分销</el-radio></el-row>
                <el-row style="margin: 15px 0px;"><el-radio label="2">二级分销</el-radio></el-row>
                <el-row style="margin: 15px 0px;"><el-radio label="3">三级分销</el-radio></el-row>
                <el-row style="margin: 15px 0px;"><el-radio label="0">无分销分式</el-radio></el-row>
              </el-radio-group>
            </el-form-item>
          </el-form>

          <el-table :data="retailSettingForm" border style="width: 100%" :span-method="arraySpanMethod">
            <el-table-column label="佣金级别" align="center" prop="retailLevel">
              <template slot-scope="scope">
                {{ scope.row.retailLevel }}级佣金
              </template>
            </el-table-column>
            <el-table-column label="佣金比例(%)" align="center" prop="retailRate">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.retailRate" :precision="2" :min="0" :step="0.01"
                  :max="100"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="说明" align="center" width="700">
              <template slot-scope="scope">
                <template v-if="distributionForm.retailtype == 1">
                  <img src="@/assets/image/distribution/distribution1.png" width="600px" />
                </template>
                <template v-if="distributionForm.retailtype == 2">
                  <img src="@/assets/image/distribution/distribution2.png" width="600px" />
                </template>
                <template v-if="distributionForm.retailtype == 3">
                  <img src="@/assets/image/distribution/distribution3.png" width="600px" />
                </template>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>


      <span slot="footer" class="dialog-footer" v-if="activeTabs == 'second'">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="comfirmRetail">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Cookies from "js-cookie"
import KtButton from "@/views/Core/KtButton"; // 按钮权限组件
import tree from "@/components/ztree.vue";  // 机构树组件
import KtCommonTable from "@/views/Core/KtCommonTable.vue";//表格组件
import CommonUtil from "@/utils/comutil.js"
export default {
  components: {
    KtButton,
    tree,
    KtCommonTable
  },
  data() {

    return {
      peopleid: "",
      peopledeptid: "",
      /**Split 开始 */
      leftSplitWidth: 20,
      rightSplitWidth: 80,
      /**Split 结束 */

      containsSubDept: true,

      //----ztreeLeft begin---------
      ztreeObj: null,
      ztreeSetting: {
        check: {
          enable: false
        },
        data: {
          simpleData: {
            enable: true,
            pIdKey: "parentId"
          }
        },
        view: {
          showIcon: false
        }
      },
      ztreeNodes: [],
      currentTreeNode: null,
      //----ztreeLeft end---------

      //------------下拉框数据字典   begin-----------------
      comleveloptions: [],
      comattributeoptions: [],
      comtypeoptions: [],
      //------------下拉框数据字典   end-----------------

      // 弹出框start-------
      dialogVisible: false,
      activeTabs: "first",
      deptInfo: {},

      retailSettingForm: [],

      distributionForm: {
        id: "",
        retailtype: '', //分销方式
        disrate1: 0,   //一级分销比例
        disrate2: 0,   //二级分销比例
        disrate3: 0,   //三级分销比例ss
        creator: '',    //创建人
        createtime: "",//创建时间
      },
      // 弹出框 End--------

      // 右侧列表查询数据Start
      queryFrom: {
        "retailtype": ""
      },
      pageResult: {},
      pageRequest: {  //查询的默认条件
        pageNum: 1,
        pageSize: 20,
        columnFilters: {
          "deptid": {
            "name": "deptid",
            "value": ''
          },
          "containsSubDept": {
            "name": "containsSubDept",
            "value": "1"
          },
          "retailtype": {
            "name": "retailtype",
            "value": ""
          },
          // "status":{
          //   "name":"status",
          //   "value":"2"
          // }
        }
      },
      columns: [ // 数据列
        { prop: "id", label: "分销编码", minWidth: 80, sortable: false },
        { prop: "deptid", label: "团队编码", minWidth: 80, sortable: false },
        { prop: "deptname", label: "团队名称", minWidth: 80, sortable: false },
        { prop: "retailtype", label: "分销方式", minWidth: 80, sortable: false },
        { prop: "disrate1", label: "一级佣金比例", minWidth: 80, sortable: false },
        { prop: "disrate2", label: "二级佣金比例", minWidth: 80, sortable: false },
        { prop: "disrate3", label: "三级佣金比例", minWidth: 80, sortable: false },
        // { prop: "display",label: "是否显示用佣金",minWidth: 80,sortable: false},
        // { prop: "paytype",label: "提现方式",minWidth: 120,sortable: false},
        // { prop: "minamount",label: "最少提现额度",minWidth: 120,sortable: false},
        // { prop: "maxamount",label: "每日提现上限",minWidth: 100,sortable: false},
        // { prop: "status", label: "状态", minWidth: 70, sortable: false},
        { prop: "creator", label: "创建人", minWidth: 100, sortable: false },
        { prop: "createtime", label: "创建时间", minWidth: 100, sortable: false }
      ],
      // 右侧列表查询数据End
    }
  },

  mounted() {
    this.findLeftTreeData();// 获取机构树的数据
    //用像素初始化左边的split的宽度
    this.changeTreeWidth(240);// 初始化树的宽度
  },
  watch: {
    containsSubDept() { // 监听是否包含下级
      this.pageRequest.columnFilters.containsSubDept.value = this.containsSubDept ? "1" : "0";
      this.findPage();
    }
  },
  created() {
    this.peopleid = Cookies.get('user');
    if (this.peopleid != 'admin') {
      this.peopledeptid = Cookies.get('user').split('D')[0];
      this.pageRequest.columnFilters.deptid.value = this.peopledeptid;
    } else {
      this.peopledeptid = '9';
      this.pageRequest.columnFilters.deptid.value = this.peopledeptid;
    }
    //获取所有下拉框数据(字典)
    this.getDictItems("comlevel");
    this.getDictItems("comattribute");
    this.getDictItems("comtype");
  },
  methods: {
    /**Split 开始 */
    changeTreeWidth(widthVal) {
      // 初始化树的宽度
      this.leftSplitWidth = Math.ceil(widthVal / this.$refs.elMain.$el.clientWidth * 100);
      this.rightSplitWidth = 100 - (this.leftSplitWidth)
    },
    /**Split 结束 */
    getDictItems(typeName) {
      //--数据字典--
      this.$api.dict.findByLableName(typeName).then((response) => {
        this[typeName + "options"] = response.data; // 把获取到的数据赋给this.data
      }).catch((error) => {
        this[typeName + "options"] = [];
      })
    },
    //--left tree begin-------
    findLeftTreeData: function () {
      // 获取数据
      this.$api.dept.findTree().then((res) => {
        this.treeDataRecursion(res.data, 2);
        this.ztreeNodes = res.data;
      });
      this.$api.dept.findTree().then(res => {
        this.ztreeNodes = res.data;
      });
    },
    //树过滤五级机构递归
    treeDataRecursion(data, num, one) {
      data = data || this.ztreeNodes;
      one = one || 0;
      one++;
      for (let i = 0; i < data.length; i++) {
        if (data[i].comlevel == 5 && (data[i].managementSource != num)) {
          data.splice(i, 1);
          i = i - 1;
        } else {
          this.treeDataRecursion(data[i].children, num, one);
        }
      }
    },
    onZTreeCreated: function (ztreeObj) {
      this.ztreeObj = ztreeObj;
      // onCreated 中操作ztreeObj对象展开第一个节点
      ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
      this.currentTreeNode = ztreeObj.getNodes()[0];
    },
    onZTreeClick: function (evt, treeId, treeNode) {
      // 点击事件
      this.currentTreeNode = treeNode;
      this.pageRequest.columnFilters.deptid.value = this.currentTreeNode.id;
      this.findPage();
    },
    //--left tree start-------

    // 查询Start
    queryInfo(val) {
      this.pageRequest.columnFilters.retailtype.value = this.queryFrom.retailtype;
      this.pageRequest.pageNum = 1;
      this.findPage();
    },
    // 查询End


    // 右侧工具方法Start
    handleAddButton() {
      if (this.currentTreeNode == null) {
        return this.$message.info("请选择门店下团队");
      }
      this.activeTabs = 'first'
      // 查询机构信息
      this.$api.dept.getDeptById(this.currentTreeNode.id).then(res => {
        if ((res.data.deptType == 'D') && (res.data.id.indexOf('M') >= 0)) {
          this.$api.dept.getDeptById(res.data.parentId).then(result => {
            this.deptInfo = result.data;
            this.deptInfo.teamid = res.data.id;
            this.deptInfo.teamname = res.data.name;
            this.dialogVisible = true;
          })
        } else {
          return this.$message.info("请选择门店下团队");
        }
      })
    },
    handleDialogBefore(done) {
      // 退出对话框之前确认提示
      var that = this;
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },

    // 右侧列表的方法Start
    findPage(data) {
      // 获取分页数据
      if (data && data.pageRequest) {
        this.pageRequest.pageNum = data.pageRequest.pageNum;
        this.pageRequest.pageSize = data.pageRequest.pageSize;
      }
      this.$api.retail.findPage(this.pageRequest).then((res) => {
        this.pageResult = res.data;
      }).then(data != null ? data.callback : '')
    },
    //编辑
    handleTableEdit(data) {
      let dataObj = Object.assign({}, data.row)
      console.log(dataObj)
      var deptid = dataObj.deptid.split('D')[0];
      this.$api.dept.getDeptById(deptid).then(res => {
        if (res.code = 200) {
          this.deptInfo = res.data;
          this.deptInfo.teamid = dataObj.deptid;
          this.deptInfo.teamname = dataObj.deptname;
          this.distributionForm = dataObj;
          // this.distributionForm.paytype = data.row.paytype.split(',');
          this.retailSettingForm = [];
          for (let i = 0; i < dataObj.retailtype; i++) {
            this.retailSettingForm.push({
              retailLevel: (i + 1),
              retailRate: dataObj['disrate' + (i + 1)]
            })
          }
          this.dialogVisible = true;
        } else {
          this.$message.info("加载失败");
        }

      })
      return;
    },
    // 批量删除人员
    handleTableBatchDelete(data) {
    },
    // 删除单个人员
    handleTableDeleteFlag(data) {
      this.$api.retail.retailIdDelete(data.row.id).then((res) => {
        if (res.code == '200') {
          this.findPage();
          this.$message({
            type: 'success',
            message: res.msg,
          });
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          });
        }
      });
    },
    // 右侧列表的方法End
    // 新增或修改的弹出框Start
    closeDialog() {
      // 清空数据
      this.deptInfo = {};
      this.retailSettingForm = [];

      this.distributionForm.id = "";
      this.distributionForm.retailtype = "";
      this.distributionForm.disrate1 = 0;
      this.distributionForm.disrate2 = 0;
      this.distributionForm.disrate3 = 0;
      // this.distributionForm.display='';
      // this.distributionForm.usergroup='';
      // this.distributionForm.status='';
      // this.distributionForm.paytype=[];
      // this.distributionForm.minamount=1;
      // this.distributionForm.maxamount=1000;
      // this.distributionForm.commission=0;
      this.distributionForm.creator = '';
      this.distributionForm.createtime = '';
    },
    // 提交
    submitForm() {

    },

    // 新增或修改的弹出框End

    //新增分销Start
    retailtypeChange(e) {
      //修改分销模式
      this.retailSettingForm = [];
      for (let i = 0; i < e; i++) {
        this.retailSettingForm.push({
          retailLevel: (i + 1),
          retailRate: 0
        })
      }
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      //合并单元格
      if (columnIndex === 2) {
        let _row_1 = 0;
        if (rowIndex === 0) {
          _row_1 = this.retailSettingForm.length;
        } else {
          _row_1 = 0;
        }
        const _col_1 = _row_1 > 0 ? 1 : 0; //如果被合并了_row=0则它这个列需要取消
        return {
          rowspan: _row_1,
          colspan: _col_1
        }
      }
    },
    comfirmRetail() {
      if (this.distributionForm.retailtype == '') {
        return this.$message.info("请选择分销方式");
      }
      // if(this.distributionForm.display=''){
      //   return this.$message.info("请选择是否显示佣金");
      // }]
      // if(this.distributionForm.paytype.length==0){
      //    return this.$message.info("请选择提现方式");
      // }

      let param = {};
      Object.assign(param, this.distributionForm);
      param.deptid = this.deptInfo.teamid;
      param.deptname = this.deptInfo.teamname;
      // param.paytype = param.paytype.toString();

      param.disrate1 = '';
      param.disrate2 = '';
      param.disrate3 = '';

      for (let i = 0; i < this.retailSettingForm.length; i++) {
        param['disrate' + this.retailSettingForm[i].retailLevel] = this.retailSettingForm[i].retailRate;
      }

      this.$api.retail.saveRetail(param).then(res => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.findPage()
          this.dialogVisible = false;
        } else {
          this.$message.info("操作失败 " + res.msg);
        }

      }).catch(err => {
        this.$message.error("操作失败")
      })
      // 新增分销End
      this.$api.retail.saveRetail(param).then(res => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.findPage()
          this.dialogVisible = false;
        } else {
          this.$message.info("操作失败 " + res.msg);
        }

      }).catch(err => {
        this.$message.error("操作失败")
      })
    }
    // 新增分销End


  }
}
</script>

<style scoped>
.el-divider--horizontal {
  margin: 4px 0;
}

/* 顶部查询条件样式Start */
.queryFrom .el-row {
  margin: 10px 0px;
}

.queryFrom .el-form-item {
  margin-bottom: 0px;
}

.queryFrom .queryButton .el-form-item__content {
  margin-left: 0px !important;
}

/* 顶部查询条件样式End */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>