From 8ccceef72199179b434d5aa883ffd067310175c3 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期一, 17 十月 2022 15:33:40 +0800
Subject: [PATCH] 去掉页面上固定地址

---
 src/views/systemSetting/baseSetting/department/createUser/index.vue |  824 +++++++++++++++++++++++++++++++---------------------------
 1 files changed, 444 insertions(+), 380 deletions(-)

diff --git a/src/views/systemSetting/baseSetting/department/createUser/index.vue b/src/views/systemSetting/baseSetting/department/createUser/index.vue
index f07eccf..87520fd 100644
--- a/src/views/systemSetting/baseSetting/department/createUser/index.vue
+++ b/src/views/systemSetting/baseSetting/department/createUser/index.vue
@@ -1,414 +1,478 @@
 <template>
-    <div class="createUser">
-        <main>
-            <div class="mainContent">
-                <el-form ref="user" label-width="140px" autoComplete="on" :model="depart" :rules="createDepartRules"
-                    label-position="right">
-                    <!-- 閮ㄩ棬鍚嶇О -->
-                    <el-form-item class="optionItem" label="閮ㄩ棬鍚嶇О:" prop="departName">
-                        <el-input v-model="depart.departName" placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�"></el-input>
-                    </el-form-item>
-                    <!-- 涓婄骇閮ㄩ棬 -->
-                    <el-form-item class="optionItems" label="涓婄骇閮ㄩ棬:" prop="parentId">
-                        <el-select v-model="depart.parentId" placeholder="璇疯緭鍏ヤ笂绾ч儴闂�">
-                            <el-option :value="mylabel">
-                                <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>
-                    </el-form-item>
-                    <!-- 閮ㄩ棬绫诲瀷 -->
-                    <el-form-item class="optionItem" label="閮ㄩ棬绫诲瀷:" prop="departType">
-                        <el-select v-model="depart.departType" placeholder="璇烽�夋嫨閮ㄩ棬绫诲瀷">
-                            <el-option v-for="item in departTypeList" :key="item.id" :label="item.name"
-                                :value="item.id">
-                            </el-option>
-                        </el-select>
-                    </el-form-item>
-                    <!--娣诲姞浜哄憳  -->
-                    <el-form-item class="optionItem add" label="娣诲姞浜哄憳:">
-                        <ul class="addPerson">
-                            <li v-for="(item,index) in cehckedList" :key="index" @click="setLeader(index)">
-                                <div class="li-item">
-                                    <div class="li-icon">
-                                        <i :class="['el-icon-user-solid',item.checked ? 'leader': '']"></i>
-                                    </div>
-                                    <label style="font-size: 12px;" :class="[item.checked ? 'leader': '']">{{item.username}}</label>
-                                </div>
-                            </li>
-                            <li class="li-btn"><i class="el-icon-plus" @click="openUser = true"></i></li>
-                        </ul>
-                        <div class="card" v-if="openUser">
-                            <el-card class="box-card">
-                                <div slot="header" class="myclear">
-                                    <span>宸ヤ綔浜哄憳</span>
-                                    <div @click="addUser">娣诲姞</div>
-                                </div>
-                                <div class="scrollWrap">
-                                    <el-checkbox-group v-model="checkedUser">
-                                        <el-checkbox v-for="user in userList" :label="user.id" :key="user.id">
-                                            {{user.username}}
-                                        </el-checkbox>
-                                    </el-checkbox-group>
-                                </div>
-                                <div class="hidebar"></div>
-                            </el-card>
-                        </div>
-                    </el-form-item>
-                    <!-- 閮ㄩ棬鎻忚堪 -->
-                    <el-form-item class="optionItem" label="閮ㄩ棬鎻忚堪:" prop="departDes">
-                        <el-input type="textarea" v-model="depart.departDes" placeholder="璇疯緭鍏ラ儴闂ㄦ弿杩�"></el-input>
-                    </el-form-item>
-                </el-form>
+  <div class="createUser">
+    <main>
+      <div class="mainContent">
+        <el-form
+          ref="user"
+          label-width="140px"
+          autoComplete="on"
+          :model="depart"
+          :rules="createDepartRules"
+          label-position="right"
+        >
+          <!-- 閮ㄩ棬鍚嶇О -->
+          <el-form-item class="optionItem" label="閮ㄩ棬鍚嶇О:" prop="departName">
+            <el-input
+              v-model="depart.departName"
+              placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�"
+            ></el-input>
+          </el-form-item>
+          <!-- 涓婄骇閮ㄩ棬 -->
+          <el-form-item class="optionItems" label="涓婄骇閮ㄩ棬:" prop="parentId">
+            <el-select v-model="depart.parentId" placeholder="璇疯緭鍏ヤ笂绾ч儴闂�">
+              <el-option :value="mylabel">
+                <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>
+          </el-form-item>
+          <!-- 閮ㄩ棬绫诲瀷 -->
+          <el-form-item class="optionItem" label="閮ㄩ棬绫诲瀷:" prop="departType">
+            <el-select v-model="depart.departType" placeholder="璇烽�夋嫨閮ㄩ棬绫诲瀷">
+              <el-option
+                v-for="item in departTypeList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <!--娣诲姞浜哄憳  -->
+          <el-form-item class="optionItem add" label="娣诲姞浜哄憳:">
+            <ul class="addPerson">
+              <li
+                v-for="(item, index) in cehckedList"
+                :key="index"
+                @click="setLeader(index)"
+              >
+                <div class="li-item">
+                  <div class="li-icon">
+                    <i
+                      :class="[
+                        'el-icon-user-solid',
+                        item.checked ? 'leader' : '',
+                      ]"
+                    ></i>
+                  </div>
+                  <label
+                    style="font-size: 12px"
+                    :class="[item.checked ? 'leader' : '']"
+                    >{{ item.username }}</label
+                  >
+                </div>
+              </li>
+              <li class="li-btn">
+                <i class="el-icon-plus" @click="openUser = true"></i>
+              </li>
+            </ul>
+            <div class="card" v-if="openUser">
+              <el-card class="box-card">
+                <div slot="header" class="myclear">
+                  <span>宸ヤ綔浜哄憳</span>
+                  <div @click="addUser">纭</div>
+                </div>
+                <div class="scrollWrap">
+                  <el-checkbox-group v-model="checkedUser">
+                    <el-checkbox
+                      v-for="user in userList"
+                      :label="user.id"
+                      :key="user.id"
+                    >
+                      {{ user.username }}
+                    </el-checkbox>
+                  </el-checkbox-group>
+                </div>
+                <div class="hidebar"></div>
+              </el-card>
             </div>
-        </main>
-        <footer>
-            <div class="optionBtn">
-                <el-button @click="handleClose">鍙栨秷</el-button>
-                <el-button type="primary" class="btn submit" @click="handleUser">纭畾</el-button>
-            </div>
-        </footer>
-    </div>
+          </el-form-item>
+          <el-form-item>
+              <label style="color:#ff0000ab">绾㈣壊浠h〃閮ㄩ棬棰嗗锛岀偣鍑诲ご鍍忓彲璁剧疆閮ㄩ棬棰嗗</label>
+          </el-form-item>
+          <!-- 閮ㄩ棬鎻忚堪 -->
+          <el-form-item class="optionItem" label="閮ㄩ棬鎻忚堪:" prop="departDes">
+            <el-input
+              type="textarea"
+              :rows="4"
+              v-model="depart.departDes"
+              placeholder="璇疯緭鍏ラ儴闂ㄦ弿杩�"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </main>
+    <footer>
+      <div class="optionBtn">
+        <el-button @click="handleClose">鍙栨秷</el-button>
+        <el-button type="primary" class="btn submit" @click="handleUser"
+          >纭畾</el-button
+        >
+      </div>
+    </footer>
+  </div>
 </template>
 <script>
-import { getTypeList } from '@/utils/helper'
+import { getTypeList } from "@/utils/helper";
 export default {
-    data() {
-        const validateNickname = (rule, value, callback) => {
-            if (!value) {
-                callback(new Error("璇峰~鍐欓儴闂ㄥ悕绉�"));
-            } else {
-                callback();
+  data() {
+    const validateNickname = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error("璇峰~鍐欓儴闂ㄥ悕绉�"));
+      } else {
+        callback();
+      }
+    };
+    const validatePass = (rule, value, callback) => {
+      if (!value) {
+        callback();
+      } else {
+        callback();
+      }
+    };
+    const validatePhone = (rule, value, callback) => {
+      if (!value) {
+        callback();
+      } else {
+        callback();
+      }
+    };
+    return {
+      depart: {
+        departName: "",
+        parentId: "",
+        departType: "",
+        departDes: "",
+      },
+      createDepartRules: {
+        departName: [
+          { required: true, trigger: "blur", validator: validateNickname },
+        ],
+        parentId: [
+          { required: false, trigger: "blur", validator: validatePass },
+        ],
+        departType: [
+          { required: false, trigger: "blur", validator: validatePhone },
+        ],
+        departDes: [{ required: false, trigger: "blur" }],
+      },
+      userList: [],
+      departList: [],
+      checkedUser: [],
+      cehckedList: [],
+      openUser: false,
+      departTypeList: [],
+      selectOrg: {
+        orgsid: [],
+      },
+      mylabel: "",
+      defaultProps: {
+        children: "children",
+        label: "departName",
+      },
+    };
+  },
+  created() {
+    const that = this;
+    // 鑾峰彇閮ㄩ棬鏍戝舰缁撴瀯鍥�
+    this.getDepartTree();
+    // 鑾峰彇鐢ㄦ埛鍒楄〃
+    this.getUserList();
+    // 鑾峰彇閮ㄩ棬绫诲瀷鍒楄〃
+    this.getDepartTypeList();
+  },
+  methods: {
+    handleUser() {
+      this.$refs.user.validate((valid) => {
+        if (valid) {
+          const { depart, cehckedList, selectOrg } = this;
+          const arr = [];
+          cehckedList.forEach((item) => {
+            arr.push({ isLeader: item.isLeader, userId: item.id });
+          });
+          console.log(arr);
+          this.$axios({
+            method: "post",
+            url: "/sccg/depart/create",
+            data: {
+              departName: depart.departName,
+              parentId: selectOrg.orgsid[0],
+              departType: depart.departType,
+              departDes: depart.departDes,
+              departManagerList: arr,
+            },
+          }).then((res) => {
+            if (res.code === 200) {
+              this.$message({
+                message: res.message,
+                type: "success",
+              });
+              this.refresh();
+            } else if (res.code === 2001) {
+              this.$message({
+                message: res.message,
+                type: "error",
+              });
+              this.refresh();
             }
-        };
-        const validatePass = (rule, value, callback) => {
-            if (!value) {
-                callback();
-            } else {
-                callback();
-            }
-        };
-        const validatePhone = (rule, value, callback) => {
-            if (!value) {
-                callback();
-            } else {
-                callback();
-            }
-        };
-        return {
-            depart: {
-                departName: '',
-                parentId: '',
-                departType: '',
-                departDes: '',
-            },
-            createDepartRules: {
-                departName: [
-                    { required: true, trigger: "blur", validator: validateNickname },
-                ],
-                parentId: [
-                    { required: false, trigger: "blur", validator: validatePass },
-                ],
-                departType: [
-                    { required: false, trigger: "blur", validator: validatePhone },
-                ],
-                departDes: [
-                    { required: false, trigger: "blur" },
-                ],
-            },
-            userList: [],
-            departList: [],
-            checkedUser: [],
-            cehckedList: [],
-            openUser: false,
-            departTypeList: [],
-            selectOrg: {
-                orgsid: []
-            },
-            mylabel: '',
-            defaultProps: {
-                children: 'children',
-                label: 'departName',
-            },
+          });
+        } else {
+          return false;
         }
+      });
     },
-    created() {
-        const that = this;
-        // 鑾峰彇閮ㄩ棬鏍戝舰缁撴瀯鍥�
-        this.getDepartTree();
-        // 鑾峰彇鐢ㄦ埛鍒楄〃
-        this.getUserList();
-        // 鑾峰彇閮ㄩ棬绫诲瀷鍒楄〃
-        this.getDepartTypeList();
+    // 鑾峰彇閮ㄩ棬鏍戝舰缁撴瀯鍥�
+    getDepartTree() {
+      this.$axios({
+        method: "get",
+        url: "sccg/depart/tree",
+      }).then((res) => {
+        console.log(res);
+        res.data.unshift({ id: 0, departName: "椤剁骇鑿滃崟" });
+        this.departList = res.data;
+      });
     },
-    methods: {
-        handleUser() {
-            this.$refs.user.validate((valid) => {
-                if (valid) {
-                    const { depart,cehckedList,selectOrg } = this;
-                    const arr = [];
-                    cehckedList.forEach(item => {
-                        arr.push({ isLeader: item.isLeader, userId: item.id, });
-                    })
-                    console.log(arr);
-                    this.$axios({
-                        method: 'post',
-                        url: '/sccg/depart/create',
-                        data: {
-                            departName: depart.departName,
-                            parentId: selectOrg.orgsid[0], departType: depart.departType, departDes: depart.departDes,
-                            departManagerList: arr
-                        }
-                    }).then(res => {
-                        if (res.code === 200) {
-                            this.$message({
-                                message: res.message,
-                                type: 'success'
-                            })
-                            this.refresh();
-                        } else if (res.code === 2001) {
-                            this.$message({
-                                message: res.message,
-                                type: 'error'
-                            })
-                            this.refresh();
-                        }
-                    })
-                } else {
-                    return false;
-                }
-            })
-        },
-        // 鑾峰彇閮ㄩ棬鏍戝舰缁撴瀯鍥�
-        getDepartTree() {
-            this.$axios({
-                method: 'get',
-                url: 'sccg/depart/tree',
-            })
-                .then(res => {
-                    console.log(res);
-                    res.data.unshift({ id: 0, departName: '椤剁骇鑿滃崟' })
-                    this.departList = res.data;
-                })
-        },
-        // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�
-        getUserList() {
-            // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�佺敤鎴锋煡璇�(鏆傛椂鏀寔鐢佃瘽鍙风爜)
-            this.$axios.get(`sccg/admin/list`).then(res => {
-                if (res.code === 200) {
-                    this.userList = res.data.records;
-                }
-            })
-        },
-        addUser() {
-            console.log(this.checkedUser);
-            console.log(this.userList);
-            this.cehckedList = [];
-            this.userList.forEach(item => {
-                this.checkedUser.forEach(child => {
-                    if (item.id == child) {
-                        this.cehckedList.push({ id: item.id, username: item.username, isLeader: 0, checked: false });
-                    }
-                })
-            })
-            this.cehckedList[0].isLeader = 1;
-            this.cehckedList[0].checked = true;
-            this.openUser = false;
-        },
-        handleClose() {
-            this.$emit('changMyDialog', { flag: false });
-        },
-        // 鑾峰彇閮ㄩ棬绫诲瀷
-        async getDepartTypeList() {
-            this.departTypeList = await getTypeList(1, '08')
-        },
-        handleCheck(data, checked) {
-            this.depart.parentId = data.departName;
-            // 鑾峰彇褰撳墠閫夋嫨鐨刬d鍦ㄦ暟缁勪腑鐨勭储寮�
-            const indexs = this.selectOrg.orgsid.indexOf(data.id)
-            // 濡傛灉涓嶅瓨鍦ㄦ暟缁勪腑锛屽苟涓旀暟缁勪腑宸茬粡鏈変竴涓猧d骞朵笖checked涓簍rue鐨勬椂鍊欙紝浠h〃涓嶈兘鍐嶆閫夋嫨銆�
-            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.depart.parentId = '';
-            }
-        },
-        // 璁剧疆棰嗗
-        setLeader(idx){
-            this.cehckedList.forEach((item,index)=>{
-                if(index === idx){
-                    item.checked = true;
-                    item.isLeader = 1;
-                }else{
-                    item.checked = false;
-                    item.isLeader = 0;
-                }
-            })
+    // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�
+    getUserList() {
+      // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�佺敤鎴锋煡璇�(鏆傛椂鏀寔鐢佃瘽鍙风爜)
+      this.$axios.get(`sccg/admin/list`).then((res) => {
+        if (res.code === 200) {
+          this.userList = res.data.records;
         }
+      });
     },
-    props: ['refresh', 'changMyDialog']
-}
+    addUser() {
+      console.log(this.checkedUser);
+      console.log(this.userList);
+      this.cehckedList = [];
+      this.userList.forEach((item) => {
+        this.checkedUser.forEach((child) => {
+          if (item.id == child) {
+            this.cehckedList.push({
+              id: item.id,
+              username: item.username,
+              isLeader: 0,
+              checked: false,
+            });
+          }
+        });
+      });
+      this.cehckedList[0].isLeader = 1;
+      this.cehckedList[0].checked = true;
+      this.openUser = false;
+    },
+    handleClose() {
+      this.$emit("changMyDialog", { flag: false });
+    },
+    // 鑾峰彇閮ㄩ棬绫诲瀷
+    async getDepartTypeList() {
+      this.departTypeList = await getTypeList(1, "08");
+    },
+    handleCheck(data, checked) {
+      this.depart.parentId = data.departName;
+      // 鑾峰彇褰撳墠閫夋嫨鐨刬d鍦ㄦ暟缁勪腑鐨勭储寮�
+      const indexs = this.selectOrg.orgsid.indexOf(data.id);
+      // 濡傛灉涓嶅瓨鍦ㄦ暟缁勪腑锛屽苟涓旀暟缁勪腑宸茬粡鏈変竴涓猧d骞朵笖checked涓簍rue鐨勬椂鍊欙紝浠h〃涓嶈兘鍐嶆閫夋嫨銆�
+      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.depart.parentId = "";
+      }
+    },
+    // 璁剧疆棰嗗
+    setLeader(idx) {
+      this.cehckedList.forEach((item, index) => {
+        if (index === idx) {
+          item.checked = true;
+          item.isLeader = 1;
+        } else {
+          item.checked = false;
+          item.isLeader = 0;
+        }
+      });
+    },
+  },
+  props: ["refresh", "changMyDialog"],
+};
 </script>
 <style lang="scss" scoped>
 .createUser {
-    border-radius: 1px;
+  border-radius: 1px;
+  background-color: #09152f;
+
+  main {
+    text-align: left;
+    padding: 0 55px;
     background-color: #09152f;
+    padding-bottom: 50px;
 
-    main {
-        text-align: left;
-        padding: 0 55px;
+    .mainContent {
+      display: flex;
+      justify-content: center;
+      padding-top: 50px;
+
+      &::v-deep .el-form-item__label {
+        color: #4b9bb7;
+      }
+
+      &::v-deep .el-input__inner {
         background-color: #09152f;
-        padding-bottom: 50px;
+        border: 1px solid #17324c;
+      }
 
-        .mainContent {
-            display: flex;
-            justify-content: center;
-            padding-top: 50px;
+      &::v-deep .el-textarea__inner {
+        background-color: #09152f;
+        border: 1px solid #17324c;
+      }
 
-            &::v-deep .el-form-item__label {
-                color: #4b9bb7;
-            }
+      .addPerson {
+        display: flex;
+        list-style: none;
+        padding: 0;
+        flex-wrap: wrap;
+        max-width: 280px;
+        li {
+          color: #fff;
+          text-align: center;
+          font-size: 30px;
+          margin-left: 10px;
+        }
+      }
+      .li-icon {
+        background-color: #cccccc;
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        margin: 0 auto;
+      }
+      .li-btn {
+        background-color: #cccccc;
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+      }
+      .el-form-item__content {
+        width: 400px;
 
-            &::v-deep .el-input__inner {
-                background-color: #09152f;
-                border: 1px solid #17324c;
-            }
+        .el-select {
+          width: 100%;
+        }
+      }
 
-            &::v-deep .el-textarea__inner {
-                background-color: #09152f;
-                border: 1px solid #17324c;
-            }
+      .optionHandleSp {
+        display: flex;
 
-            .addPerson {
-                display: flex;
-                list-style: none;
-                padding: 0;
-
-                li {
-                    background-color: #cccccc;
-                    width: 36px;
-                    height: 36px;
-                    border-radius: 50%;
-                    color: #fff;
-                    text-align: center;
-                    font-size: 30px;
-                    margin-left: 10px;
-                }
-            }
-
-            .el-form-item__content {
-                width: 400px;
-
-                .el-select {
-                    width: 100%;
-                }
-            }
-
-            .optionHandleSp {
-                display: flex;
-
-                .areaNumber,
-                .moreNumber {
-                    flex: 1;
-                }
-
-                .telNumber {
-                    flex: 2;
-                }
-            }
-
+        .areaNumber,
+        .moreNumber {
+          flex: 1;
         }
 
-        .add {
+        .telNumber {
+          flex: 2;
+        }
+      }
+    }
+
+    .add {
+      position: relative;
+
+      .card {
+        position: absolute;
+        z-index: 2000;
+        right: 0;
+
+        .box-card {
+          max-height: 200px;
+          overflow: hidden;
+          background-color: #09152f;
+          position: relative;
+          max-width: 220px;
+
+          .scrollWrap {
+            overflow: scroll;
+            height: 160px;
             position: relative;
+            color: #4b9bb7;
 
-            .card {
-                position: absolute;
-                z-index: 2000;
-                right: 0;
+            .el-checkbox-group {
+              display: flex;
+              flex-direction: column;
 
-                .box-card {
-                    max-height: 200px;
-                    overflow: hidden;
-                    background-color: #09152f;
-                    position: relative;
-                    max-width: 220px;
-
-                    .scrollWrap {
-                        overflow: scroll;
-                        height: 160px;
-                        position: relative;
-                        color: #4b9bb7;
-
-                        .el-checkbox-group {
-                            display: flex;
-                            flex-direction: column;
-
-                            .el-checkbox {
-                                line-height: 20px;
-                            }
-                        }
-                    }
-
-                    .myclear {
-                        width: 100%;
-                        line-height: 20px;
-                        color: #4b9bb7;
-                        display: flex;
-                        justify-content: space-between;
-                    }
-
-                    .hidebar {
-                        position: absolute;
-                        top: 77px;
-                        right: 20px;
-                        width: 20px;
-                        height: 160px;
-                        background-color: #09152f;
-                    }
-
-                    .item {
-                        line-height: 40px;
-                    }
-                }
+              .el-checkbox {
+                line-height: 20px;
+              }
             }
+          }
+
+          .myclear {
+            width: 100%;
+            line-height: 20px;
+            color: #4b9bb7;
+            display: flex;
+            justify-content: space-between;
+          }
+
+          .hidebar {
+            position: absolute;
+            top: 77px;
+            right: 20px;
+            width: 20px;
+            height: 160px;
+            background-color: #09152f;
+          }
+
+          .item {
+            line-height: 40px;
+          }
         }
+      }
     }
+  }
 
-    .li-item {
-        display: flex;
-        flex-direction: column;
-    }
+  .li-item {
+    display: flex;
+    flex-direction: column;
+  }
 
-    .leader {
-        color: red;
-    }
-
-    footer {
-        border-top: 1px solid #fff;
-        height: 80px;
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        padding-right: 20px;
-    }
+  .leader {
+    color: red;
+  }
+  .el-input {
+    width: 280px !important;
+  }
+  footer {
+    border-top: 1px solid #fff;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding-right: 20px;
+  }
 }
 </style>
\ No newline at end of file

--
Gitblit v1.8.0