From 32107ca1dd2c3930dcedf768e3dff163ff3bca35 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期四, 09 二月 2023 11:56:29 +0800
Subject: [PATCH] 封装选择部门组件
---
src/views/operate/car/myIndex/create/law/index.vue | 73 +++++++-----------
src/components/departTree/index.vue | 69 +++++++++++++++++
src/views/operate/car/myIndex/edit/law/index.vue | 72 ++++-------------
3 files changed, 116 insertions(+), 98 deletions(-)
diff --git a/src/components/departTree/index.vue b/src/components/departTree/index.vue
new file mode 100644
index 0000000..945b376
--- /dev/null
+++ b/src/components/departTree/index.vue
@@ -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>
diff --git a/src/views/operate/car/myIndex/create/law/index.vue b/src/views/operate/car/myIndex/create/law/index.vue
index ce78597..37cd9e4 100644
--- a/src/views/operate/car/myIndex/create/law/index.vue
+++ b/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;
- // 鑾峰彇褰撳墠閫夋嫨鐨刬d鍦ㄦ暟缁勪腑鐨勭储寮�
- const indexs = this.selectOrg.orgsid.indexOf(data.id);
- // 濡傛灉涓嶅瓨鍦ㄦ暟缁勪腑锛屽苟涓旀暟缁勪腑宸茬粡鏈変竴涓猧d骞朵笖checked涓簍rue鐨勬椂鍊欙紝浠ｈ〃涓嶈兘鍐嶆閫夋嫨銆�
- 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 = "";
}
},
},
diff --git a/src/views/operate/car/myIndex/edit/law/index.vue b/src/views/operate/car/myIndex/edit/law/index.vue
index 2d89a18..2f42531 100644
--- a/src/views/operate/car/myIndex/edit/law/index.vue
+++ b/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;
- // 鑾峰彇褰撳墠閫夋嫨鐨刬d鍦ㄦ暟缁勪腑鐨勭储寮�
- const indexs = this.selectOrg.orgsid.indexOf(data.id);
- // 濡傛灉涓嶅瓨鍦ㄦ暟缁勪腑锛屽苟涓旀暟缁勪腑宸茬粡鏈変竴涓猧d骞朵笖checked涓簍rue鐨勬椂鍊欙紝浠ｈ〃涓嶈兘鍐嶆閫夋嫨銆�
- 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"],
--
Gitblit v1.8.0