封装选择部门组件

zhanghua

2023-02-09 32107ca1dd2c3930dcedf768e3dff163ff3bca35

封装选择部门组件

 src/components/departTree/index.vue

New file
@@ -0,0 +1,69 @@
<template>
  <el-select v-model="model.departName" placeholder="请选择所属部门">
    <el-option value="1">
      <el-tree
        ref="tree"
        :check-strictly="true"
        :data="departList"
        :props="defaultProps"
        :default-checked-keys="selectIds"
        show-checkbox
        @check-change="handleCheck"
        @node-click="nodeClick"
        default-expand-all
        node-key="id"
      >
      </el-tree>
    </el-option>
  </el-select>
</template>
<script>
export default {
  data() {
    return {
      model: {
        departId: 0,
        departName: "",
      },
      selectIds: [],
      departList: [],
      defaultProps: {
        children: "children",
        label: "departName",
      },
    };
  },
  created() {
    // 获取全部部门列表
    this.$axios.get("/sccg/depart/tree").then((res) => {
      this.departList = res.data;
      if (this.depart) {
        this.model.departId = this.depart.departId;
        this.model.departName = this.depart.departName;
        this.selectIds = [this.depart.departId];
      }
    });
  },
  methods: {
    nodeClick(data, checked) {
      this.checkedId = data.comcode;
      this.$refs.tree.setCheckedNodes([data]);
      this.model.departId = data.id;
      this.model.departName = data.departName;
    },
    handleCheck(data, checked) {
      if (checked == true) {
        this.checkedId = data.comcode;
        this.$refs.tree.setCheckedNodes([data]);
        this.model.departId = data.id;
        this.model.departName = data.departName;
        this.$emit("selectDepart", this.model);
      }
    },
  },

  props: ["depart"],
};
</script>
<style lang="scss" scoped>
</style>

 src/views/operate/car/myIndex/create/law/index.vue

@@ -20,21 +20,7 @@
          <!-- 所属部门 -->
          <el-form-item class="optionItems" label="所属部门:" prop="departId">
            <!-- <el-input v-model="car.depart" placeholder="请填写所属部门"></el-input> -->
            <el-select v-model="car.departName" placeholder="请选择所属部门">
              <el-option value="1">
                <el-tree
                  ref="tree"
                  :check-strictly="true"
                  :data="departList"
                  :props="defaultProps"
                  show-checkbox
                  @check-change="handleCheck"
                  default-expand-all
                  node-key="id"
                >
                </el-tree>
              </el-option>
            </el-select>
            <departTree @selectDepart="selectDepart"></departTree>
          </el-form-item>
          <!-- 车主姓名 -->
          <el-form-item class="optionItem" label="车主姓名:" prop="ownerName">
@@ -74,7 +60,11 @@
</template>
<script>
import { validateCarNum, validatePhone, validateName } from "@/utils/validate";
import departTree from "@/components/departTree/index.vue";
export default {
  components: {
    departTree,
  },
  data() {
    const checkCarNum = (rule, value, callback) => {
      if (value) {
@@ -98,9 +88,9 @@
        callback(new Error("车主姓名不能为空"));
      }
    };
    const checkDepartId = (rule, value, callback) => {      
    const checkDepartId = (rule, value, callback) => {
      if (value) {
          callback();
        callback();
      } else {
        callback(new Error("车辆使用的部门不能为空"));
      }
@@ -183,12 +173,7 @@
      },
    };
  },
  created() {
    // 获取全部部门列表
    this.$axios.get("/sccg/depart/tree").then((res) => {
      this.departList = res.data;
    });
  },
  created() {},
  methods: {
    // 添加车辆
    handleCar() {
@@ -221,34 +206,32 @@
    handleStop() {
      this.$emit("closeDialog", { flag: false, index: 0 });
    },
    // 部门修改
    handleCheck(data, checked) {
    selectDepart(depart) {
      if (depart) {
        this.car.departId = depart.departId;
        this.car.departName = depart.departName;
      }
    },
    nodeClick(data, checked) {
      this.checkedId = data.comcode;
      this.$refs.tree.setCheckedNodes([data]);
      this.car.departId = data.id;
      this.car.departName = data.departName;
      // 获取当前选择的id在数组中的索引
      const indexs = this.selectOrg.orgsid.indexOf(data.id);
      // 如果不存在数组中，并且数组中已经有一个id并且checked为true的时候，代表不能再次选择。
      if (indexs < 0 && this.selectOrg.orgsid.length === 1 && checked) {
        this.$message({
          message: "只能选择一个部门！",
          type: "warning",
          showClose: true,
        });
        // 设置已选择的节点为false 很重要
        this.$refs.tree.setChecked(data, false);
      } else if (this.selectOrg.orgsid.length === 0 && checked) {
        // 发现数组为空 并且是已选择
        // 防止数组有值，首先清空，再push
      this.selectOrg.orgsid = [];
      this.selectOrg.orgsid.push(data.id);
    },
    handleCheck(data, checked) {
      if (checked == true) {
        this.checkedId = data.comcode;
        this.$refs.tree.setCheckedNodes([data]);
        this.car.departId = data.id;
        this.car.departName = data.departName;
        this.selectOrg.orgsid = [];
        this.selectOrg.orgsid.push(data.id);
      } else if (
        indexs >= 0 &&
        this.selectOrg.orgsid.length === 1 &&
        !checked
      ) {
      } else {
        // 再次直接进行赋值为空操作
        this.selectOrg.orgsid = [];
        this.car.departName = "";
        this.user.departmentId = "";
      }
    },
  },

 src/views/operate/car/myIndex/edit/law/index.vue

@@ -19,22 +19,10 @@
          </el-form-item>
          <!-- 所属部门 -->
          <el-form-item class="optionItems" label="所属部门:" prop="departId">
            <!-- <el-input v-model="car.depart" placeholder="请填写所属部门"></el-input> -->
            <el-select v-model="car.departName" placeholder="请选择所属部门">
              <el-option value="1">
                <el-tree
                  ref="tree"
                  :check-strictly="true"
                  :data="departList"
                  :props="defaultProps"
                  show-checkbox
                  @check-change="handleCheck"
                  default-expand-all
                  node-key="id"
                >
                </el-tree>
              </el-option>
            </el-select>
            <departTree
              :depart="carDepart"
              @selectDepart="selectDepart"
            ></departTree>
          </el-form-item>
          <!-- 车主姓名 -->
          <el-form-item class="optionItem" label="车主姓名:" prop="ownerName">
@@ -71,7 +59,12 @@
</template>
<script>
import { validateCarNum, validatePhone, validateName } from "@/utils/validate";
import departTree from "@/components/departTree/index.vue";

export default {
  components: {
    departTree,
  },
  data() {
    const checkCarNum = (rule, value, callback) => {
      if (value) {
@@ -134,6 +127,7 @@
        departName: "",
        departId: 0,
      },
      carDepart: {},
      createCarRules: {
        departId: [
          {
@@ -182,14 +176,15 @@
    };
  },
  created() {
    const { getDepartTree } = this;
    // 初始化部门树
    getDepartTree();
    // 初始化数据
    this.car = JSON.parse(JSON.stringify(this.info));
    if (!this.car.departName) {
      this.car.departName = this.car.pdepartName;
    }
    this.carDepart = {
      departId: this.car.departId,
      departName: this.car.departName,
    };
  },
  methods: {
    // 修改执法车
@@ -222,41 +217,12 @@
        }
      });
    },
    // 部门修改
    handleCheck(data, checked) {
      this.car.departId = data.id;
      this.car.departName = data.departName;
      // 获取当前选择的id在数组中的索引
      const indexs = this.selectOrg.orgsid.indexOf(data.id);
      // 如果不存在数组中，并且数组中已经有一个id并且checked为true的时候，代表不能再次选择。
      if (indexs < 0 && this.selectOrg.orgsid.length === 1 && checked) {
        this.$message({
          message: "只能选择一个部门！",
          type: "warning",
          showClose: true,
        });
        // 设置已选择的节点为false 很重要
        this.$refs.tree.setChecked(data, false);
      } else if (this.selectOrg.orgsid.length === 0 && checked) {
        // 发现数组为空 并且是已选择
        // 防止数组有值，首先清空，再push
        this.selectOrg.orgsid = [];
        this.selectOrg.orgsid.push(data.id);
      } else if (
        indexs >= 0 &&
        this.selectOrg.orgsid.length === 1 &&
        !checked
      ) {
        // 再次直接进行赋值为空操作
        this.selectOrg.orgsid = [];
        this.car.departName = "";

    selectDepart(depart) {
      if (depart) {
        this.car.departId = depart.departId;
        this.car.departName = depart.departName;
      }
    },
    // 获取部门树
    getDepartTree() {
      this.$axios.get("/sccg/depart/tree").then((res) => {
        this.departList = res.data;
      });
    },
  },
  props: ["info", "closeDialog"],