1

src/components/system/post-form.vue

+<style>
+
+</style>
 <template>
   <q-dialog v-model="persistent" persistent transition-show="scale" transition-hide="scale">
-    <q-card style="width: 800px;max-width:900px;">
+    <q-card style="width: 800px;max-width:900px;" class="post-form">
       <q-card-section>
         <div class="text-h6">{{objOption.MenuId==0?'新增岗位信息':'修改岗位信息'}}</div>
       </q-card-section>
@@ -20,12 +23,18 @@
         </div>
         <div class="text-caption q-mb-lg q-px-md text-grey-6">绑定角色</div>
         <div class="row wrap">
-          <div v-for="(item,index) in RoleList">
-            <div>
-              <span>{{item.RoleName}}</span>
-              <q-checkbox v-model="item.IsChecked" />
-            </div>
-          </div>
+          <template>
+            <el-transfer
+              filterable
+              :filter-method="filterMethod"
+              filter-placeholder="请输入城市拼音"
+              :props="{key: 'RoleId',label: 'RoleName'}"
+              v-model="value"
+              :titles="['可选角色', '已选角色']"
+              :data="data">
+            </el-transfer>
+          </template>
+
         </div>
       </q-card-section>
       <q-separator />
@@ -79,6 +88,11 @@
         DeptTreeList: [],
         saveLoading: false,
         RoleList: [], //角色列表
+        data: [],
+        value: [],
+        filterMethod(query, item) {//根据名称搜索
+          return item.RoleName.indexOf(query) > -1;
+        }
       }
     },
     created() {
@@ -93,6 +107,7 @@
       getRoleList() {
         queryRoleDropdown({}).then(res => {
           this.RoleList = res.Data;
+          this.data = res.Data;
         })
       },
       getChild(menuArray) {
@@ -121,6 +136,12 @@
             this.returnString.push(this.objOption.RB_Dept_Id);
             this.objOption.PostName = res.Data.PostName;
             this.objOption.Status = res.Data.Status;
+            if(res.Data.PostRoleList.length>0){
+              res.Data.PostRoleList.forEach(x=>{
+                this.value.push(x.RoleId)
+              })
+            }
+
           })
           this.optionTitle = "修改岗位信息"
         } else {
@@ -131,6 +152,7 @@
           this.objOption.Status = 0;
         }
       },
+
       //关闭弹窗
       closeSaveForm() {
         this.$emit('close')
@@ -140,14 +162,12 @@
       savePost() {
         var tempRole = [];
         if (this.RoleList && this.RoleList.length > 0) {
-          this.RoleList.forEach(item => {
-            if (item.IsChecked) {
-              tempRole.push({
-                Id: 0,
-                PostId: 0,
-                RoleId: item.RoleId
-              });
-            }
+          this.RoleList.forEach(x => {
+            this.value.forEach(j=>{
+              if(x.RoleId==j){
+                tempRole.push(x)
+              }
+            })
           })
         }
         this.objOption.PostRoleList=tempRole;