渠道管理左侧结构树

src/http/moudules/dept.js

@@ -147,8 +147,8 @@ export const deleteDept = (id) => {
 export const insureCompany = (data) => {
     return axios({
         url: '/tax/manager/insureCompany',
-        method: 'get',
-        params:data
+        method: 'post',
+        data
     })
 }
 // 获取公司树结构

src/http/moudules/sys.js

@@ -381,4 +381,20 @@ export const sysChannelCostSettle = (data) => {
         method: 'post',
         data
     })
+}
+
+
+export const queryRelation = (data) => {
+    return axios({
+        url: '/sysChannelGrade/queryRelation',
+        method: 'post',
+        data
+    })
+}
+
+export const deleteAuth = (params) => {
+    return axios({
+        url: 'sysChannelGrade/deleteAuth' + params,
+        method: 'delete',
+    })
 }

src/views/Sys/ChannelGrouping.vue

@@ -1,358 +1,488 @@
 <template>
-    <div>
-        <templateTable :formList="formList" :searchData.sync="searchData" :tableConfig="tableConfig" :data="tableData"
-            @getList="getList" :btnGroup="btnGroup" @handleSearchList="handleSearchList" :pagination="page">
-        </templateTable>
-        <el-dialog :title="dialogTitle" width="25%" :visible.sync="dialogVisibleadd">
-            <div class="flex" style="line-height: 50px;">
-                <span>渠道分组名称：</span>
-                <el-input size="small" style="width:220px" v-model="name" placeholder="请输入渠道分组名称"></el-input>
-            </div>
-            <span slot="footer" class="dialog-footer">
-                <el-button size="small" @click="dialogVisibleadd = false">取 消</el-button>
-                <el-button type="primary" size="small" @click="sumbit">确 定</el-button>
-            </span>
-        </el-dialog>
-        <el-dialog title="授权机构" width="45%" :visible.sync="dialogVisible">
-            <el-row :gutter="20">
-                <el-col :span="12">
-                    <div >
-                       <span>工号：</span> <el-input clearable style="width: 220px;" placeholder="请输入工号" size="small" v-model="treeSeachId">
-                        </el-input>
-                    </div>
-                    <div style="margin: 10px 0;">
-                        <span>名称：</span><el-input clearable style="width: 220px;" size="small" placeholder="请输入六级机构名称" v-model="treeSeachname">
-                        </el-input>
-                        <el-button type="primary" size="small" @click="seachTree">搜索</el-button>
-                    </div>
-                    <div  style="height: 480px;overflow-y: auto;">
-                    <el-tree ref="tree" :data="treedata" accordion :props="defaultProps" show-checkbox node-key="id"
-                        :default-checked-keys="treekeys" @check-change="treechange" :default-expand-all="expandshow"
-                        class="stafftree">
-                    </el-tree>
-                </div>
+  <div>
+    <templateTable
+      :formList="formList"
+      :searchData.sync="searchData"
+      :tableConfig="tableConfig"
+      :data="tableData"
+      @getList="getList"
+      :btnGroup="btnGroup"
+      @handleSearchList="handleSearchList"
+      :pagination="page"
+    >
+    </templateTable>
+    <el-dialog
+      :title="dialogTitle"
+      width="25%"
+      :visible.sync="dialogVisibleadd"
+    >
+      <div class="flex" style="line-height: 50px">
+        <span>渠道分组名称：</span>
+        <el-input
+          size="small"
+          style="width: 220px"
+          v-model="name"
+          placeholder="请输入渠道分组名称(字母+数字)"
+        ></el-input>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="dialogVisibleadd = false"
+          >取 消</el-button
+        >
+        <el-button type="primary" size="small" @click="sumbit">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="授权机构" width="55%" :visible.sync="dialogVisible">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <div>
+            <span>工号：</span>
+            <el-input
+              clearable
+              style="width: 220px"
+              placeholder="请输入工号"
+              size="small"
+              v-model="treeSeachId"
+            >
+            </el-input>
+          </div>
+          <div style="margin: 10px 0">
+            <span>名称：</span
+            ><el-input
+              clearable
+              style="width: 220px"
+              size="small"
+              placeholder="请输入五级机构名称"
+              v-model="treeSeachname"
+            >
+            </el-input>
+            <el-button type="primary" size="small" @click="seachTree"
+              >搜索</el-button
+            >
+          </div>
+          <div style="height: 480px; overflow-y: auto">
+            <el-tree
+              ref="tree"
+              :data="treedata"
+              accordion
+              :props="defaultProps"
+              show-checkbox
+              node-key="id"
+              :default-checked-keys="treekeys"
+              @check-change="treechange"
+              :default-expand-all="expandshow"
+              class="stafftree"
+            >
+            </el-tree>
+          </div>
+        </el-col>
+        <el-col :span="11" :offset="1" style="height: 500px; ">
+          <div>
+            <span>工号：</span>
+            <el-input
+              clearable
+              style="width: 220px"
+              placeholder="请输入已选机构工号"
+              size="small"
+              v-model="selectId"
+            >
+            </el-input>
+          </div>
+          <div style="margin: 10px 0">
+            <span>名称：</span
+            ><el-input
+              clearable
+              style="width: 220px"
+              size="small"
+              placeholder="请输入已选机构名称"
+              v-model="selectName"
+            >
+            </el-input>
+            <el-button type="primary" size="small" @click="seachSelect"
+              >搜索</el-button
+            >
+          </div>
+          <h4>已选中机构名称</h4>
+          <!-- <div v-for="val in treedatatransfer" :key="val.id">
+            <p>{{ val }} </p>
+          </div> -->
+          <div style="height: 460px; overflow-y: auto">
 
-                </el-col>
-                <el-col :span="11" :offset="1" style="height: 500px;overflow-y: auto;">
-                    <h4>已选中机构名称</h4>
-                    <div v-for="val in treedatatransfer" :key="val.id">
-                        <p>{{ val }}</p>
-                    </div>
-                </el-col>
-            </el-row>
-            <span slot="footer" class="dialog-footer">
-                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
-                <el-button type="primary" size="small" @click="sumbitInstitution">确 定</el-button>
-            </span>
-        </el-dialog>
-    </div>
+         
+          <div
+            v-for="(item,index) in treedatatransfer"
+            :key="item.id"
+            style="
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+            "
+          >
+            <p>{{ item.name }}</p>
+            <p>{{ item.areaId }}</p>
+            <el-button
+              class="delete"
+              type="danger"
+              icon="el-icon-delete"
+              size="mini"
+              circle
+              @click="deleteDept(item,index)"
+            ></el-button>
+          </div>
+        </div>
+        </el-col>
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="dialogVisible = false,dept = []">取 消</el-button>
+        <el-button type="primary" size="small" @click="sumbitInstitution"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
 </template>
 <script>
 import templateTable from "@/components/TemplateTable/index.vue";
 import templateForm from "@/components/TemplateForm/index.vue";
 
 export default {
-    name: "policyImport",
-    components: { templateTable, templateForm },
-    watch: {
-        filterText(val) {
-            this.$refs.tree.filter(val);
-        }
+  name: "policyImport",
+  components: { templateTable, templateForm },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
     },
-    data() {
-        return {
-            treedatatransfer: [],
-            dept: [],
-            name: '',
-            dialogTitle: '新增',
-            rowId: '',
-            dialogVisible: false,
-            dialogVisibleadd: false,
-            labelWidth: '100px',
-            btnGroup: [
-                {
-                    name: '新增',
-                    click: () => this.add()
-                }
-            ],
-            formList: [
-                {
-                    label: "渠道分组名称",
-                    prop: "name",
-                    type: "input",
-                },
-
-            ],
-            searchData: {},
-            page: {
-                pageNum: 1,
-                pageSize: 20,
-                totalSize: 0
+  },
+  data() {
+    return {
+      selectParent: "",
+      selectId: "",
+      selectName: "",
+      treedatatransfer: [],
+      dept: [],
+      name: "",
+      dialogTitle: "新增",
+      rowId: "",
+      dialogVisible: false,
+      dialogVisibleadd: false,
+      labelWidth: "100px",
+      btnGroup: [
+        {
+          name: "新增",
+          click: () => this.add(),
+        },
+      ],
+      formList: [
+        {
+          label: "渠道分组名称",
+          prop: "name",
+          type: "input",
+        },
+      ],
+      searchData: {},
+      page: {
+        pageNum: 1,
+        pageSize: 20,
+        totalSize: 0,
+      },
+      tableData: [],
+      tableConfig: {
+        columns: [
+          {
+            prop: "name",
+            label: "渠道分组名称",
+            type: "text",
+          },
+          {
+            prop: "createTime",
+            label: "创建时间",
+            type: "text",
+          },
+          {
+            prop: "createBy",
+            label: "操作人",
+            type: "text",
+          },
+        ],
+        loading: true,
+        isPaginationShow: true,
+        optBtns: [
+          {
+            type: "primary",
+            label: "授权机构",
+            click: (row, index) => {
+              return this.uthorizedAgency(row);
             },
-            tableData: [],
-            tableConfig: {
-                columns: [
-                    {
-                        prop: "name",
-                        label: "渠道分组名称",
-                        type: "text"
-                    },
-                    {
-                        prop: "createTime",
-                        label: "创建时间",
-                        type: "text"
-                    },
-                    {
-                        prop: "createBy",
-                        label: "操作人",
-                        type: "text"
-                    },
-                ],
-                loading: true,
-                isPaginationShow: true,
-                optBtns: [
-                    {
-                        type: "primary",
-                        label: "授权机构",
-                        click: (row, index) => {
-                            return this.uthorizedAgency(row)
-                        },
-                    },
-                    {
-                        type: "primary",
-                        label: "修改",
-                        click: (row, index) => {
-                            return this.handleTableUpload(row);
-                        },
-                    },
-                    {
-                        type: "primary",
-                        label: "删除",
-                        click: (row, index) => {
-                            return this.handleTableDatl(row);
-                        },
-                    },
-
-                ],
+          },
+          {
+            type: "primary",
+            label: "修改",
+            click: (row, index) => {
+              return this.handleTableUpload(row);
             },
-            treedata: [], //授权结构树
-            defaultProps: {
-                //自定义参数
-                children: "children",
-                label: "name",
+          },
+          {
+            type: "primary",
+            label: "删除",
+            click: (row, index) => {
+              return this.handleTableDatl(row);
             },
-            treekeys: [],
-            expandshow: false,
-            treeSeachId: '',
-            treeSeachname: '',
-        };
+          },
+        ],
+      },
+      treedata: [], //授权结构树
+      defaultProps: {
+        //自定义参数
+        children: "children",
+        label: "name",
+      },
+      treekeys: [],
+      expandshow: false,
+      treeSeachId: "",
+      treeSeachname: "",
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    seachSelect() {
+      let data = {};
+      data.gradeId = this.rowId;
+      data.name = this.selectName;
+      data.id = this.selectId;
+      this.$api.sys.queryRelation(data).then((res) => {
+        if (res.code == 200 && res.data.length > 0) {
+          this.dialogVisible = true;
+          setTimeout(() => {
+            // this.dept = res.data;
+            this.treedatatransfer = res.data;
+            this.$refs.tree.setCheckedKeys(res.data);
+          }, 500);
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
     },
-    created() {
-        this.getList();
+    //删除右侧已选项
+    deleteDept(dept,index) {
+      this.treedatatransfer = this.treedatatransfer.filter(
+        (item) => item.areaId !== dept.areaId
+      )
       
+      this.dept = this.dept.filter((item) => item !== dept.areaId);
+    },
+    treeListFun(data) {
+      this.$api.dept.queryTreeList(data).then((res) => {
+        this.treedata = res.data;
+        this.setDisabled(this.treedata);
+      });
     },
-    methods: {
-        treeListFun(data){
-            this.$api.dept.queryTreeList(data).then((res) => {
-            this.treedata = res.data;
-            this.setDisabled(this.treedata)
+    seachTree() {
+      let data = {
+        id: this.treeSeachId,
+        name: this.treeSeachname,
+      };
+      this.treeListFun(data);
+    },
+    getNodeLabelById(id) {
+      let label = null;
+      const findNode = (nodes) => {
+        nodes.forEach((node) => {
+          if (node.id === id) {
+            label = node.name;
+            return;
+          }
+          if (node.children && node.children.length > 0) {
+            findNode(node.children);
+          }
         });
-        },
-        seachTree(){
-            let data={
-                id:this.treeSeachId,
-                name:this.treeSeachname
-            }
-            this.treeListFun(data)
-        },
-        getNodeLabelById(id) {
-            let label = null;
-            const findNode = (nodes) => {
-                nodes.forEach(node => {
-                    if (node.id === id) {
-                        label = node.name;
-                        return;
-                    }
-                    if (node.children && node.children.length > 0) {
-                        findNode(node.children);
-                    }
-                });
-            };
-            findNode(this.treedata);
-            return label;
-        },
-        uthorizedAgency(row) {
-            this.treeListFun({
-                "id": "",
-                "name": "",
-            })
-            this.rowId = row.id
-            this.treedatatransfer = []
-            this.treeSeachId=""
-            this.treeSeachname=""
-            this.$api.sys
-                .queryRelationList(row.id)
-                .then(res => {
-                    if (res.code == 200) {
-                        this.dialogVisible = true
-                        setTimeout(() => {
-                            this.dept = res.data
-                            this.$refs.tree.setCheckedKeys(res.data);
-                            res.data.forEach(e => {
-                                    this.treedatatransfer.push(this.getNodeLabelById(e))
-                            })
-                        }, 500)
+      };
+      findNode(this.treedata);
+      return label;
+    },
+    uthorizedAgency(row) {
+        this.selectId = ''
+        this.selectName = ''
+      this.treeListFun({
+        id: "",
+        name: "",
+      });
+      this.rowId = row.id;
+      
+      this.treedatatransfer = [];
+      this.treeSeachId = "";
+      this.treeSeachname = "";
+      let data = {};
+      data.gradeId = row.id;
+      this.$api.sys.queryRelation(data).then((res) => {
+        this.dept = []
+        if (res.code == 200) {
+          this.dialogVisible = true;
+          setTimeout(() => {
+            this.treedatatransfer = res.data;
 
-                    } else {
-                        this.$message.error(res.msg);
-                    }
-                });
-        },
+            res.data.forEach((e) => {
+              this.dept.push(e.areaId);
+              
+            });
+          }, 500);
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
+    },
 
-        //获取选中节点
-        treechange(item, node, self) {
-            if (item.children.length == 0) {
-                if (node === true) {
-                    this.dept.push(item.id)
-                    this.treedatatransfer.push(item.name)
+    //获取选中节点
+    treechange(item, node, self) {
+      if (item.children.length == 0) {
+        if (node === true) {
+          this.dept.push(item.id);
+          this.treedatatransfer.push({ name: item.name, areaId: item.id });
+        } else {
+          let index = this.dept.indexOf(
+            this.dept.filter((e) => e == item.id)[0]
+          );
+          let name = this.treedatatransfer.indexOf(
+            this.treedatatransfer.filter((e) => e == item.name)[0]
+          );
+          if (index !== -1) {
+            this.dept.splice(index, 1);
+            this.treedatatransfer.splice(name, 1);
+          }
+        }
+      }
+    },
+    //  向有children的节点上增加disabled属性
+    setDisabled(treeData) {
+      if (treeData) {
+        treeData.forEach((item) => {
+          if (
+            !item.deptType ||
+            item.deptType !== "D" ||
+            !item.id.includes("M")
+          ) {
+            item.disabled = true;
+            this.setDisabled(item.children);
+          }
+        });
+      }
+    },
+    // 查询
+    handleSearchList(data) {
+      this.getList(data);
+    },
+    add() {
+      this.name = "";
+      this.dialogVisibleadd = true;
+      this.dialogTitle = "新增";
+    },
+    handleTableDatl(row) {
+      this.$confirm("确认删除该条数据吗?", "提示", {
+        type: "warning",
+      }).then(() => {
+        this.$api.sys.sysChannelGradeDelete(row.id).then((res) => {
+          if (res.code == 200) {
+            this.getList();
+          } else {
+            this.$message.error(res.msg);
+          }
+        });
+      });
+    },
+    sumbit() {
+      let reg = /^[^\u4e00-\u9fa5]+$/; //正则匹配不包含汉字
+      if (this.name) {
+        if (reg.test(this.name)) {
+          if (this.dialogTitle == "新增") {
+            this.$api.sys
+              .sysChannelGradeGrade({ name: this.name })
+              .then((res) => {
+                if (res.code == 200) {
+                  this.getList();
+                  this.dialogVisibleadd = false;
                 } else {
-                    let index = this.dept.indexOf(this.dept.filter(e => e == item.id)[0]);
-                    let name = this.treedatatransfer.indexOf(this.treedatatransfer.filter(e => e == item.name)[0]);
-                    if (index !== -1) {
-                        this.dept.splice(index, 1);
-                        this.treedatatransfer.splice(name, 1);
-                    }
+                  this.$message.error(res.msg);
                 }
-            }
-
-        },
-        //  向有children的节点上增加disabled属性
-        setDisabled(treeData) {
-            if (treeData) {
-                treeData.forEach(item => {
-                    if (!item.deptType || item.deptType !== 'D' || !item.id.includes('M')) {
-                        item.disabled = true
-                        this.setDisabled(item.children)
-                    }
-                })
-            }
-
-        },
-        // 查询
-        handleSearchList(data) {
-            this.getList(data);
-        },
-        add() {
-            this.name=''
-            this.dialogVisibleadd = true
-            this.dialogTitle = '新增'
-        },
-        handleTableDatl(row) {
-            this.$confirm("确认删除该条数据吗?", "提示", {
-                type: "warning",
-            })
-                .then(() => {
-                    this.$api.sys
-                        .sysChannelGradeDelete(row.id)
-                        .then(res => {
-                            if (res.code == 200) {
-                                this.getList();
-
-                            } else {
-                                this.$message.error(res.msg);
-                            }
-                        });
-                })
-        },
-        sumbit() {
-            if (this.name) {
-                if (this.dialogTitle == '新增') {
-                    this.$api.sys
-                        .sysChannelGradeGrade({ name: this.name })
-                        .then(res => {
-                            if (res.code == 200) {
-                                this.getList();
-                                this.dialogVisibleadd = false
-                            } else {
-                                this.$message.error(res.msg);
-                            }
-                        });
-                }
-                else {
-                    this.$api.sys
-                        .sysChannelGradeUp(this.rowId, { name: this.name })
-                        .then(res => {
-                            if (res.code == 200) {
-                                this.getList();
-                                this.dialogVisibleadd = false
-
-                            } else {
-                                this.$message.error(res.msg);
-                            }
-                        });
+              });
+          } else {
+            this.$api.sys
+              .sysChannelGradeUp(this.rowId, { name: this.name })
+              .then((res) => {
+                if (res.code == 200) {
+                  this.getList();
+                  this.dialogVisibleadd = false;
+                } else {
+                  this.$message.error(res.msg);
                 }
+              });
+          }
+        } else {
+          this.$message.error("渠道分组名称为英文字母+数字");
+          return;
+        }
+      } else {
+        this.$message({
+          message: "请输入渠道分组名称!",
+          type: "warning",
+        });
+      }
+    },
+    //列表数据
+    getList(data) {
+      this.tableConfig.loading = true;
+      this.$api.sys
+        .sysChannelGradePage({ ...data, ...this.page })
+        .then((res) => {
+          if (res.code == 200) {
+            this.tableData = res.data.content;
+            this.page.pageNum = res.data.pageNum;
+            this.page.pageSize = res.data.pageSize;
+            this.page.totalSize = res.data.totalSize;
+            this.tableConfig.loading = false;
+          } else {
+            this.tableData = [];
+            this.$message.error(res.msg);
+            this.page.totalSize = 0;
+            this.tableConfig.loading = false;
+          }
+        });
+    },
+    sumbitInstitution() {
+        this.$api.sys
+          .sysChannelauthorized({ areaIdList: this.dept, id: this.rowId })
+          .then((res) => {
+            if (res.code == 200) {
+              this.getList();
+              this.dialogVisible = false;
+        this.dept = []
+            } else {
+              this.$message.error(res.msg);
             }
-            else {
-                this.$message({
-                    message: '请输入渠道分组名称!',
-                    type: 'warning'
-                });
-            }
-        },
-        //列表数据
-        getList(data) {
-            this.tableConfig.loading = true;
-            this.$api.sys
-                .sysChannelGradePage({ ...data, ...this.page })
-                .then(res => {
-                    if (res.code == 200) {
-                        this.tableData = res.data.content;
-                        this.page.pageNum = res.data.pageNum;
-                        this.page.pageSize = res.data.pageSize;
-                        this.page.totalSize = res.data.totalSize;
-                        this.tableConfig.loading = false;
-                    } else {
-                        this.tableData = [];
-                        this.$message.error(res.msg);
-                        this.page.totalSize = 0;
-                        this.tableConfig.loading = false;
-                    }
-                });
-        },
-        sumbitInstitution() {
-            this.$api.sys
-                .sysChannelauthorized({ areaIdList: this.dept, id: this.rowId })
-                .then(res => {
-                    if (res.code == 200) {
-                        this.getList();
-                        this.dialogVisible = false
-
-                    } else {
-                        this.$message.error(res.msg);
-                    }
-                });
-
-        },
-        handleTableUpload(row) {
-            this.name = row.name
-            this.rowId = row.id
-            this.dialogTitle = '编辑'
-            this.dialogVisibleadd = true
-        },
-    }
+          });
+    },
+    handleTableUpload(row) {
+      this.name = row.name;
+      this.rowId = row.id;
+      this.dialogTitle = "编辑";
+      this.dialogVisibleadd = true;
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
 /deep/ {
-    .stafftree {
-
-        // 不可全选样式
-        .el-tree-node {
-            .el-checkbox__input.is-disabled {
-                display: none;
-            }
-        }
-
+  .stafftree {
+    // 不可全选样式
+    .el-tree-node {
+      .el-checkbox__input.is-disabled {
+        display: none;
+      }
     }
+  }
+  .delete {
+    width: 30px;
+    height: 30px;
+  }
 }
 </style>