计划类功能切换选择 具体机构组件

src/components/orgSelect/zl.orgSelect.vue

@@ -0,0 +1,738 @@
+<!--编写穿梭框的插件，左右都有很多搜索条件-->
+<template>
+  <div>
+    <div style="height:32px">
+      <div class="tags-box" :class="{'tags-box-disabled':!disabled,'tags-box-mini':size === 'mini'}" @click="showDialog">
+        <el-tag type="success" :size="size" v-for="v in currentTempList" :key="v.id">{{ v.shortName }}</el-tag>
+      </div>
+      <div  class="tags_last">
+        <span v-show="currentTempList.length > 0" class="tags-num">{{ currentTempList.length }}</span>
+        <i v-if="currentTempList.length > 0 && !disabled" class="el-icon-circle-close close-icon" @click.stop="clear"></i>        
+      </div>
+    </div>
+    <DialogCom
+      :title="title"
+      :visible.sync="visible"
+      width="80%"
+      top="10vh"
+      :close-on-click-modal="false"
+      append-to-body
+      @opened="open"
+      @closed="closed"
+    >
+      <el-row class="el-row-top">
+        <el-col :span="11">
+          <el-card class="box-card leftbox" :body-style="{ height: '100%' }">
+            <el-form
+              ref="formleft"
+              v-model="left.condition"
+              label-width="120px"
+              size="mini"
+              style="width: 95%"
+            >
+              <el-form-item label="上级机构：">
+                <tree-select
+                  v-model="left.condition.orgId"
+                  :searchable="searchable"
+                  :default-expand-level="level"
+                  :normalizer="tenantIdnormalizer"
+                  :options="treeList"
+                  :show-count="true"
+                  :props="{ checkStrictly: true, label: 'name' }"
+                  placeholder="请选择机构"
+                  clearValueText="清除"
+                  :noChildrenText="''"
+                  @select="leftTreeSelect"
+                  noOptionsText="没有数据"
+                  noResultsText="没有搜索结果"
+                />
+              </el-form-item>
+              <!--            <el-form-item >
+                            <el-checkbox v-model="left.condition.searchChild" @change="leftSearch">是否包含下级</el-checkbox>
+                          </el-form-item>-->
+              <el-form-item label="机构类型：">
+                <el-select
+                  prop="type"
+                  label="机构类型"
+                  v-model="left.condition.orgType"
+                  style="width: 100%"
+                  placeholder="请选择机构类型"
+                  @change="leftSearch"
+                  :disabled="left.condition.isleftOrgTypeDisabled"
+                  clearable
+                >
+                  <el-option
+                    v-for="dict in dict.type.sys_org_type"
+                    :key="dict.value"
+                    :label="dict.label"
+                    :value="dict.value"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="机构名称：">
+                <el-input
+                  v-model="left.condition.orgName"
+                  clearable
+                  @input="leftSearch"
+                ></el-input>
+              </el-form-item>
+            </el-form>
+            <el-row class="result_row">
+              <el-col :span="12">搜索结果</el-col>
+              <el-col :span="12" style="text-align: right"
+              >{{ left.selectedRows.length }}/{{ left.data.length }}
+              </el-col
+              >
+            </el-row>
+            <el-table
+              style="width: 100%"
+              height="calc(100% - 100px)"
+              :data="left.data"
+              @selection-change="handleLeftSelectionChange"
+            >
+              <el-table-column type="selection" width="55"></el-table-column>
+              <el-table-column prop="affiliatedArea" align="center" label="地区"></el-table-column>
+              <el-table-column prop="affiliatedBank" label="行社" align="center"></el-table-column>
+              <el-table-column prop="shortName" label="机构名称" align="center"></el-table-column>
+            </el-table>
+          </el-card>
+        </el-col>
+        <el-col :span="2">
+          <div class="controller">
+            <el-button type="primary" @click="handleAdd">添加 >></el-button>
+            <el-button class="remove" type="primary" @click="handleRemove">移除 <<</el-button>
+          </div>
+        </el-col>
+        <el-col :span="11">
+          <el-card class="box-card" :body-style="{ height: '100%' }">
+            <el-form
+              ref="formRight"
+              v-model="right.condition"
+              label-width="120px"
+              size="mini"
+              style="width: 95%"
+            >
+              <el-form-item label="组织机构：">
+                <tree-select
+                  v-model="right.condition.orgId"
+                  :searchable="searchable"
+                  :options="treeList"
+                  :default-expand-level="level"
+                  :normalizer="tenantIdnormalizer"
+                  :show-count="true"
+                  :props="{ checkStrictly: true, label: 'name' }"
+                  placeholder="请选择归属机构"
+                  clearValueText="清除"
+                  :noChildrenText="''"
+                  @select="rightTreeSelect"
+                  noOptionsText="没有数据"
+                  noResultsText="没有搜索结果"
+                />
+
+              </el-form-item>
+              <!--            <el-form-item >
+                            <el-checkbox v-model="right.condition.searchChild" @change="rightSearch">是否包含下级</el-checkbox>
+                          </el-form-item>-->
+              <el-form-item label="机构类型：">
+                <el-select
+                  prop="type"
+                  label="机构类型"
+                  v-model="right.condition.orgType"
+                  style="width: 100%"
+                  placeholder="请选择机构类型"
+                  @change="rightSearch"
+                  clearable
+                >
+                  <el-option
+                    v-for="dict in dict.type.sys_org_type"
+                    :key="dict.value"
+                    :label="dict.label"
+                    :value="dict.value"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="机构名称：">
+                <el-input
+                  v-model="right.condition.orgName"
+                  clearable
+                  @input="rightSearch"
+                ></el-input>
+              </el-form-item>
+            </el-form>
+            <el-row class="result_row">
+              <el-col :span="12">搜索结果</el-col>
+              <el-col :span="12" style="text-align: right"
+              >{{ right.selectedRows.length }}/{{ right.data.length }}
+              </el-col
+              >
+            </el-row>
+            <el-table
+              height="calc(100% - 100px)"
+              :data="right.data"
+              @selection-change="handleRightSelectionChange"
+            >
+              <el-table-column type="selection" width="55"></el-table-column>
+              <el-table-column prop="affiliatedArea" label="地区"></el-table-column>
+              <el-table-column prop="affiliatedBank" label="行社"></el-table-column>
+              <el-table-column prop="shortName" label="机构名称"></el-table-column>
+            </el-table>
+          </el-card>
+        </el-col>
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">关闭</el-button>
+      <el-button type="primary" @click="onOK">确定</el-button>
+    </span>
+    </DialogCom>
+  </div>
+</template>
+<script>
+import {selectOrgList} from "@/api/system/org.js";
+
+const defaultData = {
+  left: {
+    condition: {
+      orgId: null,
+      orgName: "",
+      orgType: null,
+      searchChild: false,
+      isleftOrgTypeDisabled:false,
+    },
+    total: 0,
+    selectedCount: 0,
+    selectedRows: [],
+    data: [],
+  },
+  right: {
+    condition: {
+      orgId: null,
+      orgName: "",
+      orgType: null,
+      searchChild: false,
+    },
+    total: 0,
+    selectedCount: 0,
+    selectedRows: [],
+    data: [],
+  },
+}
+export default {
+  name: "orgSelect",
+  dicts: ["sys_org_type"],
+  props: {
+    // orgList : {
+    //   type: Array,
+    //   default: new Array(),
+    // },
+    orgIds: {
+      type: Array,
+      default: new Array(),
+    },
+    limitOrgType:{
+      type: String,
+      default: null,
+    },
+    size: {
+      type: String,
+      default: 'small',
+    },
+    trigger: {
+      type: String,
+      default: 'click',
+    },    
+    //组件禁用
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+    customRequest: {
+      type: Function,
+    },
+    hangsheTree: {
+      type: Boolean,
+      default: false,
+    },
+    businessTree: {
+      type: Boolean,
+      default: false,
+    },
+    wholeTree: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  watch: {
+    // orgList: function (data) {
+    //   this.currentTempList = this.orgList;
+    // }
+    orgIds: function(data){
+      console.log("watch orgIds",data,this.left.condition)
+      this.orgTree();
+    },
+  },
+  data() {
+    return {
+      orgs: [],
+      title: "选择机构",
+      level: 1,
+      clearable: true,
+      searchable: true,
+      visible: false,
+      deviceType: null,
+      loading: false,
+      treeList: [],
+      deptOptions: [],
+      currentTempList: [],
+      boundOrgsClone: [],
+      left: {
+        condition: {
+          orgId: this.$store.getters.orgId,
+          deviceName: "",
+          searchChild: false,
+          isleftOrgTypeDisabled:false,
+        },
+        total: 0,
+        selectedCount: 0,
+        selectedRows: [],
+        data: [],
+      },
+      right: {
+        condition: {
+          orgId: this.$store.getters.orgId,
+          deviceName: "",
+          searchChild: false,
+        },
+        total: 0,
+        selectedCount: 0,
+        selectedRows: [],
+        data: [],
+      },
+      rightOrgIds: [],
+      boundOrgIds: [],
+      searchOrgs: [],
+
+    };
+  },
+  created() {
+    this.boundOrgsClone = [];
+  },
+  mounted() {
+    console.log("mounted orgIds",this.orgIds,this.limitOrgType,this.currentTempList,(this.currentTempList.length==0 && this.orgIds))
+    if((!this.currentTempList || this.currentTempList.length==0) && this.orgIds)
+    {
+      this.orgTree();
+    }
+    this.reSetLeftOrgType();    
+  },
+
+  methods: {
+    clear() {
+      this.currentTempList = [];
+      this.boundOrgsClone = [];
+      this.$emit("selectNode", []);
+      this.$emit("selectNodeId", []);
+    },
+
+    tenantIdnormalizer(node, instanceId) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.id,
+        label: node.shortName,
+        children: node.children,
+      };
+    },
+    orgTree() {
+      console.log("orgTree",22,this.left)
+      //获取所有机构列表
+      if(!this.orgs || this.orgs.length==0){
+        this.getAllOrgs();
+      }
+      this.initHistorySelectOrg();
+
+      if (this.customRequest) {
+        this.customRequest().then((response) => {
+          this.treeList = response.data;
+          return;
+        });
+      } else {
+        if (this.hangsheTree) {
+          this.treeList = this.$store.getters.depTree;
+        } else if (this.businessTree) {
+          this.treeList = this.$store.getters.businessTree;
+        } else if (this.wholeTree) {
+          this.treeList = this.$store.getters.wholeTree;
+        } else {
+          this.treeList = this.$store.getters.orgTree;
+        }
+      }
+    },
+    getChildIds(orgTree, parentId) {
+      if (parentId) {
+        orgTree.forEach((v, i) => {
+          if (v.path.indexOf(parentId) != -1) {
+            this.rightOrgIds.push(v.id);
+          }
+
+          if (v.children && v.children.length > 0) {
+            this.getChildIds(v.children, parentId);
+          }
+        });
+      }
+    },
+    open() {
+      this.right.data = JSON.parse(JSON.stringify(this.currentTempList));
+      this.boundOrgsClone = JSON.parse(JSON.stringify(this.currentTempList));
+      //this.leftSearch();
+    },
+    showDialog() {
+      if(this.disabled)
+      {
+        return;
+      }
+      this.reSetLeftOrgType();
+      this.orgTree();
+      this.visible = true;
+    },
+    reSetLeftOrgType()
+    {
+      if(this.limitOrgType && this.limitOrgType!="null")
+      {
+        console.log("limitOrgType",this.limitOrgType)
+        this.left.condition.orgType=this.limitOrgType;
+        this.left.condition.isleftOrgTypeDisabled=true;
+      }
+      else{
+        this.left.condition.orgType=null;
+        this.left.condition.isleftOrgTypeDisabled=false;
+      }    
+    },
+    initHistorySelectOrg()
+    {
+      console.log("initHistorySelectOrg",11)
+      if(this.orgIds && this.orgIds.length>0)
+      {
+        let initHistorySelectOrgs= this.orgs.filter(x=> this.orgIds.findIndex(y=>y==x.id)>-1);
+
+        initHistorySelectOrgs.forEach((i, v) => {
+          this.right.data.push(i);
+          this.boundOrgsClone.push(i);
+        });
+        this.boundOrgIds = this.boundOrgsClone.map((d) => d.deviceId);
+        this.currentTempList= JSON.parse(JSON.stringify(initHistorySelectOrgs));
+        // this.currentTempList
+        // this.left.data = this.searchOrgs.filter((row) => this.boundOrgIds.indexOf(row.id) < 0)
+      }
+      else{
+        console.log("initHistorySelectOrg",11111)
+        this.currentTempList=[];
+        this.boundOrgIds =[];
+      }
+    },
+    hideDialog() {
+      this.visible = false;
+      this.left = defaultData.left;
+      this.right = defaultData.right;
+      this.searchOrgs = [];
+      this.boundOrgIds = [];
+      this.boundOrgsClone = [];
+    },
+    closed() {
+      this.left = defaultData.left;
+      this.right = defaultData.right;
+      this.searchOrgs = [];
+      this.boundOrgIds = [];
+      this.boundOrgsClone = [];
+      this.left.data = [];
+      this.right.data = [];
+      this.left.condition.orgId = this.$store.getters.orgId;
+      this.right.condition.orgId = this.$store.getters.orgId;
+      this.left.condition.orgType = this.limitOrgType;
+      this.left.condition.isleftOrgTypeDisabled = this.limitOrgType? true:false;
+      this.right.condition.orgType = null;
+      this.left.condition.orgName = null;
+      this.right.condition.orgName = null;
+    },
+    leftTreeSelect(node) {
+      this.left.condition.orgId = node.id;
+      this.left.condition.orgPath = node.path;
+      this.leftSearch();
+    },
+    rightTreeSelect(node) {
+      this.right.condition.orgId = node.id;
+      this.right.condition.orgPath = node.path;
+      this.rightSearch();
+    },
+    handleLeftSelectionChange(val) {
+      this.left.selectedCount = val.length;
+      this.left.selectedRows = val;
+    },
+    handleRightSelectionChange(val) {
+      this.right.selectedCount = val.length;
+      this.right.selectedRows = val;
+    },
+    handleAdd() {
+      this.right.condition.orgId = null;
+      this.right.condition.orgType = null;
+      this.right.condition.orgName = null;
+      let addData = this.left.selectedRows.filter(
+        (row) => this.boundOrgIds.indexOf(row.id) < 0
+      );
+      if (addData.length > 0) {
+        addData.forEach((i, v) => {
+          this.right.data.push(i);
+          this.boundOrgsClone.push(i);
+        });
+        this.boundOrgIds = this.boundOrgsClone.map((d) => d.deviceId);
+
+        this.left.data = this.searchOrgs.filter((row) => this.boundOrgIds.indexOf(row.id) < 0)
+      }
+      this.leftSearch();
+    },
+    handleRemove() {
+      /* this.right.condition.orgId = null;
+       this.right.condition.orgType = null;
+       this.right.condition.orgName = null;
+       this.right.condition.orgPath = null;*/
+      let rightSelectedIds = this.right.selectedRows.map(
+        (r) => r.id
+      );
+      if (rightSelectedIds.length > 0) {
+        this.right.data = this.right.data.filter(
+          (d) => rightSelectedIds.indexOf(d.id) < 0
+        );
+        this.boundOrgsClone = this.boundOrgsClone.filter(
+          (d) => rightSelectedIds.indexOf(d.id) < 0
+        );
+        this.boundOrgIds = this.boundOrgsClone.map((d) => d.id);
+
+        this.left.data = this.searchOrgs.filter((row) => this.boundOrgIds.indexOf(row.id) < 0)
+        if (this.left.condition.orgId) {
+          this.leftSearch();
+        }
+      }
+
+
+    },
+    getAllOrgs() {
+      selectOrgList({}).then((result) => {
+        this.orgs = result;   
+        this.initHistorySelectOrg();    
+      });
+    },
+    leftSearch() {
+      let {condition} = this.left;
+      this.left.prevCondition = {...condition};
+      this.boundOrgIds = this.boundOrgsClone.map((d) => d.id);
+      this.left.data = this.orgs
+        .filter(
+          (d) => this.boundOrgIds.indexOf(d.id) < 0
+        )
+        .filter(
+          (d) => !condition.orgName || d.shortName.includes(condition.orgName)
+        )
+        .filter(
+          // 过滤机构类型
+          (d) => !condition.orgType || d.type == condition.orgType
+        )
+        .filter(
+          // 过滤父级机构
+          (d) => !condition.orgPath || d.path.includes(condition.orgPath)
+        );
+    },
+    rightSearch() {
+      const {condition} = this.right;
+      if (this.boundOrgsClone.length > 0) {
+        this.right.data = this.boundOrgsClone
+          .filter(
+            // 过滤机构名称
+            (d) =>
+              !condition.orgName || d.shortName.includes(condition.orgName)
+          )
+          .filter(
+            // 过滤机构类型
+            (d) => !condition.orgType || d.type == condition.orgType
+          )
+          .filter(
+            // 过滤父级机构
+            (d) => !condition.orgPath || d.path.includes(condition.orgPath)
+          );
+      }
+    },
+    onOK() {
+      this.currentTempList = this.boundOrgsClone;
+      this.$emit("selectNodeId", this.boundOrgIds);
+      this.hideDialog();
+    },
+  },
+  model: {
+    event: "selectNodeId",
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+.result_row {
+  width: 96%;
+  padding: 6px;
+}
+
+.dialog-footer {
+  float: right;
+  margin: 10px 0px;
+}
+
+::v-deep .el-dialog__footer {
+  height: 60px;
+}
+
+::v-deep .el-dialog__body {
+  padding: 10px 5px;
+}
+
+::v-deep .el-card__body {
+  padding: 10px 5px;
+}
+
+.controller {
+  margin: auto;
+  width: 80px;
+  top: calc(50% - 30px);
+  position: relative;
+
+  .remove {
+    margin-top: 20px;
+    margin-left: 0px;
+  }
+}
+
+.el-row-top {
+  height: 500px;
+  display: flex;
+
+  v-deep & > .el-col {
+    height: 100%;
+    width: calc(50% - 50px);
+  }
+
+  v-deep & > .el-col:nth-child(2) {
+    width: 100px;
+  }
+}
+
+.box-card {
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+
+  v-deep .el-card__body {
+    height: 100%;
+  }
+}
+
+.leftbox {
+  v-deep .k-tree-select__clear {
+    display: none !important;
+  }
+}
+
+.deviceName-column-content {
+  display: block;
+  text-align: right;
+}
+
+
+.tags-box {
+  background-color: #fff;
+  border-radius: 4px;
+  border-top: 1px solid #dcdfe6; /* 上边框 */
+  border-bottom: 1px solid #dcdfe6; /* 下边框 */
+  border-left: 1px solid #dcdfe6; /* 左边框 */
+  border-right: 1px solid #dcdfe6; /* 取消右边框 */
+  color: #606266;
+  outline: 0;
+  padding: 0 40px 0 5px;
+  width: 100%;
+  min-height: 32px;
+  max-height: 32px;
+  position: relative;
+  overflow: hidden;
+  display: inline-block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.tags_last{
+  height: 100%;
+    right: 0px;
+    transition: all .3s;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    text-align: right;
+  background-color: #fff;
+  border-radius: 4px;
+  border-top: 1px solid #dcdfe6; /* 上边框 */
+  border-bottom: 1px solid #dcdfe6; /* 下边框 */
+  border-right: 1px solid #dcdfe6; /* 左边框 */
+  border-right: 1px solid #dcdfe6; /* 取消右边框 */
+  border-left: none; /* 取消右边框 */
+  color: #606266;
+  outline: 0;
+  width: 78px;
+  padding-right: 5px;
+  // float: right;
+  min-height: 32px;
+  max-height: 32px;
+  > span {
+    // margin: 5px 10px;
+    color: #161617;
+  }
+  .close-icon {
+    // position: absolute;
+    // right: 5px;
+    cursor: pointer;
+    margin: 10px 10px;
+    &:hover {
+      color: #aaa;
+    }
+  }
+}
+
+.tags-box-disabled {
+  cursor: default;
+}
+
+.tags-box-mini {
+  min-height: 32px;
+  max-height: 32px;
+  line-height: 32px;
+
+  > span {
+    margin: 0 5px;
+  }
+
+  > .tags-num {
+    line-height: 38px;
+  }
+}
+
+.tags-num {
+  color: #ccc;
+  // position: absolute;
+  right: 25px;
+  top: -4px;
+}
+
+.tree-box {
+  margin-top: 20px;
+  max-height: 300px;
+  overflow: auto;
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+  user-select: none;
+}
+</style>

src/views/core/accessPlan/index.vue

@@ -432,7 +432,7 @@
           </el-date-picker>
         </el-form-item>
         <el-form-item v-show="form.orgType" label="调阅机构" prop="planExecOrgIdList">
-        <org-tree-select
+        <!-- <org-tree-select
             v-model="form.planExecOrgIdList"
             :queryData="form.orgType"
             ref="orgTreeSelect"
@@ -440,8 +440,15 @@
             :disable="true"
             :disabled="form.isEdit || (form.isComplete && form.planStatus!=2)"                
           >
-          </org-tree-select>
-          <!-- :enabledCheckOrgTypes="parseInt(form.orgType)" -->
+          </org-tree-select> -->
+          <org-select ref="orgTreeSelect" 
+              v-model="form.planExecOrgIdList"
+              :limitOrgType="String(form.orgType)"
+              :orgIds="form.planExecOrgIdList"
+              :disabled="form.isEdit || (form.isComplete && form.planStatus!=2)"
+              >
+            </org-select>
+          
         </el-form-item>
         <el-form-item label="备注" prop="description">
           <el-input
@@ -482,6 +489,7 @@ import KFileUpload from "@/components/K-FileUpload/index.vue";
 import { mapGetters } from "vuex";
 import DialogThreeState from "@/components/message/threeStateMessageBox.vue";
 import * as api from "@/api/core/accessPlan";
+import orgSelect from "@/components/orgSelect/zl.orgSelect.vue";  
 export default {
   dicts: [
     "sys_org_type",
@@ -499,6 +507,7 @@ export default {
     orgTree,
     DialogThreeState,
     OrgTreeSelect,
+    orgSelect,
   },
 
   data() {
@@ -711,6 +720,7 @@ export default {
         this.roleList=this.allRoleList;
         return;
       };
+      this.form.planExecOrgIdList=[];
       findRoleByType(val).then((response) => {
         this.roleList = response;
         this.queryParams.roleId = null;

src/views/core/drill/plan/index.vue

@@ -442,7 +442,7 @@
               label="演练机构"
               prop="planExecOrgIdList"
             >
-              <org-tree-select
+              <!-- <org-tree-select
                 :disabled="tableDisable()"
                 v-model="form.planExecOrgIdList"
                 :queryData="form.execOrgType"
@@ -450,8 +450,14 @@
                 :disable="true"                
                 :checkShow="true"
               >
-              </org-tree-select>
-              <!-- :enabledCheckOrgTypes="form.execOrgType" -->
+              </org-tree-select> -->
+              <org-select ref="orgTreeSelect" 
+              v-model="form.planExecOrgIdList"
+              :limitOrgType="String(form.execOrgType)"
+              :orgIds="form.planExecOrgIdList"
+              :disabled="tableDisable()"
+              >
+            </org-select>
             </el-form-item>
           </el-col>
         </el-row>
@@ -511,6 +517,7 @@ import KFileUpload from "@/components/K-FileUpload/index.vue";
 import OrgTreeSelect from "@/components/orgTreeSelect";
 import dayjs from "dayjs";
 import {mapGetters} from "vuex";
+import orgSelect from "@/components/orgSelect/zl.orgSelect.vue";  
 import DialogThreeState from "@/components/message/threeStateMessageBox.vue";
 
 export default {
@@ -521,7 +528,7 @@ export default {
     "drill_plan_cycle",
     "core_drill_category",
   ],
-  components: {OrgTree, KFileUpload, OrgTreeSelect, DialogThreeState},
+  components: {OrgTree, KFileUpload, OrgTreeSelect, DialogThreeState,orgSelect},
   mixins: [tableList],
   data() {
     return {

src/views/core/edu/plan/index.vue

@@ -459,11 +459,11 @@
                     </el-col>-->
           <el-col :span="12">
             <el-form-item
-              v-show="form.execOrgType"
+              v-if="form.execOrgType"
               label="受训机构"
               prop="planExecOrgIdList"
             >
-              <org-tree-select
+              <!-- <org-tree-select
                 v-model="form.planExecOrgIdList"
                 :queryData="form.execOrgType"
                 ref="orgTreeSelect"
@@ -471,7 +471,14 @@
                 :disable="true"  
                 :disabled="tableDisable()"
               >
-              </org-tree-select>
+              </org-tree-select> -->
+              <org-select ref="orgTreeSelect" 
+              v-model="form.planExecOrgIdList"
+              :limitOrgType="String(form.execOrgType)"
+              :orgIds="form.planExecOrgIdList"
+              :disabled="tableDisable()"
+              >
+            </org-select>
               <!-- :enabledCheckOrgTypes="form.execOrgType" -->
             </el-form-item>
           </el-col>
@@ -546,6 +553,7 @@ import dayjs from "dayjs";
 import KTextarea from "@/components/common/textarea.vue";
 import {mapGetters} from "vuex";
 import DialogThreeState from "@/components/message/threeStateMessageBox.vue";
+import orgSelect from "@/components/orgSelect/zl.orgSelect.vue";  
 import * as api from "@/api/resumption/plan";
 
 export default {
@@ -563,6 +571,7 @@ export default {
     DialogSelectFile,
     KTextarea,
     DialogThreeState,
+    orgSelect,
   },
   mixins: [tableList],
   data() {

src/views/resumption/plan/dialog.edit.vue

@@ -25,8 +25,8 @@
                   :maxlength="50"
                   name="planName"
                   placeholder="请输入任务名称"
-                  clearable
-                  style="width: 217px; max-height: 33px"
+                  clearable   
+                  style="width: 100%"               
                 />
               </el-form-item>
             </el-col>
@@ -39,6 +39,7 @@
                   v-model="formData.planType"
                   placeholder="请选择任务类型"
                   clearable
+                  style="width: 100%"
                 >
                   <el-option
                     v-for="dict in dict.type.resumption_plan_type"
@@ -61,6 +62,7 @@
                   v-model="formData.planCycle"
                   placeholder="请选择任务周期"
                   clearable
+                  style="width: 100%"
                 >
                   <el-option
                     v-for="item in dict.type.resumption_plan_cycle"
@@ -85,6 +87,7 @@
                   v-model="formData.planExec"
                   placeholder="请选择任务时间"
                   clearable
+                  style="width: 100%"
                 >
                   <el-option
                     v-for="item in dict.type.resumption_plan_exec"
@@ -101,13 +104,13 @@
             <el-col :span="6">
               <el-form-item prop="count" label="任务次数:">
                 <el-input-number
+                  style="width: 100%"
                   :disabled="cannotEdit()"
                   v-model="formData.count"
                   controls-position="right"
                   @change="handleChange"
                   :min="parentCount"
                   :max="9"
-                  style="width: 217px"
                 ></el-input-number>
               </el-form-item> </el-col
             ><el-col :span="6">
@@ -119,11 +122,11 @@
                 <el-date-picker
                   :disabled="cannotEdit()"
                   v-model="formData.startDate"
-                  style="width: 217px"
                   value-format="yyyy-MM-dd 00:00:00"
                   placeholder="请选择开始时间"
                   type="date"
                   :clearable="false"
+                  style="width: 100%"
                   :picker-options="datepickerOptions"
                 ></el-date-picker>
               </el-form-item>
@@ -137,7 +140,7 @@
                 <el-date-picker
                   :disabled="cannotEdit()"
                   v-model="formData.endDate"
-                  style="width: 217px"
+                  style="width: 100%"
                   value-format="yyyy-MM-dd 23:59:59"
                   placeholder="请选择结束时间"
                   type="date"
@@ -155,6 +158,7 @@
                   placeholder="请选择机构类型"
                   @change="onOrgTypeChanged"
                   clearable
+                  style="width: 100%"
                 >
                   <el-option
                     v-for="item in orgTypeOptions"
@@ -175,6 +179,7 @@
                   placeholder="请选择履职人员"
                   multiple
                   filterable
+                  style="width: 100%"
                 >
                   <el-option
                     v-for="item in resumptionRoles"
@@ -188,7 +193,7 @@
             </el-col>
             <el-col :span="6">
               <el-form-item :span="6" prop="checkOrgIds" label="履职机构">
-                <org-tree-select
+                <!-- <org-tree-select
                   :disabled="cannotEdit()"
                   v-model="formData.orgList"
                   class="org-selector"
@@ -196,20 +201,25 @@
                   :disable="true"             
                 :checkShow="true"
                 >
-                </org-tree-select>
-                <!-- :enabledCheckOrgTypes="parseInt(formData.execOrgType)" -->
+                </org-tree-select> -->
+                <org-select ref="orgTreeSelect" 
+                v-model="formData.orgList"
+                :limitOrgType="String(formData.execOrgType?formData.execOrgType:'')"
+                :orgIds="formData.orgList"
+                :disabled="cannotEdit()"
+              >
+            </org-select>
                 
               </el-form-item>
             </el-col>
-            <el-col :span="12" v-if="formData.planCycle==0">
+            <el-col :span="12">
               <el-form-item prop="note" label="备注">
                 <el-input
                   :disabled="cannotEdit()"
                   v-model="formData.note"
                   :maxlength="255"
                   clearable
-                  placeholder="请输入备注"
-                  style="width:calc(100% - 17px)"
+                  placeholder="请输入备注"                  
                 />
               </el-form-item>
             </el-col>
@@ -231,7 +241,7 @@
               </el-form-item>
             </el-col> -->
           </el-row>
-              <el-form-item prop="note" label="备注" v-if="formData.planCycle!=0">
+              <!-- <el-form-item prop="note" label="备注" v-if="formData.planCycle!=0">
                 <el-input
                   :disabled="cannotEdit()"
                   v-model="formData.note"
@@ -240,7 +250,7 @@
                   placeholder="请输入备注"
                   style="width:calc(100% - 17px)"
                 />
-              </el-form-item>
+              </el-form-item> -->
             
         </el-form>
         <div style="margin-bottom: 10px">
@@ -355,6 +365,7 @@ import { findAllRole } from "@/api/system/role";
 import DialogSelect from "@/views/resumption/ruleManager/dialog.select.point.vue";
 import DialogThreeState from "@/components/message/threeStateMessageBox.vue";
 import OrgTreeSelect from "@/components/orgTreeSelect";
+import orgSelect from "@/components/orgSelect/zl.orgSelect.vue";
 export default {
   dicts: [
     "resumption_plan_type",
@@ -365,7 +376,7 @@ export default {
     "resumption_plan_exec",
   ],
 
-  components: { DialogSelect, DialogThreeState, OrgTreeSelect },
+  components: { DialogSelect, DialogThreeState, OrgTreeSelect,orgSelect },
 
   props: {
     orgTypeOptions: {
@@ -843,6 +854,7 @@ export default {
     },
     onOrgTypeChanged() {
       this.formData.roleList = [];
+      this.formData.orgList =[];
       this.tableData = [];
       this.getRolesByOrg();
     },

src/views/safetycheck/plan/dialog.edit.vue

@@ -25,7 +25,7 @@
                   name="planName"
                   placeholder="请输入任务名称"
                   clearable
-                  style="width: 217px; max-height: 33px"
+                  style="width: 100%"                  
                 />
               </el-form-item>
             </el-col>
@@ -38,6 +38,7 @@
                   v-model="formData.checkType"
                   placeholder="请选择任务类型"
                   clearable
+                  style="width: 100%"
                 >
                   <el-option
                     v-for="dict in dict.type.check_type"
@@ -58,6 +59,7 @@
                   v-model="formData.planCycle"
                   placeholder="请选择任务周期"
                   clearable
+                  style="width: 100%"
                 >
                   <el-option
                     v-for="item in dict.type.check_cycle"
@@ -78,7 +80,7 @@
                   @change="handleChange"
                   :min="parentCount"
                   :max="9"
-                  style="width: 217px"
+                  style="width: 100%"
                 ></el-input-number>
               </el-form-item>
             </el-col>
@@ -91,7 +93,7 @@
                 <el-date-picker
                   :disabled="cannotEdit()"
                   v-model="formData.startDate"
-                  style="width: 217px"
+                  style="width: 100%"
                   value-format="yyyy-MM-dd 00:00:00"
                   placeholder="请选择开始时间"
                   type="date"
@@ -110,7 +112,7 @@
                 <el-date-picker
                   :disabled="cannotEdit()"
                   v-model="formData.endDate"
-                  style="width: 217px"
+                  style="width: 100%"
                   value-format="yyyy-MM-dd 23:59:59"
                   placeholder="请选择结束时间"
                   type="date"
@@ -129,6 +131,7 @@
                   v-model="formData.execOrgType"
                   placeholder="请选择检查主体类型"
                   clearable
+                  style="width: 100%"
                 >
                   <el-option
                     v-for="item in orgTypeOptions"
@@ -142,7 +145,7 @@
             </el-col>
             <el-col :span="6">
               <el-form-item :span="6" prop="execOrgIds" label="检查主体">
-                <org-tree-select
+                <!-- <org-tree-select
                   :disabled="cannotEdit()"
                   v-model="formData.execOrgIds"
                   class="org-selector"
@@ -151,7 +154,14 @@
                   :enabledCheckOrgTypes="parseInt(formData.execOrgType)"
                   :disable="true"
                 >
-                </org-tree-select>
+                </org-tree-select> -->
+                <org-select ref="execorgTreeSelect" 
+                v-model="formData.execOrgIds"
+                :limitOrgType="String(formData.execOrgType?formData.execOrgType:'')"
+                :orgIds="formData.execOrgIds"
+                :disabled="cannotEdit()"
+              >
+            </org-select>
               </el-form-item>
             </el-col>
             <!-- </el-row> -->
@@ -165,7 +175,7 @@
                   multiple
                   clearable
                   @change="handleRolesChange"
-                  style="width: calc(100% - 17px)"
+                  style="width: 100%"
                 >
                   <el-option
                     v-for="item in planRoles"
@@ -188,7 +198,7 @@
                   placeholder="请选择受检机构类型"
                   clearable
                   multiple
-                  style="width: calc(100% - 17px)"
+                  style="width: 100%"
                 >
                   <el-option
                     v-for="item in orgTypeOptions"
@@ -203,7 +213,7 @@
 
             <el-col :span="6">
               <el-form-item :span="6" prop="checkOrgIds" label="受检机构">
-                <org-tree-select
+                <!-- <org-tree-select
                   :disabled="cannotEdit()"
                   v-model="formData.checkOrgIds"
                   class="org-selector"
@@ -218,10 +228,19 @@
                   :disable="true"           
                 :checkShow="true"
                 >
-                </org-tree-select>
-                <!-- :enabledCheckOrgTypes="
-                    formData.checkOrgTypes.map((t) => parseInt(t))
-                  " -->
+                </org-tree-select> -->
+                <org-select ref="checkorgTreeSelect" 
+                v-model="formData.checkOrgIds"
+                :limitOrgType="formData.checkOrgTypes == null ||
+                    formData.checkOrgTypes.length > 1
+                      ? null
+                      : String(formData.checkOrgTypes[0]?formData.checkOrgTypes[0]:'')
+                  "
+                :orgIds="formData.checkOrgIds"
+                :disabled="cannotEdit()"
+              >
+            </org-select>
+              
               </el-form-item>
             </el-col>
             <!-- <el-col :span="6"> -->
@@ -254,7 +273,7 @@
                   v-model="formData.description"
                   :maxlength="255"
                   clearable
-                  style="width: 217px"
+                  style="width: 100%"
                 />
               </el-form-item>
             </el-col>
@@ -375,6 +394,7 @@ import { findAllRole, findRoleByType } from "@/api/system/role";
 import { getLabel } from "@/views/commonOption";
 import DialogSelect from "@/views/safetycheck/ruleManager/dialog.select.point.vue";
 import dayjs from "dayjs";
+import orgSelect from "@/components/orgSelect/zl.orgSelect.vue";  
 export default {
   dicts: [
     "sys_org_type",
@@ -934,7 +954,7 @@ export default {
     //apimark//
   },
   mounted() {},
-  components: { DialogSelect, orgDropDown, OrgTree, korgTree, OrgTreeSelect },
+  components: { DialogSelect, orgDropDown, OrgTree, korgTree, OrgTreeSelect,orgSelect },
 };
 </script>