组件实现 v-model

src/components/orgSelect/zl.orgSelect.vue

@@ -2,12 +2,15 @@
 <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 class="tags-box" :class="{'tags-box-disabled':!disabled,'tags-box-mini':size === 'mini'}" >
+        <div style="width:100px ; max-width:100px;height:32px;" @click="showDialog">
+          <el-tag type="success" :size="size" v-for="v in currentTempList" :key="v.id">{{ v.shortName }}</el-tag>
+        </div>
+        
       </div>
-      <div  class="tags_last">
+      <div class="tags_last" @click="clear">
         <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>        
+        <i v-if="currentTempList.length > 0 && !disabled" class="el-icon-circle-close close-icon" @click="clear"></i>        
       </div>
     </div>
     <DialogCom
@@ -224,10 +227,16 @@ export default {
     //   type: Array,
     //   default: new Array(),
     // },
-    orgIds: {
+    value:{
       type: Array,
-      default: new Array(),
+      default: ()=>{
+        return new Array()
+      },
     },
+    // orgIds: {
+    //   type: Array,
+    //   default: new Array(),
+    // },
     limitOrgType:{
       type: String,
       default: null,
@@ -266,7 +275,7 @@ export default {
     // orgList: function (data) {
     //   this.currentTempList = this.orgList;
     // }
-    orgIds: function(data){
+    value: function(data){
       console.log("watch orgIds",data,this.left.condition)
       this.orgTree();
     },
@@ -318,8 +327,8 @@ export default {
     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)
+    console.log("mounted orgIds",this.value,this.limitOrgType,this.currentTempList,(this.currentTempList.length==0 && this.value))
+    if((!this.currentTempList || this.currentTempList.length==0) && this.value)
     {
       this.orgTree();
     }
@@ -327,7 +336,9 @@ export default {
   },
 
   methods: {
-    clear() {
+    clear(event) {
+      console.log("clear",event)
+      event.stopPropagation();
       this.currentTempList = [];
       this.boundOrgsClone = [];
       this.$emit("selectNode", []);
@@ -411,10 +422,10 @@ export default {
     },
     initHistorySelectOrg()
     {
-      console.log("initHistorySelectOrg",11)
-      if(this.orgIds && this.orgIds.length>0)
+      console.log("initHistorySelectOrg",this.value)
+      if(this.value && this.value.length>0)
       {
-        let initHistorySelectOrgs= this.orgs.filter(x=> this.orgIds.findIndex(y=>y==x.id)>-1);
+        let initHistorySelectOrgs= this.orgs.filter(x=> this.value.findIndex(y=>y==x.id)>-1);
 
         initHistorySelectOrgs.forEach((i, v) => {
           this.right.data.push(i);
@@ -453,7 +464,7 @@ export default {
       this.left.condition.isleftOrgTypeDisabled = this.limitOrgType? true:false;
       this.right.condition.orgType = null;
       this.left.condition.orgName = null;
-      this.right.condition.orgName = null;
+      this.right.condition.orgName = null;      
     },
     leftTreeSelect(node) {
       this.left.condition.orgId = node.id;
@@ -564,6 +575,9 @@ export default {
     onOK() {
       this.currentTempList = this.boundOrgsClone;
       this.$emit("selectNodeId", this.boundOrgIds);
+      // console.log("onOK",this.boundOrgIds);
+      this.value=this.boundOrgIds;
+      this.$emit("input", this.boundOrgIds);      
       this.hideDialog();
     },
   },
@@ -655,7 +669,7 @@ export default {
   color: #606266;
   outline: 0;
   padding: 0 40px 0 5px;
-  width: 100%;
+  width: 80%;
   min-height: 32px;
   max-height: 32px;
   position: relative;

src/views/core/accessPlan/index.vue

@@ -443,8 +443,7 @@
           </org-tree-select> -->
           <org-select ref="orgTreeSelect" 
               v-model="form.planExecOrgIdList"
-              :limitOrgType="String(form.orgType)"
-              :orgIds="form.planExecOrgIdList"
+              :limitOrgType="String(form.orgType)"              
               :disabled="form.isEdit || (form.isComplete && form.planStatus!=2)"
               >
             </org-select>

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

@@ -453,8 +453,7 @@
               </org-tree-select> -->
               <org-select ref="orgTreeSelect" 
               v-model="form.planExecOrgIdList"
-              :limitOrgType="String(form.execOrgType)"
-              :orgIds="form.planExecOrgIdList"
+              :limitOrgType="String(form.execOrgType)"              
               :disabled="tableDisable()"
               >
             </org-select>

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

@@ -474,8 +474,7 @@
               </org-tree-select> -->
               <org-select ref="orgTreeSelect" 
               v-model="form.planExecOrgIdList"
-              :limitOrgType="String(form.execOrgType)"
-              :orgIds="form.planExecOrgIdList"
+              :limitOrgType="String(form.execOrgType)"              
               :disabled="tableDisable()"
               >
             </org-select>

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

@@ -204,8 +204,7 @@
                 </org-tree-select> -->
                 <org-select ref="orgTreeSelect" 
                 v-model="formData.orgList"
-                :limitOrgType="String(formData.execOrgType?formData.execOrgType:'')"
-                :orgIds="formData.orgList"
+                :limitOrgType="String(formData.execOrgType?formData.execOrgType:'')"                
                 :disabled="cannotEdit()"
               >
             </org-select>

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

@@ -157,8 +157,7 @@
                 </org-tree-select> -->
                 <org-select ref="execorgTreeSelect" 
                 v-model="formData.execOrgIds"
-                :limitOrgType="String(formData.execOrgType?formData.execOrgType:'')"
-                :orgIds="formData.execOrgIds"
+                :limitOrgType="String(formData.execOrgType?formData.execOrgType:'')"                
                 :disabled="cannotEdit()"
               >
             </org-select>
@@ -235,8 +234,7 @@
                     formData.checkOrgTypes.length > 1
                       ? null
                       : String(formData.checkOrgTypes[0]?formData.checkOrgTypes[0]:'')
-                  "
-                :orgIds="formData.checkOrgIds"
+                  "                
                 :disabled="cannotEdit()"
               >
             </org-select>