fc

src/App.vue

@@ -19,7 +19,7 @@
         <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="sureSave(1)">确 定</el-button>
       </span>
-    </el-dialog> -->
+    </el-dialog>-->
   </div>
 </template>
 
@@ -126,14 +126,23 @@ body {
 // ::-webkit-scrollbar-corner 边角
 // ::-webkit-resizer 定义右下角拖动块的样式
 /*滚动条样式*/
-.el-tooltip__popper.is-light{
+.el-tooltip__popper.is-light {
   max-width: 1000px;
   line-height: 26px !important;
 }
-.el-tooltip__popper.is-dark{
+.el-tooltip__popper.is-dark {
   background-color: rgba(51, 50, 50, 0.52) !important;
 }
-.el-tooltip__popper.is-dark .popper__arrow{ //tooltip箭头样式
+.el-tooltip__popper.is-dark .popper__arrow {
+  //tooltip箭头样式
   opacity: 0.52;
+}
+.el-scrollbar {
+  ::-webkit-scrollbar-track {
+    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 2px;
+    background: #fff;
+    opacity: 0;
   }
+}
 </style>

src/router/index.js

@@ -91,6 +91,14 @@ const routes = [
 							title: '定制日程',
 						},
 					},
+          {
+            path:'reserveRecord',
+            name:'reserveRecord',
+            component:()=>import('../views/reserveRecord/index.vue'),
+            meta:{
+              title:'定制日程'
+            },
+          },
 					{
 						path: 'operation',
 						name: 'operation',
@@ -147,6 +155,18 @@ const routes = [
 									previous: true
 								},
 							},
+              {
+                path:'noticeMeeting',
+                name:'noticeMeeting',
+                component: () => 
+                import('../views/meeting/operation/noticeMeeting/index.vue'),
+                meta: {
+									title: 'prepare',
+									nav: true,
+									next: true,
+									previous: true
+								},
+              },
 							{
 								path: 'chooseModule',
 								name: 'chooseModule',

src/views/home.vue

 <template>
   <div class="home">
-    <div
-      class="home_btn"
-      @click="hideGuide"
-      v-show="$store.state.showImageFlag"
-    ></div>
+    <div class="home_btn" @click="hideGuide" v-show="$store.state.showImageFlag"></div>
     <div class="home_loadings" v-show="$store.state.showImageFlag"></div>
     <div
       class="app_header"
@@ -18,7 +14,7 @@
       "
     >
       <div class="app_header_left" @click="toHome">
-        <img src="../assets/img/logo.png" alt="" />
+        <img src="../assets/img/logo.png" alt />
         <span>市委在线办会</span>
       </div>
       <div class="header_router">
@@ -46,20 +42,16 @@
         <!--            {{ i.value }}</span>-->
         <!--        </router-link>-->
         <div class="user_name">
-          <img src="../assets/ty_image/user.jpeg" alt="" />
+          <img src="../assets/ty_image/user.jpeg" alt />
         </div>
         <div class="user_out">
           <el-dropdown @visible-change="visibleChange">
             <span class="el-dropdown-link">
               {{ userName }}
-              <i
-                :class="isupIcon ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
-              ></i>
+              <i :class="isupIcon ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
             </span>
             <el-dropdown-menu slot="dropdown">
-              <el-button type="text" class="out_button" @click="outLogin"
-                >退出登录</el-button
-              >
+              <el-button type="text" class="out_button" @click="outLogin">退出登录</el-button>
             </el-dropdown-menu>
           </el-dropdown>
         </div>
@@ -81,13 +73,13 @@
 
 <script>
 export default {
-  name: "home",
+  name: 'home',
   data() {
     return {
-      userName: "user",
+      userName: 'user',
       isupIcon: false,
-      icon: "el-icon-arrow-up",
-      isMeeting: "meeting",
+      icon: 'el-icon-arrow-up',
+      isMeeting: 'meeting',
       // router_link: [
       //   {
       //     path: "/",
@@ -102,98 +94,98 @@ export default {
       // ],
       router_link: [
         {
-          path: "/beforeMeeting",
-          name: "meeting",
-          value: "会议管理",
+          path: '/beforeMeeting',
+          name: 'meeting',
+          value: '会议管理',
         },
         {
-          path: "/afterMeeting",
-          name: "system",
-          value: "会议报表",
+          path: '/reserveRecord',
+          name: 'reserveRecord',
+          value: '会议室预定记录',
         },
         {
-          path: "/schedule",
-          name: "meeting",
-          value: "会议日程",
+          path: '/afterMeeting',
+          name: 'system',
+          value: '会议报表',
         },
         {
-          path: "/system",
-          name: "system",
-          value: "系统管理",
+          path: '/system',
+          name: 'system',
+          value: '系统管理',
         },
       ],
       calcHeight: 0,
       calcWidth: 1,
       disSP: null,
-    };
+    }
   },
   watch: {
     $route(val) {
-      this.setRoute(val);
+      this.setRoute(val)
     },
     getSession() {
-      this.userName = sessionStorage.getItem("cnName") || "user";
+      this.userName = sessionStorage.getItem('cnName') || 'user'
     },
   },
   computed: {
     getSession() {
-      return this.$store.state.casFlag;
+      return this.$store.state.casFlag
     },
   },
   created() {
-    this.setRoute(this.$route);
-    if (sessionStorage.getItem("ty_token")) {
-      this.userName = sessionStorage.getItem("cnName") || "user";
+    this.setRoute(this.$route)
+    if (sessionStorage.getItem('ty_token')) {
+      this.userName = sessionStorage.getItem('cnName') || 'user'
     }
   },
   methods: {
     hideGuide() {
-      this.$store.commit("changeShowImage", false);
+      this.$store.commit('changeShowImage', false)
       let data = {
         navigationStatus: 2,
         navigationType: 2,
-        sysUserId: sessionStorage.getItem("userId"),
-      };
+        sysUserId: sessionStorage.getItem('userId'),
+      }
       this.$axios
         .postUpdateStatus(data)
         .then((res) => {
           if (res.data.code === 200) {
-            sessionStorage.setItem("userNDirection2", 2);
+            sessionStorage.setItem('userNDirection2', 2)
           }
         })
-        .catch((err) => {});
+        .catch((err) => {})
     },
     toHome() {
-      this.$router.push({ path: "/" });
+      this.$router.push({ path: '/' })
     },
     outLogin() {
-      sessionStorage.setItem("cnName", "");
-      sessionStorage.setItem("userName", "");
-      sessionStorage.setItem("ty_token", "");
-      sessionStorage.setItem("sysRoles", "");
-      sessionStorage.setItem("userId", "");
-      sessionStorage.setItem("userNDirection1", "");
-      sessionStorage.setItem("userNDirection2", "");
-      this.$router.push("/login");
+      sessionStorage.setItem('cnName', '')
+      sessionStorage.setItem('userName', '')
+      sessionStorage.setItem('ty_token', '')
+      sessionStorage.setItem('sysRoles', '')
+      sessionStorage.setItem('userId', '')
+      sessionStorage.setItem('userNDirection1', '')
+      sessionStorage.setItem('userNDirection2', '')
+      this.$router.push('/login')
     },
     visibleChange(val) {
-      this.isupIcon = val;
+      this.isupIcon = val
     },
     setRoute(val) {
-      console.log(val);
-      if (val.name === "perPreparation") {
+      console.log(val)
+      if (val.name === 'perPreparation') {
       }
       if (val.matched[1].name) {
-        if (val.matched[1].name == "meeting") {
-          this.isMeeting = "system";
+        if (val.matched[1].name == 'meeting') {
+          this.isMeeting = 'system'
         }
-        if (val.matched[1].name == "system") {
-          this.isMeeting = "meeting";
+        if (val.matched[1].name == 'system') {
+          this.isMeeting = 'meeting'
         }
       }
     },
   },
-};
+}
 </script>
 <style lang="less">
 .el-dropdown-link {
@@ -215,7 +207,7 @@ export default {
 .home_loadings {
   width: 100%;
   height: 100%;
-  background-image: url("../assets/meetingPalce/paiwei/seatLoading.png");
+  background-image: url('../assets/meetingPalce/paiwei/seatLoading.png');
   background-repeat: no-repeat;
   background-size: 100% 100%;
   position: fixed;
@@ -287,7 +279,8 @@ to {
       display: flex;
       left: 510px;
       .router_div {
-        width: 152px;
+        // width: 152px;
+        padding: 0px 35px;
         height: 74px;
         cursor: pointer;
         background: transparent;
@@ -303,7 +296,7 @@ to {
         .bottom_border {
           position: absolute;
           bottom: 2px;
-          left: 56px;
+          left: 50% - 10px;
           width: 40px;
           height: 3px;
           background: #ffffff;
@@ -314,7 +307,7 @@ to {
     .app_header_left {
       display: flex;
       align-items: center;
-      font-family: "MStiffHei PRC";
+      font-family: 'MStiffHei PRC';
       font-size: 28px;
       font-weight: 800;
       color: #ffffff;

src/views/meeting/componets/ConfDialog.vue

@@ -14,11 +14,7 @@
       class="demo-ruleForm"
     >
       <el-col :span="24">
-        <el-form-item
-          label="会议主题:"
-          class="textarea_wrap"
-          prop="processName"
-        >
+        <el-form-item label="会议主题:" class="textarea_wrap" prop="processName">
           <el-input
             v-model="formData.processName"
             v-if="dialogVisible"
@@ -42,13 +38,12 @@
                 :key="item.id"
                 :label="item.unitName"
                 :value="item.id"
-              >
-              </el-option>
+              ></el-option>
             </el-select>
           </el-form-item>
         </el-col>
       </el-col>
-      <el-col :span="12">
+      <!-- <el-col :span="12">
         <el-form-item label="开始时间:" prop="startDate">
           <el-date-picker
             :picker-options="pickerOptions0"
@@ -59,8 +54,8 @@
           >
           </el-date-picker>
         </el-form-item>
-      </el-col>
-      <el-col :span="12">
+      </el-col>-->
+      <!-- <el-col :span="12">
         <el-form-item label="结束时间:">
           <el-date-picker
             :picker-options="pickerOptions1"
@@ -71,7 +66,7 @@
           >
           </el-date-picker>
         </el-form-item>
-      </el-col>
+      </el-col>-->
       <el-col :span="12">
         <el-form-item label="联系人:">
           <el-input v-model="formData.processPerson"></el-input>
@@ -89,22 +84,18 @@
             v-if="dialogVisible"
             id="textarea"
             type="textarea"
-            maxlength="249"
+            maxlength="500"
             show-word-limit
             :rows="2"
-          >
-          </el-input>
+          ></el-input>
         </el-form-item>
       </el-col>
     </el-form>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="addDialogClose">取 消</el-button>
       <el-button
-        type="primary"
-        :disabled="disableFlag"
-        @click="confirm('ruleForm')"
-        >确 定</el-button
-      >
+        @click="addDialogClose"
+      >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;取 消&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
+      <el-button type="primary" :disabled="disableFlag" @click="confirm('ruleForm')">进入编辑会议</el-button>
     </span>
   </el-dialog>
 </template>
@@ -112,36 +103,34 @@
 export default {
   data() {
     return {
-      danweiList: "",
+      danweiList: '',
       pickerOptions0: {
         disabledDate: (time) => {
-          return time.getTime() < Date.now() - 8.64e7;
+          return time.getTime() < Date.now() - 8.64e7
         },
       },
       pickerOptions1: {
         disabledDate: (time) => {
-          return time.getTime() < Date.now() - 8.64e7;
+          return time.getTime() < Date.now() - 8.64e7
         },
       },
       rules: {
-        unitId: [{ required: true, message: "请选择单位", trigger: "blur" }],
-        processName: [
-          { required: true, message: "请输入会议主题", trigger: "blur" },
-        ],
-        unitName: [{ required: true, message: "请输入单位", trigger: "blur" }],
+        unitId: [{ required: true, message: '请选择单位', trigger: 'blur' }],
+        processName: [{ required: true, message: '请输入会议主题', trigger: 'blur' }],
+        unitName: [{ required: true, message: '请输入单位', trigger: 'blur' }],
         processPhone: [
           {
             required: false,
-            trigger: "blur",
-            message: "请输入数字",
+            trigger: 'blur',
+            message: '请输入数字',
             pattern: /(^[1-9]\d*$)/,
           },
         ],
-        startDate: [
-          { required: true, message: "请选择会议开始时间", trigger: "blur" },
-        ],
+        // startDate: [
+        //   { required: true, message: "请选择会议开始时间", trigger: "blur" },
+        // ],
       },
-    };
+    }
   },
   props: {
     dialogVisible: {
@@ -156,18 +145,18 @@ export default {
     forbid: Boolean,
   },
   mounted() {
-    this.find_danwei();
+    this.find_danwei()
   },
   methods: {
     find_danwei() {
       let data = {
-        info: "",
-      };
+        info: '',
+      }
       setTimeout(() => {
         this.$axios.findOrg(data).then((res) => {
-          this.danweiList = res.data.data;
-        });
-      }, 0);
+          this.danweiList = res.data.data
+        })
+      }, 0)
     },
     // remoteMethodUnit(query) {
     //   console.log(123)
@@ -181,22 +170,22 @@ export default {
     //   }, 0);
     // },
     selectChange(e) {
-      this.formData.unitId = e;
+      this.formData.unitId = e
     },
     addDialogClose() {
-      this.$refs["ruleForm"].resetFields();
-      this.$emit("addDialogClose");
+      this.$refs['ruleForm'].resetFields()
+      this.$emit('addDialogClose')
     },
     confirm(val) {
       this.$refs[val].validate((valid) => {
         if (valid) {
-          this.$emit("update:disableFlag", true);
-          this.$emit("confirm");
+          this.$emit('update:disableFlag', true)
+          this.$emit('confirm')
         } else {
-          return false;
+          return false
         }
-      });
+      })
     },
   },
-};
+}
 </script>
\ No newline at end of file

src/views/meeting/operation/chooseModule/index.vue

 <template>
   <div class="confMain">
-    <div class="top" v-if="$route.query.isProcess == 1">
+    <!-- <div class="top" v-if="$route.query.isProcess == 1">
       <div>是否使用会议模板：</div>
       <div>
         <el-radio v-model="radio" :label="1" @change="changeRule" v-show="oneself===1">使用</el-radio>
         <el-radio v-model="radio" :label="2" @change="changeRule">不使用</el-radio>
       </div>
-    </div>
+    </div>-->
     <div class="module_title">
-      <div class="tag"></div>
-      <div>选会议室</div>
+      <div class="title_reserve" @click="switchOperation(1)">
+        <div :class="isActive===1?'fontCor':''">预定会议室</div>
+        <div :class="isActive===1?'line':''"></div>
+      </div>
+      <div class="title_layout" @click="switchOperation(2)">
+        <div :class="isActive===2?'fontCor':''">选择会议室布局</div>
+        <div :class="isActive===2?'line':''"></div>
+      </div>
+      <div class="black_line"></div>
+    </div>
+    <div class="select">
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="120px"
+        class="demo-ruleForm"
+        :inline="true"
+      >
+        <el-form-item label="预计使用时间：" prop="time">
+          <el-date-picker
+            v-model="ruleForm.time"
+            :picker-options="pickerOptions"
+            type="date"
+            placeholder="选择日期"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="容纳人数：" class="sort">
+          <el-select class="secSort" v-model="ruleForm.personNum" placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+          <el-input class="num" v-model="personNum" placeholder="请输入人数"></el-input>
+        </el-form-item>
+        <el-form-item size="large">
+          <div class="select_btn">查询</div>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="confence">
+      <div class="confence_left">
+        会议室：
+        <div class="confence_name">{{123}}</div>
+      </div>
+      <div class="confence_tips">
+        <div>图片</div>
+        <div>操作说明：初次点击"时间块"选择起点时间，再次点击选择结束时间；深灰色时间块：为已预定时间段。</div>
+      </div>
     </div>
     <div class="confs">
       <div class="zuo" :class="{ showZuo: listIndex > 0 }" @click="showConfLeft()"></div>
@@ -28,48 +79,83 @@
         @click="showConfRight()"
       ></div>
     </div>
-    <div class="module_title">
-      <div class="tag"></div>
-      <div>选会议室模板</div>
-      <div class="module_des" v-show="radio == 1">说明：使用会议模板，参会人员自动按会议模板数据进行分区及排座。</div>
-      <div
-        class="module_des"
-        v-show="radio == 2"
-      >说明：布局是会议室的座位布局图，只划定座位区域范围。选择布局后，需在布局上划定座位区域（即确定座位数量和位置），再进行人员排座。</div>
+    <div class="message">
+      <span class="message_Name">XX会议室</span>
+      <span class="message_box">
+        地址：
+        <span class="message_tips">XXX</span>
+      </span>
+      <span class="message_box">
+        容纳人数：
+        <span>XXX人</span>
+      </span>
+      <span class="message_box">
+        配置：
+        <span>投影、电视、白板、视频</span>
+      </span>
+    </div>
+    <div class="time_module">
+      <!-- <div class="time_section">
+        <div class="time_num" v-for="(item,index) in hours" :key="index">
+          <div class="time">{{item}}</div>
+          <div
+            class="box"
+            :class="[selectFuc(item,index)?'selectTrue':'',selectClk(item,index)?'selClk':'']"
+            @click="selectRange(item,index)"
+          ></div>
+        </div>
+      </div>-->
+      <time-list
+        :conferenceProcessReservationRecordList="conferenceProcessReservationRecordList"
+        @getTimeRange="getTimeRange"
+      ></time-list>
+      <div class="time_bottom">
+        <div class="time_tips">注：更换时间不换会议室，不影响已排座数据；同一时间段重复预定的，遇此情况请线下协商会议改期。</div>
+        <div class="yuding">预定</div>
+      </div>
     </div>
-    <div class="modules">
-      <div class="zuo" :class="{ showZuo: moduleIndex > 0 }" @click="showModuleLeft()"></div>
-      <div class="items" :class="{ center: moduleList.length < 3 }">
+    <div v-if="false">
+      <div class="module_title">
+        <div class="tag"></div>
+        <div>选会议室模板</div>
         <div
-          class="moduleItem"
-          v-for="(item, index) of moduleList"
-          :key="index"
-          @click="chooseModule(item)"
-        >
-          <div :class="{ choose: item.id == moduleId }">
-            <img :src="getImgUrl(item.picPath)" />
-          </div>
-          <div class="name">
-            <span v-show="radio == 1">{{ item.conferenceName }}-{{ item.tempName }}</span>
-            <span v-show="radio == 2">{{ item.conferenceName }}-{{ item.confLayoutName }}</span>
-            <div v-show="radio == 1" class="check" @click="checkImg(getImgUrl(item.picPath))">查看</div>
-          </div>
-          <div v-show="radio == 1">
+          class="module_des"
+          v-show="radio == 2"
+        >说明：布局是会议室的座位布局图，只划定座位区域范围。选择布局后，需在布局上划定座位区域（即确定座位数量和位置），再进行人员排座。</div>
+      </div>
+
+      <div class="modules">
+        <div class="zuo" :class="{ showZuo: moduleIndex > 0 }" @click="showModuleLeft()"></div>
+        <div class="items" :class="{ center: moduleList.length < 3 }">
+          <div
+            class="moduleItem"
+            v-for="(item, index) of moduleList"
+            :key="index"
+            @click="chooseModule(item)"
+          >
+            <div :class="{ choose: item.id == moduleId }">
+              <img :src="getImgUrl(item.picPath)" />
+            </div>
+            <div class="name">
+              <!-- <span v-show="radio == 1">{{ item.conferenceName }}-{{ item.tempName }}</span> -->
+              <span v-show="radio == 2">{{ item.conferenceName }}-{{ item.confLayoutName }}</span>
+              <!-- <div v-show="radio == 1" class="check" @click="checkImg(getImgUrl(item.picPath))">查看</div> -->
+            </div>
+            <!-- <div v-show="radio == 1">
             <span>参会人数：{{ item.personnelNum }}人</span>
             <span>&nbsp;&nbsp;座位数量：{{ item.seatNum }}座</span>
             <span>&nbsp;&nbsp;分区：{{ item.unitNum }}区</span>
-
-            <!-- <i class="module_bianji" @click.stop="toMoudleChange(item)"></i> -->
           </div>
-          <div v-show="radio == 1">{{ item.des }}</div>
-          <div></div>
+            <div v-show="radio == 1">{{ item.des }}</div>-->
+            <div></div>
+          </div>
         </div>
+        <div
+          class="you"
+          :class="{ showYou: moduleIndex + 3 < originModuleList.length }"
+          @click="showModuleRight()"
+        ></div>
       </div>
-      <div
-        class="you"
-        :class="{ showYou: moduleIndex + 3 < originModuleList.length }"
-        @click="showModuleRight()"
-      ></div>
     </div>
     <!-- <div class="module_title">
       <div class="tag"></div>
@@ -124,22 +210,31 @@
 
 <script>
 import { Loading } from 'element-ui'
-
+import timeList from './timeList.vue'
 export default {
+  components: { timeList },
   watch: {
-    oneself(newVal, oldVal) {
-      console.log(newVal, oldVal)
-      if (newVal == 1) {
-        this.radio = 1
-      } else {
-        this.radio = 2
-      }
-      this.changeRule()
+    // oneself(newVal, oldVal) {
+    //   console.log(newVal, oldVal)
+    //   if (newVal == 1) {
+    //     this.radio = 1
+    //   } else {
+    //     this.radio = 2
+    //   }
+    //   this.changeRule()
+    // },
+    timeSelectObj(newVal, oldVal) {
+      console.log('new', newVal, 'old', oldVal)
     },
   },
   props: ['oneself'],
   data() {
     return {
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() < Date.now() - 24 * 3600 * 1000
+        },
+      },
       loadingOptions: {
         lock: true,
         text: '',
@@ -148,7 +243,7 @@ export default {
       },
       confList: [],
       trueList: [],
-      radio: 1,
+      radio: 2,
       listIndex: 0,
       moduleIndex: 0,
       testList: [1, 2, 3, 4, 5, 6],
@@ -161,6 +256,94 @@ export default {
       isShowSeatNum: '1',
       dataLists: [],
       // oneself: true,
+      isActive: 1,
+      ruleForm: {
+        time: Date.now(),
+        personNum: null,
+      },
+      rules: {
+        time: [{ required: true, message: '请选择时间', trigger: 'blur' }],
+      },
+      options: [],
+      hours: [
+        '07:00',
+        '07:15',
+        '07:30',
+        '07:45',
+        '08:00',
+        '08:15',
+        '08:30',
+        '08:45',
+        '09:00',
+        '09:15',
+        '09:30',
+        '09:45',
+        '10:00',
+        '10:15',
+        '10:30',
+        '10:45',
+        '11:00',
+        '11:15',
+        '11:30',
+        '11:45',
+        '12:00',
+        '12:15',
+        '12:30',
+        '12:45',
+        '13:00',
+        '13:15',
+        '13:30',
+        '13:45',
+        '14:00',
+        '14:15',
+        '14:30',
+        '14:45',
+        '15:00',
+        '15:15',
+        '15:30',
+        '15:45',
+        '16:00',
+        '16:15',
+        '16:30',
+        '16:45',
+        '17:00',
+        '17:15',
+        '17:30',
+        '17:45',
+        '18:00',
+        '18:15',
+        '18:30',
+        '18:45',
+        '19:00',
+        '19:15',
+        '19:30',
+        '19:45',
+        '20:00',
+        '20:15',
+        '20:30',
+        '20:45',
+        '21:00',
+        '21:15',
+        '21:30',
+        '21:45',
+      ],
+      // timeSelectObj: { createdTime: null, endTime: null },
+      //查询到的当前会议室的详细信息List
+      conferenceProcessReservationRecordList: [
+        {
+          conferenceId: '',
+          id: '',
+          processId: '',
+          processName: '',
+          processPerson: '',
+          processPhone: '',
+          processStatus: 0,
+          reservationEndTime: '08:00',
+          reservationStartTime: '10:00',
+          unitId: '',
+          unitName: '',
+        },
+      ],
     }
   },
   created() {
@@ -186,11 +369,22 @@ export default {
       }
     })
     this.$forceUpdate()
-    console.log('oneself', this.oneself)
+    // console.log('oneself', this.oneself)
     console.log('createType', sessionStorage.getItem('createType'))
   },
 
   methods: {
+    //子组件返回选中的时间段
+    getTimeRange(value) {
+      console.log(value)
+    },
+    switchOperation(val) {
+      if (val === 1) {
+        this.isActive = 1
+      } else {
+        this.isActive = 2
+      }
+    },
     checkImg(item) {
       window.open(item)
     },
@@ -379,6 +573,39 @@ export default {
   align-items: center;
   position: relative;
   font-size: 18px;
+  .black_line {
+    position: absolute;
+    bottom: 27px;
+    width: 90%;
+    height: 1px;
+    background: #e5ebef;
+    border-radius: 4px 4px 4px 4px;
+    z-index: -1;
+  }
+  .title_reserve,
+  .title_layout {
+    // width: 30px;
+    height: 100%;
+    text-align: center;
+    margin-right: 48px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: 18px;
+    cursor: pointer;
+    .line {
+      width: 120%;
+      height: 4px;
+      background: #5474e8;
+      border-radius: 1px 1px 1px 1px;
+      opacity: 1;
+      position: relative;
+    }
+    .fontCor {
+      color: #5474e8;
+      font-weight: bold;
+    }
+  }
   .module_des {
     position: absolute;
     font-size: 16px;
@@ -391,6 +618,95 @@ export default {
     margin-right: 6px;
   }
 }
+.select {
+  width: 90%;
+  margin: 0 auto;
+  // margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  .select_text {
+    font-size: 16px;
+    font-weight: normal;
+    color: #778ca2;
+    line-height: 19px;
+  }
+  .select_btn {
+    width: 66px;
+    height: 40px;
+    background: #5474e8;
+    box-shadow: 0px 1px 8px 1px rgba(84, 116, 232, 0.2);
+    border-radius: 2px 2px 2px 2px;
+    opacity: 1;
+    color: #fff;
+    text-align: center;
+    line-height: 40px;
+    margin-left: 48px;
+  }
+  .demo-ruleForm {
+    .sort {
+      // width: 409px;
+      margin-right: 0px !important;
+      /deep/.el-form-item__content {
+        width: 252px;
+        border: 1px solid #dcdfe6;
+        border-radius: 5px;
+        // display: flex;
+        .secSort {
+          width: 90px;
+          .el-input--suffix {
+            .el-input__inner {
+              border-top-right-radius: 0px;
+              border-bottom-right-radius: 0px;
+              border-right: 0px !important;
+              border: none;
+            }
+          }
+        }
+        .num {
+          width: 150px;
+          margin-left: -2px;
+          .el-input__inner {
+            border-top-left-radius: 0px;
+            border-bottom-left-radius: 0px;
+            border-left: 0px;
+            border: none;
+            // border: 1px solid #dcdfe6;
+          }
+        }
+      }
+    }
+  }
+}
+.confence {
+  width: 90%;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  height: 32px;
+  background: #edeff2;
+  border-radius: 0px 0px 0px 0px;
+  opacity: 1;
+  position: relative;
+  margin-bottom: 24px;
+  .confence_left {
+    display: flex;
+    align-items: center;
+    padding-left: 32px;
+    color: #778ca2;
+    .confence_name {
+      color: #3a3c4b;
+    }
+  }
+  .confence_tips {
+    position: absolute;
+    right: 0;
+    display: flex;
+    line-height: 32px;
+    font-size: 14px;
+    font-weight: normal;
+    color: #778ca2;
+  }
+}
 .confMain {
   width: 100%;
   height: 100%;
@@ -464,7 +780,6 @@ export default {
     .you {
       width: 14px;
       height: 21px;
-      // border: 1px solid red;
       background-image: url('../../../../assets/meetingPalce/paiwei/noRight.png');
       background-repeat: no-repeat;
       background-size: 100% 100%;
@@ -602,5 +917,54 @@ export default {
       color: #fff !important;
     }
   }
+  .message {
+    width: 90%;
+    margin: 0 auto;
+    height: 32px;
+    line-height: 32px;
+    border-radius: 0px 0px 0px 0px;
+    background: rgba(118, 144, 237, 0.2);
+    margin-bottom: 20px;
+    .message_Name {
+      width: 200px;
+      padding-left: 24px;
+      margin-right: 45px;
+      color: #5474e8;
+    }
+    .message_box {
+      margin-right: 45px;
+      color: #778ca2;
+      span {
+        color: #3a3c4b;
+      }
+    }
+  }
+  .time_module {
+    width: 88%;
+    margin: 0 auto;
+    .time_bottom {
+      position: relative;
+      .time_tips {
+        font-size: 14px;
+        color: #f56466;
+        padding-left: 3px;
+      }
+      .yuding {
+        width: 100px;
+        height: 40px;
+        background: #7690ed;
+        box-shadow: 0px 1px 8px 1px rgba(84, 116, 232, 0.2);
+        border-radius: 2px 2px 2px 2px;
+        opacity: 1;
+        text-align: center;
+        color: #fff;
+        line-height: 40px;
+        position: absolute;
+        top: 10px;
+        right: calc(50% - 50px);
+        cursor: pointer;
+      }
+    }
+  }
 }
 </style>
\ No newline at end of file

src/views/meeting/operation/chooseModule/timeList.vue

+<template>
+  <div class="timeList">
+    <div class="time_num" v-for="(item,index) in hours" :key="index">
+      <div class="time">{{item}}</div>
+      <div
+        class="box"
+        :class="[selectFuc(item,index)?'selectTrue':'',selectClk(item,index)?'selClk':'']"
+        @click="selectRange(item,index)"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['conferenceProcessReservationRecordList'],
+  data() {
+    return {
+      hours: [
+        '07:00',
+        '07:15',
+        '07:30',
+        '07:45',
+        '08:00',
+        '08:15',
+        '08:30',
+        '08:45',
+        '09:00',
+        '09:15',
+        '09:30',
+        '09:45',
+        '10:00',
+        '10:15',
+        '10:30',
+        '10:45',
+        '11:00',
+        '11:15',
+        '11:30',
+        '11:45',
+        '12:00',
+        '12:15',
+        '12:30',
+        '12:45',
+        '13:00',
+        '13:15',
+        '13:30',
+        '13:45',
+        '14:00',
+        '14:15',
+        '14:30',
+        '14:45',
+        '15:00',
+        '15:15',
+        '15:30',
+        '15:45',
+        '16:00',
+        '16:15',
+        '16:30',
+        '16:45',
+        '17:00',
+        '17:15',
+        '17:30',
+        '17:45',
+        '18:00',
+        '18:15',
+        '18:30',
+        '18:45',
+        '19:00',
+        '19:15',
+        '19:30',
+        '19:45',
+        '20:00',
+        '20:15',
+        '20:30',
+        '20:45',
+        '21:00',
+        '21:15',
+        '21:30',
+        '21:45',
+      ],
+      //确定创建会议室obj
+      timeSelectObj: {
+        createdTime: '',
+        endTime: '',
+      },
+    }
+  },
+  methods: {
+    //比较时间
+    timeStape(time) {
+      if (time !== null) {
+        let s = ''
+        let hour = time.split(':')[0]
+        let min = time.split(':')[1]
+        // let sec = time.split(':')[2]
+        // console.log(sec)
+        s = Number(hour * 3600) + Number(min * 60)
+        // console.log(s)
+        return s
+      }
+    },
+    //选中的时间区间
+    selectRange(item, index) {
+      if (this.timeSelectObj.createdTime && this.timeSelectObj.endTime) {
+        this.timeSelectObj.createdTime = item
+        this.timeSelectObj.endTime = ''
+      } else {
+        if (!this.timeSelectObj.createdTime) {
+          this.timeSelectObj.createdTime = item
+        } else {
+          if (this.timeStape(this.timeSelectObj.createdTime) >= this.timeStape(item)) {
+            this.timeSelectObj.createdTime = item
+          } else {
+            this.timeSelectObj.endTime = item
+          }
+        }
+      }
+      this.$emit('getTimeRange', this.timeSelectObj)
+    },
+    //已经选中的样式
+    selectFuc(item, index) {
+      for (let i = 0; i < this.conferenceProcessReservationRecordList.length; i++) {
+        if (
+          this.timeStape(this.conferenceProcessReservationRecordList[i].reservationStartTime) >= this.timeStape(item) &&
+          this.timeStape(this.conferenceProcessReservationRecordList[i].reservationEndTime) <= this.timeStape(item)
+        ) {
+          return true
+        }
+      }
+    },
+    //单击选中后的样式
+    selectClk(item, index) {
+      if (this.timeSelectObj.createdTime && this.timeSelectObj.endTime) {
+        // console.log(1)
+        if (
+          this.timeStape(this.timeSelectObj.createdTime) <= this.timeStape(item) &&
+          this.timeStape(this.timeSelectObj.endTime) >= this.timeStape(item)
+        ) {
+          return true
+        }
+      } else {
+        if (this.timeStape(this.timeSelectObj.createdTime) == this.timeStape(item)) {
+          return true
+        }
+      }
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.timeList {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  .time_num {
+    width: 5%;
+    height: 112px;
+    text-align: center;
+    margin-bottom: 5px;
+    .time {
+      width: 100%;
+      height: 32px;
+      line-height: 32px;
+
+      color: #778ca2;
+      background: #f7f8fa;
+      border-top: 1px solid #ebecee;
+      border-bottom: 1px solid #ebecee;
+    }
+    .box {
+      width: 100%;
+      height: 80px;
+      background: #fff;
+      border-bottom: 1px solid #ebecee;
+      cursor: pointer;
+    }
+    .box:hover {
+      background: rgba(57, 135, 240, 0.2);
+    }
+    .selectTrue {
+      background: rgba(119, 140, 162, 0.2);
+    }
+    .selClk {
+      background: rgba(57, 135, 240, 0.2);
+    }
+  }
+  .time_num:nth-child(1),
+  .time_num:nth-child(21),
+  .time_num:nth-child(41) {
+    .time,
+    .box {
+      border-left: 1px solid #ebecee;
+    }
+  }
+  .time_num:nth-child(20),
+  .time_num:nth-child(40),
+  .time_num:nth-child(60) {
+    .time {
+      border-right: 1px solid #ebecee;
+    }
+    .box {
+      border-right: 1px solid #ebecee;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/meeting/operation/noticeMeeting/index.vue

+<template>
+  <div class="main_wrap">
+    <!-------------------------新手引导---------------------------->
+    <div class="new_help" @click="showDirection"></div>
+    <div
+      class="direction"
+      :class="
+        dir === 1 ? 'direction1' : dir === 2 ? 'direction2' : 'direction3'
+      "
+      v-if="dir"
+    >
+      <div class="but but1" @click="iKnow()"></div>
+      <div class="but but2" @click="next()"></div>
+      <div class="but but3" @click="prev()"></div>
+    </div>
+    <div class="body_content_wrap">
+      <div class="area_person_display">
+        <div class="area_display_wrap">
+          <div class="data_left">
+            <div>
+              参会总人数：
+              <!--              <span-->
+              <!--                  :style="{-->
+              <!--                  color:-->
+              <!--                    chosenArea.areaPersonnelExpectNum > chosenArea.seatNum-->
+              <!--                      ? '#F56466'-->
+              <!--                      : '#778CA2',-->
+              <!--                }">-->
+              <!--                {{ confData.personnels.length }}人-->
+              <!--              </span>-->
+              <span>{{ confData.personnels.length }}人</span>
+            </div>
+          </div>
+          <div class="area_display">
+            <div
+              class="all_person"
+              :class="[
+                { no_area: activeIndex !== 0 },
+                { activeNoArea: activeIndex === 0 },
+              ]"
+              @click="chooseAll(0)"
+            >
+              <div class="area_text">全部通知</div>
+            </div>
+            <draggable
+              :setData="() => {}"
+              class="selection_right_but_wrap"
+              v-model="confData.confPersonAreaVos"
+              :options="dragOptions"
+              :move="areaMove"
+              @start="areaStart"
+              @end="areaEnd"
+              :disabled="$store.state.rcSendStatus == 1"
+            >
+              <div
+                class="area"
+                :class="[
+                  { activeArea: activeIndex === index },
+                  { normalArea: activeIndex !== index },
+                  { outnumberArea: item.areaPersonnelExpectNum > item.seatNum },
+                ]"
+                :style="`backgroundColor:${
+                  activeIndex === index ? item.areaColour : '#fff'
+                };
+                             --yf-border-color:${item.areaColour}`"
+                v-for="(item, index) of confData.confPersonAreaVos"
+                v-show="index !== 0 && item.updateStatus != 2"
+                @click="chooseArea(item, index)"
+                :id="item.id"
+              >
+                <!--                <div-->
+                <!--                    class="outnumber"-->
+                <!--                    v-if="item.personData.length - item.seatNum > 0"-->
+                <!--                >-->
+                <!--                  {{ ` 超员${item.personData.length - item.seatNum}人` }}-->
+                <!--                </div>-->
+                <div class="area_text">
+                  {{ item.areaName }}
+                  <br />
+                  <span class="seatUnit">{{ item.personData.length }}人/{{ item.seatNum }}座</span>
+                </div>
+                <div class="rot" v-if="item.personData.length - item.seatNum > 0"></div>
+                <div
+                  class="edit"
+                  @click.stop="editArea(item)"
+                  v-if="$store.state.rcSendStatus == 2"
+                ></div>
+                <div
+                  class="close"
+                  @click.stop="delArea(item)"
+                  v-if="$store.state.rcSendStatus == 2"
+                ></div>
+                <!-- <div
+                  class="outnumber"
+                  v-if="item.personData.length - item.seatNum > 0"
+                >
+                  {{ ` 超员${item.personData.length - item.seatNum}人` }}
+                </div>-->
+                <div class="color_icon" :style="`backgroundColor: ${item.areaColour};`"></div>
+              </div>
+            </draggable>
+            <div class="area_manage_wrap" v-if="$store.state.rcSendStatus == 2">
+              <div class="area_manage" @click="newAddArea()">
+                <i class="add_gray_icon"></i>新增区域
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="person_display_wrap">
+          <!-- <div class="zhezhao" v-show="$store.state.rcSendStatus == 1"></div> -->
+          <div class="data_right" :class="'data_right_normal'">
+            <div v-if="!allPersonFlag">
+              <span>{{ chosenArea.areaName }}参会范围</span>
+              <span>参会人员：{{ showPersonData.length }}人</span>
+              <span>请假: XX人</span>
+              <span>未反馈: XX人</span>
+              <span>单位: XX家</span>
+            </div>
+
+            <div class="data_detail">
+              说明：{{
+              allPersonFlag
+              ? "按单位树展示人员信息，支持增加人员、批量分区、批量删除、批量请假、编辑人员等。"
+              : '按名片展示人员信息，支持增加人员；单击拖动名片批量换区、调整排序；双击名片更换人员；拖动左侧"区域"调整排序。'
+              }}
+            </div>
+          </div>
+          <div class="header">
+            <div class="header_btn">
+              <div>选择通知单位</div>
+              <div>群发通知</div>
+              <div>批量分区</div>
+              <div>批量催阅</div>
+            </div>
+            <!-- <div>
+              <el-dropdown v-show="$store.state.rcSendStatus == 2">
+                <el-button class="but_2" size="medium" type="primary">
+                  新增人员
+                  <i class="arrow-down-icon"></i>
+                </el-button>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item @click.native="newAdd()">补录人员</el-dropdown-item>
+                  <el-dropdown-item @click.native="openBatchAddDialog()">批量补录</el-dropdown-item>
+                  <el-dropdown-item @click.native="openBatchImportDialog()">Excel导入</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+              <el-button
+                v-show="$route.query.isProcess == 1 && getItems()"
+                size="medium"
+                type="primary"
+                @click="rcSendFlag = true"
+              >{{ rcName }}</el-button>
+              <div class="all_choose_box">
+                <el-checkbox
+                  v-if="!allPersonFlag && $store.state.rcSendStatus == 2"
+                  v-model="checkAll"
+                  @change="handleCheckAllChange"
+                >全选</el-checkbox>
+              </div>
+              <el-button
+                v-if="allPersonFlag && $store.state.rcSendStatus == 2"
+                class="but_2"
+                size="medium"
+                type="primary"
+                :disabled="multipleSelection.length == 0"
+                @click="batchDivide()"
+              >批量分区</el-button>
+              <el-button
+                v-if="allPersonFlag && $store.state.rcSendStatus == 2"
+                class="but_2"
+                size="medium"
+                type="primary"
+                :disabled="multipleSelection.length == 0"
+                @click="batchAskLeave()"
+              >批量请假</el-button>
+              <el-button
+                v-if="allPersonFlag && $store.state.rcSendStatus == 2"
+                size="medium"
+                type="danger"
+                :disabled="multipleSelection.length == 0"
+                @click="batchDel()"
+              >批量删除</el-button>
+            </div>-->
+
+            <div>
+              <el-input placeholder="请输入姓名、单位、职务" v-model="info" clearable @clear="clearSearch()"></el-input>
+              <el-button type="primary" size="medium" @click="search()">查询</el-button>
+            </div>
+          </div>
+          <el-checkbox-group
+            class="person_display"
+            v-if="!allPersonFlag"
+            @change="checkChange"
+            v-model="checkList"
+          >
+            <div class="zhezhao" v-show="$store.state.rcSendStatus == 1"></div>
+            <draggable
+              class="drag_wrap"
+              :setData="() => {}"
+              v-model="showPersonData"
+              :options="dragOptions"
+              @start="personStart"
+              :move="personMove"
+              @end="personEnd"
+            >
+              <div
+                class="person"
+                :class="{ active: checkList.includes(item.id) }"
+                @dblclick="dbClickPerson(item)"
+                @click="checkClick(item)"
+                v-for="(item, index) of showPersonData"
+                :key="index"
+              >
+                <el-checkbox
+                  :label="item.id"
+                  @change="
+                    (e) => {
+                      clickBox(e, item);
+                    }
+                  "
+                ></el-checkbox>
+                <div class="leave_tag" v-if="item.signStatus === 5">
+                  <img src="../../../../assets/meetingPalce/paiwei/qingjia.png" />
+                </div>
+                <div class="leave_tag" v-if="item.feedBack == 1 && item.signStatus !== 5">
+                  <img src="../../../../assets/meetingPalce/paiwei/weifankui.png" />
+                </div>
+                <div class="portrait_number">
+                  <div class="sort_number">{{ index + 1 }}</div>
+                </div>
+                <div class="text_wrap">
+                  <div class="name">{{ item.name }}</div>
+                  <div class="position">{{ item.position }}</div>
+                </div>
+              </div>
+            </draggable>
+          </el-checkbox-group>
+          <div class="all_person_display" v-else>
+            <!-- <div class="tree_wrap tree">
+              <div class="arrow" :class="clickArrow ? 'arrow_r' : 'arrow_l'" @click="opTree()"></div>
+              <el-tree
+                :data="treeData"
+                :props="props"
+                :default-expanded-keys="treeExpandData"
+                highlight-current
+                default-expand-all
+                :expand-on-click-node="false"
+                @node-click="handleNodeClick"
+              ></el-tree>
+            </div>-->
+            <div class="list_wrap list_n">
+              <el-table
+                :data="personData"
+                ref="multipleTable"
+                stripe
+                style="width: 100%"
+                @row-click="handleRowChange"
+                @selection-change="handleSelectionChange"
+              >
+                <el-table-column type="selection" width="50"></el-table-column>
+                <el-table-column type="index" label="序号" width="58"></el-table-column>
+                <el-table-column
+                  type="feedBack"
+                  label="筛选状态"
+                  width="100"
+                  :filters="[
+                    { text: '已请假', value: '1' },
+                    { text: '未反馈', value: '2' },
+                    { text: '确认反馈', value: '3' },
+                    { text: '补录', value: '4' },
+                  ]"
+                  :filter-method="filterTag"
+                  column-key="feedBack"
+                >
+                  <template slot-scope="scope">
+                    <span class="leaveTag" v-if="scope.row.signStatus === 5">已请假</span>
+                    <span
+                      class="weifankuiTag"
+                      v-if="
+                        scope.row.signStatus !== 5 && scope.row.feedBack == 1
+                      "
+                    >未反馈</span>
+                    <span
+                      class="yifankuiTag"
+                      v-if="
+                        scope.row.signStatus !== 5 && scope.row.feedBack == 2
+                      "
+                    >确认反馈</span>
+                    <span
+                      class="yifankuiTag"
+                      v-if="
+                        scope.row.signStatus !== 5 &&
+                        (scope.row.insertType == 2 ||
+                          scope.row.insertType == 3 ||
+                          scope.row.insertType == 4)
+                      "
+                    >补录</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="name" label="姓名" width="120">
+                  <!-- <template slot-scope="scope">
+                    <span
+                      >{{ scope.row.name
+                      }}<span class="leaveTag" v-if="scope.row.signStatus === 5"
+                        >已请假</span
+                      ></span
+                    >
+                  </template>-->
+                </el-table-column>
+
+                <el-table-column prop="position" label="职务"></el-table-column>
+                <el-table-column prop="unit" label="单位">
+                  <template slot-scope="scope">
+                    <span>
+                      {{ scope.row.unit }}
+                      <i
+                        class="edit_icon"
+                        @click="editUnit(scope.row)"
+                        v-if="$store.state.rcSendStatus == 2"
+                      ></i>
+                    </span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="dingId" label="浙政钉ID" width="100"></el-table-column>
+                <!--                <el-table-column-->
+                <!--                    prop="phone"-->
+                <!--                    label="手机">-->
+                <!--                </el-table-column>-->
+                <!--                <el-table-column-->
+                <!--                    label="排序"-->
+                <!--                    prop="unitSortNum"-->
+                <!--                    width="50">-->
+                <!--                </el-table-column>-->
+                <!--                <el-table-column-->
+                <!--                    label="排序"-->
+                <!--                    prop="orderInOrganization"-->
+                <!--                    width="50">-->
+                <!--                </el-table-column>-->
+                <el-table-column
+                  label="筛选分区"
+                  prop="areaName"
+                  :filters="areaFilter"
+                  :filter-method="filterHandler"
+                >
+                  <template slot-scope="scope">
+                    <div
+                      class="tag"
+                      :style="`--yf-border-color:${scope.row.areaColour};color:${scope.row.areaColour}`"
+                    >{{ scope.row.areaName }}</div>
+
+                    <!--                    <el-select v-model="scope.row.areaName" @change="(e) => handleChange(e, scope.row) ">-->
+                    <!--                      <el-option-->
+                    <!--                          v-for="item in confData.confPersonAreaVos"-->
+                    <!--                          :key="item.id"-->
+                    <!--                          :label="item.areaName"-->
+                    <!--                          :value="item.id">-->
+                    <!--                      </el-option>-->
+                    <!--                    </el-select>-->
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" width="60" v-if="$store.state.rcSendStatus == 2">
+                  <template slot-scope="scope">
+                    <div class="edit_but" @click.prevent.stop="editPerson(scope.row)">编辑</div>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <!--              <el-pagination-->
+              <!--                  @current-change="handleCurrentChange"-->
+              <!--                  @current-page="currentPage"-->
+              <!--                  :page-size="pageSize"-->
+              <!--                  layout="total, sizes, prev, pager, next, jumper"-->
+              <!--                  :total="allPersonData.length">-->
+              <!--              </el-pagination>-->
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <el-dialog
+      title="提示"
+      :visible.sync="rcSendFlag"
+      class="saveCon"
+      width="500px"
+      append-to-body
+      :before-close="handleClose"
+    >
+      <div class="main">
+        <div v-if="$store.state.rcSendStatus == 1">关闭同步将不再同步OA数据！</div>
+        <div v-else>开启同步将会清空之前手工调整，以OA数据为准！</div>
+      </div>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="rcSendFlag = false">取 消</el-button>
+        <el-button type="primary" @click="sureTongbu()">确 定</el-button>
+      </span>
+    </el-dialog>
+
+    <el-dialog
+      width="33%"
+      :modal-append-to-body="false"
+      :close-on-click-modal="false"
+      @close="handleClose"
+      title="批量分区"
+      :visible.sync="areaDialog"
+      :before-close="handleClose"
+    >
+      <el-select v-model="areaSelect" placeholder="请选择">
+        <el-option
+          v-for="item in confData.confPersonAreaVos"
+          :key="item.id"
+          :label="item.areaName"
+          :value="item.id"
+          :disabled="item.disabled"
+        ></el-option>
+      </el-select>
+      <span slot="footer" class="dialog-footer">
+        <el-button plain @click="handleClose">取消</el-button>
+        <el-button type="primary" @click="confirmArea()">确定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      width="33%"
+      :modal-append-to-body="false"
+      :close-on-click-modal="false"
+      @close="handleUnitClose"
+      title="修改单位"
+      :visible.sync="unitDialog"
+      :before-close="handleUnitClose"
+    >
+      <el-select v-model="unitSelect" placeholder="请选择">
+        <el-option
+          v-for="item in unitList"
+          :key="item.unitId"
+          :label="item.unitName"
+          :value="item.unitId"
+        ></el-option>
+      </el-select>
+      <span slot="footer" class="dialog-footer">
+        <el-button plain @click="handleUnitClose">取消</el-button>
+        <el-button type="primary" @click="confirmUnit()">确定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      width="33%"
+      :modal-append-to-body="false"
+      :close-on-click-modal="false"
+      @close="handleManageClose"
+      title="编辑分区"
+      :visible.sync="manageDialog"
+      :before-close="handleManageClose"
+    >
+      <div class="area_dialog">
+        <!--  <el-button class="new_add_area" size="medium" @click="newAddArea()">新增分区</el-button>-->
+        <!--  <div class="area_list">-->
+        <!--      <div class="item" v-for="(item,index) of areaList" v-show="index !== 0 && item.updateStatus != 2">-->
+        <!--        <span class="label">{{`区域${index}:`}}</span>-->
+        <!--        <el-input v-model="item.areaName" placeholder="请输入" maxlength="30" show-word-limit></el-input><i class="el-icon-close" @click="delArea(item)"></i>-->
+        <!--      </div>-->
+        <!--  </div>-->
+        <div class="area_list">
+          <div class="item">
+            <span class="label">区域名称：</span>
+            <!-- <el-input
+              v-model="editData.areaName"
+              placeholder="请输入"
+              maxlength="30"
+              show-word-limit
+            ></el-input>-->
+            <el-autocomplete
+              v-model="editData.areaName"
+              :fetch-suggestions="querySearchAsync"
+              placeholder="请输入内容"
+              @focus="searchFocus"
+              @select="handleSelect"
+            ></el-autocomplete>
+          </div>
+        </div>
+      </div>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button plain @click="handleManageClose">取消</el-button>
+        <el-button type="primary" @click="confirmManage()">确定</el-button>
+      </span>
+    </el-dialog>
+    <person-dialog
+      :personFlag.sync="personFlag"
+      :title="dialogTitle"
+      :singlePerson.sync="singlePerson"
+      :allPersonFlag="allPersonFlag"
+      :areaId="chosenArea.id"
+      @init="init(activeIndex)"
+      @changePerson="changePerson"
+      @addPerson="addPerson"
+      @updateQingjia="updateQingjia"
+    ></person-dialog>
+    <batch-add-dialog
+      :batchAddFlag.sync="batchAddFlag"
+      :areaId="chosenArea.id"
+      :allPersonFlag="allPersonFlag"
+      :changeFlags="changeFlags"
+      :personId="personId"
+      @init="init"
+      @addBatchPeople="addBatchPeople"
+      @sureChange="sureChange"
+    ></batch-add-dialog>
+    <batch-import-dialog
+      :areaId="chosenArea.id"
+      :allPersonFlag="allPersonFlag"
+      :dialogTitle="importDialogTitle"
+      :batchAImportFlag.sync="batchAImportFlag"
+      :fileType="fileType"
+      @init="init"
+      @bacthImport="bacthImport"
+    ></batch-import-dialog>
+  </div>
+</template>
+<script>
+import { Loading } from 'element-ui'
+import draggable from 'vuedraggable'
+import PersonDialog from '../Administration/components/PersonDialog'
+import BatchAddDialog from '../Administration/components/BatchAddDialog'
+import BatchImportDialog from '../Administration/components/BatchImportDialog'
+export default {
+  components: {
+    draggable,
+    PersonDialog,
+    BatchAddDialog,
+    BatchImportDialog,
+  },
+  data() {
+    return {
+      dir: 0,
+      clickArrow: false,
+      rcSendFlag: false,
+      areaNameList: [],
+      editData: {},
+      areaList: [],
+      checkAll: false,
+      personId: '',
+      personnelId: '',
+      unitSelect: '',
+      unitList: [],
+      areaFilter: [],
+      pageSize: 20,
+      dialogTitle: '',
+      singlePerson: {},
+      areaDialog: false,
+      manageDialog: false,
+      changeFlags: 0,
+      unitDialog: false,
+      personFlag: false,
+      batchAddFlag: false,
+      batchAImportFlag: false,
+      importDialogTitle: '批量导入人员信息',
+      fileType: 'prepare',
+      multipleSelection: [],
+      rcName: '',
+      timeout: null,
+      areaSelect: '',
+      props: {
+        label: 'organizationName',
+        children: 'children',
+      },
+      treeData: [],
+      treeExpandData: [], //自己定义的用于接收tree树id的数组
+      provincialCenterId: '',
+      allPersonData: [],
+      personData: [],
+      allPersonFlag: true,
+      info: '',
+      disableFlag: true,
+      dragReleaseTarget: '', //人员拖拽释放目标
+      dragReleaseAreaDiv: '', //拖拽释放时的目标分组div
+      dragOptions: {
+        animation: 120,
+        scroll: true,
+        group: 'person',
+        ghostClass: 'ghost-style',
+        filter: '.notMove',
+      },
+      checkList: [], //人员多选列表
+      processId: '',
+      chosenArea: {}, //当前选中的区域信息
+      noAeaPersonNum: '', //未分区人员数量
+      noAeaPersonData: [], //未分区人员数据
+      showPersonData: [], //当前页面上展示的人员
+      activeIndex: 0,
+      confData: {
+        //后台数据
+        confPersonAreaVos: [],
+        personnels: [],
+        treeSelectList: [], //单位树
+      },
+      copyData: {},
+      loadingOptions: {
+        lock: true,
+        text: '',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)',
+      },
+      colorLists: [
+        '#a50fbd',
+        '#36BEAC',
+        '#F28A68',
+        '#9398F7',
+        '#A4D881',
+        '#F38F91',
+        '#32CE97',
+        '#31A0E4',
+        '#FFA288',
+        '#28C5D6',
+        '#9D99E8',
+        '#F3C557',
+        '#80D69C',
+        '#F88DA4',
+        '#50CAF4',
+        '#EC9DE7',
+        '#5A99F2',
+        '#8CDB84',
+        '#A7ABFD',
+        '#45D0D8',
+        '#FEB58C',
+        '#61A7EE',
+        '#F68DA6',
+        '#92D371',
+        '#74CCEB',
+        '#276CDE',
+      ],
+    }
+  },
+  computed: {
+    borderStyle() {
+      return function (val) {
+        return {
+          '--background-color': val.areaColour,
+          '--background-color-hover': val.areaColour,
+        }
+      }
+    },
+    getSession() {
+      return sessionStorage.getItem('rcSendStatus')
+    },
+  },
+  mounted() {
+    if (this.$store.state.rcSendStatus == 1) {
+      this.rcName = '关闭同步'
+    }
+    if (this.$store.state.rcSendStatus == 2) {
+      this.rcName = '开启同步'
+    }
+    this.init()
+  },
+  destroyed() {
+    this.$store.commit('changeSaveFlag', true)
+    this.$store.commit('changeUpdateFlag', true)
+  },
+  beforeRouteLeave(to, from, next) {
+    console.log(to.path)
+    let that = this
+    //点击系统管理按钮时，会先进入/system/jurisdiction判断身份，
+    // 如果不是超级管理员会跳转其他页面，这时会调用两次beforeRouteLeave，确认离开弹框会闪烁两次
+    if (to.path != '/system/bankMangager/confLibrary' && to.path != '/system/query') {
+      this.savePromise()
+        .then((res) => {
+          next(true)
+        })
+        .catch((err) => {})
+    } else {
+      next(true)
+    }
+  },
+  beforeRouteEnter(to, from, next) {
+    next((vm) => {
+      // 通过 `vm` 访问组件实例
+      vm.dir = sessionStorage.getItem('userNDirection1') == 1 ? 1 : 0
+    })
+  },
+  watch: {
+    '$store.state.rcSendStatus'(newVal) {
+      if (newVal == 1) {
+        this.rcName = '关闭同步'
+      }
+      if (newVal == 2) {
+        this.rcName = '开启同步'
+      }
+    },
+    noAeaPersonNum(val) {
+      if (val === 0) {
+        this.$emit('judgeStatus', false)
+      } else {
+        this.$emit('judgeStatus', true)
+      }
+    },
+    // confData: {
+    //   handler (newValue, oldValue) {
+    //     console.log(newValue, oldValue)
+    //     // let o = JSON.stringify(newValue)
+    //     // let n = JSON.stringify(oldValue)
+    //     // if(o != n){
+    //       this.disableFlag = true
+    //     // }
+    //   },
+    //   deep: true,
+    //   immediate:false
+    // },
+  },
+  methods: {
+    filterTag(value, row) {
+      if (value == '1') {
+        return row.signStatus === 5
+      }
+      if (value == '2') {
+        return row.feedBack == 1
+      }
+      if (value == '3') {
+        return row.feedBack == 2
+      }
+      if (value == '4') {
+        return row.insertType == 2 || row.insertType == 3 || row.insertType == 4
+      }
+      return row
+    },
+    resetDateFilter() {
+      this.$refs.multipleTable.clearFilter('feedBack')
+    },
+    clearFilter() {
+      this.$refs.multipleTable.clearFilter()
+    },
+    sureTongbu() {
+      this.changeTongBu()
+    },
+    changeTongBu() {
+      let data = {
+        processId: this.$route.query.processId,
+        rcSendStatus: this.$store.state.rcSendStatus,
+      }
+      this.$axios.updateRcSendStatus(data).then((res) => {
+        if (res.data.code == 200) {
+          this.$message.success('操作成功！')
+          if (this.$store.state.rcSendStatus == 1) {
+            this.$store.commit('changeRcSendStatus', 2)
+          } else {
+            this.$store.commit('changeRcSendStatus', 1)
+          }
+          this.rcSendFlag = false
+          this.$router.go(0)
+        } else {
+          this.$message.error(res.data.data)
+          this.rcSendFlag = false
+        }
+      })
+    },
+    searchFocus() {
+      let data = {
+        info: '',
+      }
+      this.$axios.findAllAreaName(data).then((res) => {
+        if (res.data.code == 200) {
+          this.areaNameList = res.data.data
+        } else {
+          this.$message.error(res.data.data)
+        }
+      })
+    },
+    querySearchAsync(queryString, cb) {
+      var restaurants = this.areaNameList
+      // console.log(restaurants);
+      var results = queryString ? this.createStateFilter(queryString, restaurants) : restaurants
+      let lists = []
+      if (results.length > 0) {
+        for (let i = 0; i < results.length; i++) {
+          let data = {
+            value: results[i].confAreaName,
+            name: results[i].confAreaName,
+          }
+          lists.push(data)
+        }
+      }
+      console.log('lists', lists)
+      clearTimeout(this.timeout)
+      this.timeout = setTimeout(() => {
+        cb(lists)
+      }, 1000 * Math.random())
+    },
+    createStateFilter(queryString, list) {
+      let lists = list.filter((res) => {
+        if (res.confAreaName.indexOf(queryString) != -1) {
+          return true
+        }
+      })
+      console.log('lists', lists)
+      return lists
+      // console.log("queryString", queryString);
+    },
+    handleSelect(item) {
+      console.log(item)
+    },
+    updateQingjia(person) {
+      if (this.allPersonFlag) {
+        this.init()
+      } else {
+        let index = this.confData.confPersonAreaVos.findIndex((item) => {
+          return item.id == this.chosenArea.id
+        })
+
+        let index2 = this.confData.confPersonAreaVos[index].personData.findIndex((item) => {
+          return item.id == this.personId
+        })
+        this.confData.confPersonAreaVos[index].personData[index2] = person
+
+        let index1 = this.showPersonData.findIndex((item) => {
+          return item.id == person.id
+        })
+        if (index1 != -1) {
+          this.showPersonData[index1] = person
+        }
+        console.log('person', this.showPersonData)
+        this.disableFlag = false
+      }
+    },
+    sureChange(person) {
+      if (this.allPersonFlag) {
+        this.init()
+      } else {
+        let index = this.confData.confPersonAreaVos.findIndex((item) => {
+          return item.id == this.chosenArea.id
+        })
+
+        let index2 = this.confData.confPersonAreaVos[index].personData.findIndex((item) => {
+          return item.id == this.personId
+        })
+        this.confData.confPersonAreaVos[index].personData[index2] = person
+
+        let index1 = this.showPersonData.findIndex((item) => {
+          return item.id == this.personId
+        })
+        if (index1 != -1) {
+          this.showPersonData[index1] = person
+        }
+        this.disableFlag = false
+      }
+    },
+    bacthImport(val) {
+      let index = this.confData.confPersonAreaVos.findIndex((item) => {
+        return item.id == this.chosenArea.id
+      })
+      this.confData.confPersonAreaVos[index].personData = [...val, ...this.confData.confPersonAreaVos[index].personData]
+
+      // this.showPersonData = this.setListDatas(this.showPersonData, val);
+      this.showPersonData = [...val, ...this.showPersonData]
+      this.disableFlag = false
+    },
+    addBatchPeople(val) {
+      let index = this.confData.confPersonAreaVos.findIndex((item) => {
+        return item.id == this.chosenArea.id
+      })
+
+      this.confData.confPersonAreaVos[index].personData = [...val, ...this.confData.confPersonAreaVos[index].personData]
+      this.showPersonData = [...val, ...this.showPersonData]
+      this.disableFlag = false
+    },
+    addPerson(val) {
+      // console.log("person", this.confData.confPersonAreaVos);
+      let index = this.confData.confPersonAreaVos.findIndex((item) => {
+        return item.id == this.chosenArea.id
+      })
+
+      this.confData.confPersonAreaVos[index].personData = [val, ...this.confData.confPersonAreaVos[index].personData]
+      this.showPersonData = [val, ...this.showPersonData]
+      // this.setListData(showPersonData, val);
+      // this.personFlag = false;
+      this.disableFlag = false
+      // this.init(0);
+    },
+
+    // getDivideArea
+    init(val) {
+      this.$nextTick(() => {
+        this.processId = this.$route.query.processId
+        let data = {
+          isProcess: this.$route.query.isProcess, //是会议还是会议模板：1-会议，2-会议模板
+          info: '', // 模糊查询条件
+          processId: this.processId,
+        }
+        this.loadingOptions.text = '加载中，请稍候...'
+        let loading = Loading.service(this.loadingOptions)
+        this.$axios
+          .getDivideArea(data)
+          .then((res) => {
+            console.log(res)
+            //获取后台数据
+            this.confData = res.data.data
+            this.treeData = res.data.data.treeSelectList ? res.data.data.treeSelectList : []
+            // this.treeData[0].id = 1
+            // this.provincialCenterId = this.treeData[0].id //默认展开第一个节点
+            // this.getRoleTreeRootNode(this.provincialCenterId)
+            this.allPersonData = res.data.data.personnels
+            this.copyData = this.deepClone(this.confData)
+            this.allPersonData.forEach((item, index) => {
+              let area
+              console.log(11111111111111111, this.confData.confPersonAreaVos)
+              if (this.confData.confPersonAreaVos) {
+                area = this.confData.confPersonAreaVos.filter((area, i) => item.areaId === area.id)
+              }
+              item.areaName = area[0].areaName
+            })
+
+            /*对全部人员进行排序*/
+            this.allPersonData.sort(this.order)
+
+            /*设置分组颜色*/
+            for (let i = 0; i < this.confData.confPersonAreaVos.length; i++) {
+              this.confData.confPersonAreaVos[i].areaColour = this.colorLists[i]
+              if (this.confData.confPersonAreaVos[i].areaName === '未分区') {
+                this.confData.confPersonAreaVos[i].disabled = true
+              }
+            }
+            /*将人员分到区域中*/
+            this.confData.confPersonAreaVos.forEach((item, index) => {
+              //区域筛选选择项
+              this.areaFilter[index] = {
+                text: item.areaName,
+                value: item.areaName,
+              }
+              item.personData = []
+              console.log(item)
+              if (this.confData.personnels) {
+                item.personData = this.copyData.personnels.filter((person, i) => person.areaId === item.id)
+              }
+            })
+            console.log(this.confData)
+            /*设置未分区人员*/
+            this.noAeaPersonData = this.confData.personnels.filter((person, i) => person.areaId === '' || person.areaId === null)
+            this.noAeaPersonNum = this.noAeaPersonData.length
+            /*页面初始化默认选中第一个区域*/
+            this.chosenArea = this.confData.confPersonAreaVos[0]
+            /*页面初始化默认展示第一个区域的人员*/
+            this.showPersonData = this.confData.confPersonAreaVos[0].personData
+            this.personData = this.allPersonData
+            this.personData.forEach((item, index) => {
+              if (item.areaName === '未分区') {
+                item.areaColour = '#778CA2'
+              } else {
+                let arr = this.confData.confPersonAreaVos.filter((area, i) => area.id === item.areaId)
+                item.areaColour = arr[0].areaColour
+              }
+            })
+            // this.personData = this.allPersonData.slice(0,20)
+
+            if (val) {
+              this.chooseArea(this.confData.confPersonAreaVos[val], val)
+            } else {
+              this.chooseAll()
+            }
+            loading.close()
+          })
+          .catch((err) => {
+            loading.close()
+          })
+      })
+    }, //初始化
+    showDirection() {
+      this.dir = 1
+    },
+    dbClickPerson(item) {
+      this.singlePerson = item
+      this.personFlag = true
+      this.dialogTitle = '编辑人员'
+    },
+    prev() {
+      this.dir--
+    },
+    next() {
+      this.dir++
+    },
+    iKnow() {
+      this.dir = 0
+      let data = {
+        navigationStatus: 2,
+        navigationType: 1,
+        sysUserId: sessionStorage.getItem('userId'),
+      }
+      this.$axios
+        .postUpdateStatus(data)
+        .then((res) => {
+          if (res.data.code === 200) {
+            sessionStorage.setItem('userNDirection1', 2)
+          }
+        })
+        .catch((err) => {})
+    },
+    opTree() {
+      this.clickArrow = !this.clickArrow
+      if (this.clickArrow) {
+        document.getElementsByClassName('tree_wrap')[0].classList.add('no_tree')
+        document.getElementsByClassName('tree_wrap')[0].classList.remove('tree')
+        document.getElementsByClassName('list_wrap')[0].classList.remove('list_n')
+        document.getElementsByClassName('list_wrap')[0].classList.add('list_w')
+      } else {
+        document.getElementsByClassName('tree_wrap')[0].classList.remove('no_tree')
+        document.getElementsByClassName('tree_wrap')[0].classList.add('tree')
+        document.getElementsByClassName('list_wrap')[0].classList.remove('list_w')
+        document.getElementsByClassName('list_wrap')[0].classList.add('list_n')
+      }
+    },
+    // openManageDialog(){
+    //   this.areaList = this.deepClone(this.confData.confPersonAreaVos)
+    //   this.manageDialog = true
+    // },
+    editArea(item) {
+      this.areaList = this.deepClone(this.confData.confPersonAreaVos)
+      this.editData = this.deepClone(item)
+      this.manageDialog = true
+    },
+    handleCheckAllChange(val) {
+      let data = []
+      this.showPersonData.forEach((item, index) => {
+        data.push(item.id)
+      })
+      this.checkList = val ? data : []
+      this.isIndeterminate = false
+    },
+    // 获取树形结构默认展开节点
+    getRoleTreeRootNode(provincialCenterId) {
+      this.treeExpandData.push(provincialCenterId)
+      console.log(this.treeExpandData)
+    },
+    handleChange(e, row) {
+      console.log(e, row)
+    },
+    // handleCurrentChange(page) {
+    //   console.log(page)
+    //   let last,pre
+    //   if(page * this.pageSize >  this.allPersonData.length){
+    //     last = this.copyData.personnels.length
+    //     pre = (page - 1) * this.pageSize
+    //   }else {
+    //     last = page * this.pageSize
+    //     pre = page * this.pageSize - 20
+    //   }
+    //   this.personData =  this.allPersonData.slice(pre,last)
+    // },
+    // currentPage() {},
+    filterHandler(value, row, column) {
+      const property = column['property']
+      return row[property] === value
+    },
+    order(pre, next) {
+      if (pre.unitSortNum < next.unitSortNum) {
+        return -1
+      } else if (pre.unitSortNum > next.unitSortNum) {
+        return 1
+      } else if (pre.unitSortNum == next.unitSortNum) {
+        if (pre.orderInOrganization < next.orderInOrganization) {
+          return -1
+        } else if (pre.orderInOrganization > next.orderInOrganization) {
+          return 1
+        }
+      }
+    },
+    confirmUnit() {
+      let list = this.unitList.filter((item, index) => item.unitId === this.unitSelect)
+      let data = list[0]
+      data.personnelId = this.personnelId
+      this.$axios
+        .postModifyUnit(data)
+        .then((res) => {
+          console.log(res)
+          if (res.data.code === 200) {
+            this.$message({
+              showClose: true,
+              message: res.data.data,
+              type: 'success',
+            })
+            this.handleUnitClose()
+            this.init()
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.data.data,
+              type: 'error',
+            })
+          }
+        })
+        .catch((error) => {})
+    },
+    confirmArea() {
+      this.loadingOptions.text = '保存中，请稍候...'
+      let loading = Loading.service(this.loadingOptions)
+      let data = {
+        processId: this.processId,
+        personnelShowVoList: this.multipleSelection,
+        areaId: this.areaSelect,
+      }
+      this.$axios
+        .postBatchArea(data)
+        .then((res) => {
+          console.log(res)
+          if (res.data.code === 200) {
+            this.init()
+            this.handleClose()
+            loading.close()
+          } else {
+            loading.close()
+          }
+        })
+        .catch((error) => {
+          loading.close()
+        })
+    }, //分区弹框——确认分区
+    // delArea(item){
+    //   item.updateStatus = 2
+    //   console.log(this.areaList)
+    // },
+    delArea(item) {
+      this.$confirm('是否确认删除该区域?', '提示', {
+        customClass: 'message',
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          item.updateStatus = 2
+          let data = this.confData
+          data.isProcess = this.$route.query.isProcess
+          console.log(data)
+          this.savePromise()
+            .then(() => {
+              this.$axios
+                .postManageArea(data)
+                .then((res) => {
+                  console.log(res)
+                  if (res.data.code === 200) {
+                    this.disableFlag = true
+                    this.init()
+                    this.$store.commit('changeSaveFlag', true)
+                    if (JSON.stringify(this.confData) !== JSON.stringify(this.copyData)) {
+                      this.$store.commit('changeUpdateFlag', false)
+                    }
+                    loading.close()
+                  } else {
+                    loading.close()
+                  }
+                })
+                .catch((error) => {
+                  loading.close()
+                })
+            })
+            .catch((err) => {})
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除',
+          })
+        })
+    },
+    confirmManage() {
+      console.log(this.areaList)
+      this.areaList.forEach((item, index) => {
+        console.log(item)
+        if (item.id === this.editData.id) {
+          item.areaName = this.editData.areaName
+        }
+      })
+      let data = {
+        isProcess: this.$route.query.isProcess,
+        processId: this.processId,
+        confPersonAreaVos: this.areaList,
+      }
+      this.savePromise()
+        .then(() => {
+          this.$axios
+            .postManageArea(data)
+            .then((res) => {
+              console.log(res)
+              if (res.data.code === 200) {
+                this.$message({
+                  showClose: true,
+                  message: res.data.data,
+                  type: 'success',
+                })
+                this.init()
+                this.handleManageClose()
+              } else {
+                this.$message({
+                  showClose: true,
+                  message: res.data.data,
+                  type: 'error',
+                })
+              }
+            })
+            .catch((error) => {
+              loading.close()
+            })
+        })
+        .catch((err) => {})
+    },
+    computedArea(num) {
+      let area = this.confData.confPersonAreaVos.filter((item, index) => item.areaName === `区域${num}`)
+      if (area.length === 0) {
+        this.confData.confPersonAreaVos.push({
+          areaName: `区域${num}`,
+          personData: [],
+          updateStatus: 1,
+        })
+      } else {
+        num++
+        this.computedArea(num)
+      }
+    },
+    newAddArea() {
+      this.computedArea(this.confData.confPersonAreaVos.length)
+      let data = {
+        isProcess: this.$route.query.isProcess,
+        processId: this.processId,
+        confPersonAreaVos: this.confData.confPersonAreaVos,
+      }
+      this.savePromise()
+        .then(() => {
+          this.$axios
+            .postManageArea(data)
+            .then((res) => {
+              console.log(res)
+              if (res.data.code === 200) {
+                this.$message({
+                  showClose: true,
+                  message: '新增区域成功！',
+                  type: 'success',
+                })
+                this.init()
+                let oDom = document.querySelector('.selection_right_but_wrap')
+                this.$nextTick(() => {
+                  oDom.scrollTop = oDom.scrollHeight
+                })
+                this.handleManageClose()
+              } else {
+                this.$message({
+                  showClose: true,
+                  message: res.data.data,
+                  type: 'error',
+                })
+              }
+            })
+            .catch((error) => {
+              loading.close()
+            })
+        })
+        .catch((err) => {})
+    },
+    handleClose() {
+      this.areaDialog = false
+      this.rcSendFlag = false
+    },
+    handleUnitClose() {
+      this.unitDialog = false
+    },
+    handleManageClose() {
+      this.editData = {}
+      this.manageDialog = false
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    handleRowChange(row, column, event) {
+      console.log(row)
+      let filter = this.multipleSelection.filter((id, index) => row.id === id)
+      if (filter.length === 0) {
+        this.multipleSelection = this.multipleSelection.concat(row)
+      } else {
+        this.multipleSelection = this.multipleSelection.filter((id, index) => row.id !== id)
+      }
+
+      if (row) {
+        this.$refs.multipleTable.toggleRowSelection(row)
+      }
+    },
+    handleNodeClick(data) {
+      console.log(data.organizationCode) //该单位节点id
+      let personList = []
+      this.allPersonData.forEach((item, index) => {
+        if (item.unitPreNode) {
+          item.unitNideLists = item.unitPreNode.split(/[-]/)
+          let node = item.unitNideLists.filter((node, i) => node === data.organizationCode)
+          if (node.length !== 0) {
+            personList.push(item)
+          }
+        }
+      })
+      this.personData = personList
+    },
+    clearSearch() {
+      this.info = ''
+      if (this.allPersonFlag) {
+        //全部人员
+        this.personData = this.allPersonData
+      } else {
+        //分区人员
+        this.showPersonData = this.confData.confPersonAreaVos[this.activeIndex].personData
+      }
+    },
+    search() {
+      let data = []
+      if (this.allPersonFlag) {
+        //全部人员
+        console.log(this.allPersonData)
+        this.allPersonData.forEach((item, index) => {
+          let str = item.name.concat(item.unit).concat(item.position)
+          let i = str.indexOf(this.info)
+          if (i !== -1) {
+            data = data.concat(item)
+          }
+        })
+        this.personData = data
+      } else {
+        //分区人员
+        this.confData.confPersonAreaVos[this.activeIndex].personData.forEach((item, index) => {
+          let str = item.name.concat(item.unit)
+          let i = str.indexOf(this.info)
+          if (i !== -1) {
+            data = data.concat(item)
+          }
+        })
+        this.showPersonData = data
+      }
+    },
+    personStart(e) {
+      console.log('current', e.currentTarget)
+    }, //  人员开始拖动事件
+    personMove(e, originalEvent) {
+      // if(this.activeIndex === 0){  // 如果当前展示为未分区区域，阻止默认停靠
+      //   return false
+      // }
+      this.disableFlag = false
+      this.$store.commit('changeSaveFlag', false)
+      // console.log("person", e.related);
+      if (e.related.classList.contains('person')) {
+        this.dragReleaseTarget = 'person' //释放目标为：人员
+        if (this.checkList.length !== 0 || this.activeIndex === 0 || this.info !== '') {
+          //多选状态或未分区或查询条件下禁止排序
+          return false
+        }
+      } else {
+        /***************************将未分组人员拖拽到分组中******************************/
+        if (e.related.classList.contains('area')) {
+          this.dragReleaseTarget = 'area' //释放目标为：分组
+          /******************设置target样式*******************/
+          this.dragReleaseAreaDiv = e.related
+          // console.log(this.dragReleaseAreaDiv)
+          let arr = document.getElementsByClassName('area')
+          for (let i = 0; i < arr.length; i++) {
+            if (arr[i].classList.contains('areaDraged')) {
+              arr[i].classList.remove('areaDraged')
+            }
+          }
+          e.related.classList.add('areaDraged')
+        } else {
+          this.dragReleaseTarget = ''
+        }
+        return false //阻止默认停靠
+      }
+    }, //人员拖动事件
+    personEnd(e) {
+      console.log(this.dragReleaseAreaDiv) //释放的目标dom
+      console.log(e.item._underlying_vm_.id) //被拖拽的人员的ID
+      let areaName
+      // if (this.dragReleaseAreaDiv) {
+      //   areaName =
+      //     this.dragReleaseAreaDiv.getElementsByClassName("area_text")[0]
+      //       .firstChild.data; //分组名称
+      // }
+      console.log(this.dragReleaseAreaDiv.id)
+      if (this.activeIndex !== 0 && this.dragReleaseAreaDiv.id === this.confData.confPersonAreaVos[this.activeIndex].id) {
+        return false
+      }
+      if (this.dragReleaseTarget === 'area') {
+        if (this.checkList.length === 0) {
+          // console.log("false");
+          //单选拖拽
+          /*********把被拖拽的人加入到目标区域中****************/
+          this.confData.confPersonAreaVos.forEach((item, index) => {
+            if (item.id === this.dragReleaseAreaDiv.id) {
+              item.personData.push(e.item._underlying_vm_)
+              // item.personData.sort(this.order)
+            }
+          })
+          console.log('json', JSON.parse(JSON.stringify(this.confData.confPersonAreaVos)))
+          /************在当前区域中删除被拖拽的人**************/
+          this.confData.confPersonAreaVos[this.activeIndex].personData = this.confData.confPersonAreaVos[
+            this.activeIndex
+          ].personData.filter((item, index) => e.item._underlying_vm_.id !== item.id)
+          /*****************更新当前区域展示的人员***************/
+          this.showPersonData = this.confData.confPersonAreaVos[this.activeIndex].personData
+          if (this.search !== '') {
+            this.search()
+          }
+        } else {
+          //多选拖拽
+          /*********把被拖拽的人加入到目标区域中****************/
+          let personList = []
+          console.log('checkList', this.checkList)
+          this.checkList.forEach((item, index) => {
+            let person = this.confData.confPersonAreaVos[this.activeIndex].personData.filter((person, i) => person.id === item)
+            personList = personList.concat(person)
+          })
+
+          this.confData.confPersonAreaVos.forEach((item, index) => {
+            if (item.id === this.dragReleaseAreaDiv.id) {
+              console.log(111111111111, personList)
+              this.confData.confPersonAreaVos[index].personData = item.personData.concat(personList)
+              // this.confData.confPersonAreaVos[index].personData.sort(this.order)
+            }
+          })
+
+          /***********在当前区域中删除被拖拽的人***********/
+          this.checkList.forEach((item, index) => {
+            this.confData.confPersonAreaVos[this.activeIndex].personData = this.confData.confPersonAreaVos[
+              this.activeIndex
+            ].personData.filter((person, i) => item !== person.id)
+            // this.chosenArea.personData = this.chosenArea.personData.filter((person,i) => item !== person.id)
+          })
+          /*****************更新当前区域展示的人员***************/
+          this.showPersonData = this.confData.confPersonAreaVos[this.activeIndex].personData
+          /*****************清空多选列表***************/
+          this.checkList = []
+          if (this.search !== '') {
+            this.search()
+          }
+        }
+      }
+      this.dragReleaseTarget = ''
+      this.dragReleaseAreaDiv = ''
+      if (this.info === '') {
+        this.confData.confPersonAreaVos[this.activeIndex].personData = this.showPersonData
+      }
+    }, //人员完成拖动事件
+    areaMove(e, originalEvent) {
+      this.disableFlag = false
+      this.$store.commit('changeSaveFlag', false)
+      if (e.related.classList.contains('person')) {
+        return false
+      }
+    }, //  区域拖动事件
+    areaStart(e) {
+      console.log(e)
+    }, //  区域拖动开始事件
+    areaEnd(e) {
+      console.log(this.showPersonData)
+      this.confData.confPersonAreaVos.forEach((item, index) => {
+        if (JSON.stringify(this.showPersonData) === JSON.stringify(item.personData)) {
+          this.activeIndex = index
+          return false
+        }
+      })
+      console.log(this.confData)
+    }, //  区域拖动完成事件
+    editPerson(val) {
+      //编辑人员
+      this.personFlag = true
+      this.dialogTitle = '编辑人员'
+      this.singlePerson = val
+    },
+    newAdd() {
+      this.personFlag = true
+      this.dialogTitle = '新增人员'
+    },
+    changePerson(data) {
+      this.personFlag = false
+      this.batchAddFlag = true
+      this.personId = data.id
+      this.changeFlags = 2
+      // this.dialogTitle = "更新人员";
+    }, //打开更新人员弹窗
+
+    openBatchAddDialog() {
+      this.batchAddFlag = true
+      this.changeFlags = 1
+    },
+    openBatchImportDialog() {
+      this.batchAImportFlag = true
+    },
+    autoAsync() {
+      return new Promise((resolve, reject) => {
+        this.$axios.getAutoAsync(this.$route.query.processId).then((res) => {
+          console.log(res)
+          resolve()
+        })
+      }).catch((err) => {
+        reject()
+      })
+    }, //手工同步
+    editUnit(row) {
+      console.log(row)
+      this.personnelId = row.id
+      this.unitSelect = row.unit
+      this.$axios
+        .postSearchUnit(row.dingId)
+        .then((res) => {
+          console.log(res)
+          this.unitList = res.data.data
+          // if (res.data.code === 200) {
+          //   this.$message({
+          //     showClose: true,
+          //     message: res.data.data,
+          //     type: "success",
+          //   });
+          //   this.init();
+          // }
+        })
+        .catch((err) => {})
+      this.unitDialog = true
+    },
+    batchDivide() {
+      if (this.multipleSelection.length !== 0) {
+        this.areaDialog = true
+      }
+      //批量分区
+    },
+    // batchChange(){ //批量换区
+    //   this.multiFlag = !this.multiFlag
+    //   this.checkList = [] //清空多选列表
+    // }, //  打开/取消批量分区
+    // batchDel() {
+    //   if (this.multipleSelection.length !== 0) {
+    //     this.$confirm('是否确认移除已选人员?', '提示', {
+    //       customClass: 'message',
+    //       confirmButtonText: '确定',
+    //       cancelButtonText: '取消',
+    //       type: 'warning',
+    //     })
+    //       .then(() => {
+    //         this.$axios
+    //           .postBatchDelete(this.multipleSelection, this.processId, this.$route.query.isProcess)
+    //           .then((res) => {
+    //             console.log(res)
+    //             if (res.data.code === 200) {
+    //               this.$message({
+    //                 showClose: true,
+    //                 message: res.data.data,
+    //                 type: 'success',
+    //               })
+    //               this.init()
+    //             }
+    //           })
+    //           .catch((err) => {})
+    //       })
+    //       .catch(() => {
+    //         this.$message({
+    //           type: 'info',
+    //           message: '已取消删除',
+    //         })
+    //       })
+    //   }
+    // },
+    batchAskLeave() {
+      if (this.multipleSelection.length !== 0) {
+        this.$confirm('是否确认已选人员全部请假?', '提示', {
+          customClass: 'message',
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        })
+          .then(() => {
+            this.$axios
+              .postBatchAskLeave(this.multipleSelection)
+              .then((res) => {
+                if (res.data.code === 200) {
+                  this.$message({
+                    showClose: true,
+                    message: res.data.data,
+                    type: 'success',
+                  })
+                  this.init()
+                }
+              })
+              .catch((err) => {})
+          })
+          .catch(() => {
+            this.$message({
+              type: 'info',
+              message: '已取消删除',
+            })
+          })
+      }
+    },
+    checkChange(e, item) {
+      console.log(this.checkList)
+      console.log(e, item)
+      // this.checkList = e
+    }, //  多选框change事件
+    clickBox(e, item) {
+      console.log(e, item)
+      if (e) {
+        this.checkList = this.checkList.filter((list, index) => list !== item.id)
+      } else {
+        this.checkList.push(item.id)
+      }
+      console.log(this.checkList)
+    },
+    getItems() {
+      if (sessionStorage.getItem('createType') == 2) {
+        return true
+      } else {
+        return false
+      }
+    },
+    checkClick(item) {
+      // console.log(item)
+      // if(this.multiFlag){
+      let filter = this.checkList.filter((id, index) => item.id === id)
+      if (filter.length === 0) {
+        this.checkList = this.checkList.concat(item.id)
+      } else {
+        this.checkList = this.checkList.filter((id, index) => item.id !== id)
+      }
+      // }
+    },
+    chooseAll(val) {
+      this.activeIndex = 0
+      this.checkList = [] //切换分区时清空多选列表
+      this.checkAll = false //清空全选标记
+      this.allPersonFlag = true
+      this.savePromise()
+      if (val == 0) {
+        this.init()
+      }
+    },
+    chooseArea(item, index) {
+      this.allPersonFlag = false
+      this.activeIndex = index
+      this.info = ''
+      this.showPersonData = this.confData.confPersonAreaVos[index].personData
+      this.chosenArea = item
+      // console.log('chosenArea',this.chosenArea);
+      this.checkList = [] //切换分区时清空多选列表
+      this.checkAll = false //清空全选标记
+      this.multipleSelection = [] //清空全部人员页面的多选
+      this.saveArea()
+    }, //  选择分区
+    savePromise() {
+      return new Promise((resolve, reject) => {
+        this.loadingOptions.text = '保存中，请稍候...'
+        let loading = Loading.service(this.loadingOptions)
+        let data = this.confData
+        ;(data.isProcess = this.$route.query.isProcess), console.log(data)
+        this.$axios
+          .postSaveAreaSort(data)
+          .then((res) => {
+            console.log(res)
+            if (res.data.code === 200) {
+              this.disableFlag = true
+              this.$store.commit('changeSaveFlag', true)
+              if (JSON.stringify(this.confData) !== JSON.stringify(this.copyData)) {
+                this.$store.commit('changeUpdateFlag', false)
+              }
+              loading.close()
+              resolve()
+            } else {
+              loading.close()
+              reject()
+            }
+          })
+          .catch((err) => {})
+      })
+    }, //保存并离开
+    saveArea() {
+      console.log(123)
+      if (this.disableFlag) {
+        return false
+      }
+      this.loadingOptions.text = '保存中，请稍候...'
+      let loading = Loading.service(this.loadingOptions)
+      let data = this.confData
+      ;(data.isProcess = this.$route.query.isProcess), console.log(data)
+      this.$axios
+        .postSaveAreaSort(data)
+        .then((res) => {
+          console.log(res)
+          if (res.data.code === 200) {
+            this.disableFlag = true
+            this.$store.commit('changeSaveFlag', true)
+            if (JSON.stringify(this.confData) !== JSON.stringify(this.copyData)) {
+              this.$store.commit('changeUpdateFlag', false)
+            }
+            this.$message({
+              message: '保存成功',
+              type: 'success',
+            })
+            loading.close()
+          } else {
+            loading.close()
+          }
+        })
+        .catch((err) => {})
+    }, //保存分区与排序
+    deepClone(target) {
+      // 定义一个变量
+      let result
+      // 如果当前需要深拷贝的是一个对象的话
+      if (typeof target === 'object') {
+        // 如果是一个数组的话
+        if (Array.isArray(target)) {
+          result = [] // 将result赋值为一个数组，并且执行遍历
+          for (let i in target) {
+            // 递归克隆数组中的每一项
+            result.push(this.deepClone(target[i]))
+          }
+          // 判断如果当前的值是null的话；直接赋值为null
+        } else if (target === null) {
+          result = null
+          // 判断如果当前的值是一个RegExp对象的话，直接赋值
+        } else if (target.constructor === RegExp) {
+          result = target
+        } else {
+          // 否则是普通对象，直接for in循环，递归赋值对象的所有值
+          result = {}
+          for (let i in target) {
+            result[i] = this.deepClone(target[i])
+          }
+        }
+        // 如果不是对象的话，就是基本数据类型，那么直接赋值
+      } else {
+        result = target
+      }
+      // 返回最终结果
+      return result
+    },
+  },
+}
+</script>
+<style scoped lang="less">
+@keyframes TableExpend {
+  from {
+    width: calc(100% - 300px - 20px);
+  }
+  to {
+    width: 100%;
+  }
+}
+@keyframes TableShrink {
+  from {
+    width: 100%;
+  }
+  to {
+    width: calc(100% - 300px - 20px);
+  }
+}
+@keyframes TreeExpend {
+  from {
+    width: 0;
+  }
+  to {
+    width: 300px;
+  }
+}
+@keyframes TreeShrink {
+  from {
+    width: 300px;
+  }
+  to {
+    width: 0;
+  }
+}
+.main_wrap {
+  height: 100%;
+  padding: 24px;
+  position: relative;
+  .new_help {
+    cursor: pointer;
+    width: 34px;
+    height: 34px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    background-image: url('../../../../assets/img/help.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+  .direction {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 10000;
+    width: 1920px;
+    height: 100vh;
+    .but {
+      position: absolute;
+      width: 179px;
+      height: 65px;
+      border-radius: 4px;
+      background-color: transparent;
+      cursor: pointer;
+      bottom: 81px;
+    }
+  }
+  .direction1 {
+    background-image: url('../../../../assets/img/dir1.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    .but1 {
+      display: block;
+      left: 741px;
+    }
+    .but2 {
+      display: block;
+      left: 1001px;
+    }
+    .but3 {
+      display: none;
+    }
+  }
+  .direction2 {
+    background-image: url('../../../../assets/img/dir2.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    .but1 {
+      display: block;
+      left: 681px;
+    }
+    .but3 {
+      display: block;
+      left: 921px;
+    }
+    .but2 {
+      display: block;
+      left: 1161px;
+    }
+  }
+  .direction3 {
+    background-image: url('../../../../assets/img/dir3.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    .but1 {
+      display: block;
+      left: 1001px;
+    }
+    .but3 {
+      display: block;
+      left: 741px;
+    }
+    .but2 {
+      display: none;
+    }
+  }
+  .body_content_wrap {
+    height: calc(100% - 18px);
+    margin-top: 18px;
+    /*.data_display{*/
+    /*    height: 50px;*/
+    /*    line-height: 40px;*/
+    /*    border: 1px solid #E9EEF3;*/
+    /*    border-radius: 2px;*/
+
+    /*}*/
+    .data_left {
+      padding-left: 30px;
+      text-align: left;
+      background: #f5f6f6;
+      color: rgba(119, 140, 162, 0.8);
+      height: 50px;
+      width: 250px;
+      line-height: 50px;
+      border-top: 1px solid #e9eef3;
+      border-bottom: 1px solid #e9eef3;
+    }
+    .data_right {
+      border: 1px solid #e9eef3;
+      height: 50px;
+      width: 100%;
+      line-height: 50px;
+      padding-left: 27px;
+      color: #778ca2;
+      position: relative;
+      span {
+        margin-right: 20px;
+      }
+      .data_detail {
+        position: absolute;
+        right: 10px;
+        top: 0px;
+        font-size: 14px;
+      }
+    }
+    .data_right_normal {
+      background: #f5f6f6;
+      .exceed_tag {
+        display: none;
+      }
+    }
+    .data_right_exceed {
+      background: rgba(245, 100, 102, 0.08);
+      /deep/.el-input-number .el-input__inner {
+        color: #f56466;
+      }
+      .exceed_tag {
+        display: inline;
+        padding: 2px 8px;
+        height: 20px;
+        background: rgba(254, 247, 247, 0.1);
+        border: 1px solid #f56466;
+        border-radius: 4px;
+        color: #f56466;
+        margin-right: 20px;
+      }
+    }
+    .area_person_display {
+      height: 100%;
+      display: flex;
+      .area_display_wrap {
+        height: 100%;
+      }
+      .area_display {
+        position: relative;
+        z-index: 9;
+        height: calc(100% - 50px);
+        width: 250px;
+        padding: 20px 20px 0 20px;
+        border-left: 1px solid #e9eef3;
+        border-right: 1px solid #e9eef3;
+        .all_person {
+          width: 210px;
+          height: 60px;
+          border-radius: 2px;
+          line-height: 60px;
+          text-align: center;
+          cursor: pointer;
+        }
+        .all_person.no_area {
+          background-color: #62757e;
+          color: #fff;
+        }
+        .all_person.activeNoArea {
+          background: #247aef;
+          color: #fff;
+        }
+        .selection_right_but_wrap {
+          height: calc(100% - 60px - 80px - 35px);
+          overflow-y: auto;
+          overflow-x: hidden;
+          background: rgba(226, 226, 226, 0.24);
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          padding: 20px 0;
+        }
+        .area_manage_wrap {
+          width: 100%;
+          height: 120px;
+          background: rgba(226, 226, 226, 0.24);
+          padding-top: 10px;
+        }
+        .area_manage {
+          cursor: pointer;
+          width: 164px;
+          height: 80px;
+          margin-bottom: 35px;
+          margin-left: 20px;
+          color: #778ca2;
+          text-align: center;
+          line-height: 80px;
+          background: #ffffff;
+          border: 2px #d1d6e6 dashed;
+          border-radius: 2px;
+        }
+        .area.activeArea {
+          color: white;
+        }
+        .area {
+          cursor: pointer;
+          width: 172px;
+          //min-height: 80px;
+          background: #ffffff;
+          padding: 20px;
+          border-radius: 2px;
+          //background: rgba(239, 241, 247, 0.5);
+          color: #3a3c4b;
+          font-size: 16px;
+          margin-bottom: 20px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          position: relative;
+
+          .rot {
+            position: absolute;
+            top: -5px;
+            right: -5px;
+            width: 10px;
+            height: 10px;
+            background: linear-gradient(0deg, #e03134 0%, #e24f51 100%);
+            box-shadow: 0px 2px 6px 0px rgba(196, 55, 57, 0.35);
+            border-radius: 50%;
+          }
+          .outnumber {
+            background-color: #fff;
+            padding: 2px 6px;
+            border-radius: 2px;
+            color: #f56466;
+          }
+          //.outnumber {
+          //  position: absolute;
+          //  left: 120px;
+          //  text-align: center;
+          //  z-index: 999;
+          //  height: 35px;
+          //  line-height: 35px;
+          //  font-size: 14px;
+          //  color: #f56466;
+          //  min-width: 99px;
+          //  /*padding: 0 16px 0 22px;*/
+          //  background-image: url("../../../../assets/img/dialog_box.png");
+          //  background-size: 100% 100%;
+          //  background-repeat: no-repeat;
+          //}
+          .area_text {
+            margin-bottom: 6px;
+            text-align: center;
+          }
+        }
+        .area:hover {
+          .close {
+            position: absolute;
+            top: 8px;
+            right: 8px;
+            width: 14px;
+            height: 14px;
+            background-image: url('../../../../assets/meetingPalce/paiwei/delblack.png');
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+          }
+          .edit {
+            position: absolute;
+            top: 8px;
+            left: 8px;
+            width: 16px;
+            height: 16px;
+            background-image: url('../../../../assets/img/edit_img.png');
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+          }
+          .close:hover {
+            background-image: url('../../../../assets/meetingPalce/paiwei/delred.png');
+          }
+        }
+        .area.activeArea:hover {
+          .close {
+            background-image: url('../../../../assets/meetingPalce/paiwei/delFFF.png');
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+          }
+          .edit {
+            background-image: url('../../../../assets/img/edit_img_b.png');
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+          }
+          .close:hover {
+            background-image: url('../../../../assets/meetingPalce/paiwei/delred.png');
+          }
+        }
+        .normalArea:hover {
+          background: #fff !important;
+          border: 1px solid #f28a68;
+          border-color: var(--yf-border-color);
+          /*box-shadow: 0px 1px 8px 0px rgba(54,90,222,0.2000);*/
+          /*border-radius: 2px;*/
+        }
+      }
+      .person_display_wrap {
+        width: calc(100% - 250px);
+        height: 100%;
+        position: relative;
+
+        .header {
+          width: 100%;
+          height: 77px;
+          border: 1px solid #e9eef3;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 20px;
+          .header_btn {
+            div {
+              // width: 100%;
+              // width: 100px;
+              height: 40px;
+              background: #7690ed;
+              box-shadow: 0px 1px 8px 0px rgba(84, 116, 232, 0.2);
+              border-radius: 2px;
+              padding: 12px;
+              display: flex;
+              align-items: center;
+              color: #fff;
+              margin-right: 20px;
+              cursor: pointer;
+            }
+          }
+          div {
+            display: flex;
+            align-items: center;
+            .el-button {
+              margin-left: 10px;
+            }
+          }
+          .all_choose_box {
+            line-height: 77px;
+            /deep/.el-checkbox {
+              margin-left: 20px;
+            }
+          }
+          .el-button {
+            box-shadow: none !important;
+
+            // background: #7690ed !important;
+            color: #fff !important;
+          }
+        }
+        .all_person_display {
+          width: 100%;
+          height: calc(100% - 40px - 85px);
+          display: flex;
+          .no_tree {
+            animation: TreeShrink 0.2s linear;
+            width: 0;
+            .el-tree {
+              display: none;
+            }
+          }
+          .tree {
+            width: 300px;
+            animation: TreeExpend 0.2s linear;
+            .el-tree {
+              display: block;
+            }
+          }
+          .tree_wrap {
+            position: relative;
+            height: 100%;
+            border-right: 1px solid #e9eef3;
+            background: #f5f6f6;
+            padding: 10px 0;
+            z-index: 1000;
+            .arrow {
+              cursor: pointer;
+              top: 20px;
+              right: -18px;
+              position: absolute;
+              width: 18px;
+              height: 44px;
+              z-index: 9;
+            }
+            .arrow_l {
+              background-image: url('../../../../assets/img/left.png');
+              background-repeat: no-repeat;
+              background-size: 100% 100%;
+            }
+            .arrow_r {
+              background-image: url('../../../../assets/img/right.png');
+              background-repeat: no-repeat;
+              background-size: 100% 100%;
+            }
+            /deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+              background-color: #e5e5e5 !important;
+              font-weight: bold; // 字体加粗
+            }
+            .el-tree {
+              overflow-y: auto;
+              overflow-x: auto;
+              background: #f5f6f6;
+              padding-right: 10px;
+              /deep/ .el-tree-node__content:hover,
+              /deep/ .el-upload-list__item:hover {
+                background-color: #e5e5e5;
+              }
+            }
+            .el-tree {
+              height: 100%;
+            }
+          }
+          to {
+            height: 10px;
+          }
+          .list_w {
+            animation: TableExpend 0.2s linear;
+            width: 100%;
+          }
+          .list_n {
+            animation: TableShrink 0.2s linear;
+            width: calc(100% - 300px - 20px);
+          }
+          .list_wrap {
+            height: 100%;
+            margin-left: 20px;
+            .el-table {
+              height: 100%;
+              overflow-y: auto;
+              i {
+                margin-left: 10px;
+                cursor: pointer;
+              }
+              .tag {
+                border: 1px solid;
+                padding: 0 10px;
+                //min-width: 100px;
+                width: 150px;
+                height: 30px;
+                line-height: 30px;
+                text-align: center;
+                margin-right: 26px;
+              }
+              /deep/.el-checkbox {
+                .is-indeterminate {
+                  .el-checkbox__inner {
+                    background-color: #5474e8;
+                  }
+                }
+              }
+              /deep/.cell {
+                .is-checked {
+                  .el-checkbox__inner {
+                    background-color: #5474e8;
+                  }
+                }
+              }
+            }
+            .el-pagination {
+              height: 50px;
+            }
+            .edit_but {
+              color: #409eff;
+              cursor: pointer;
+            }
+          }
+        }
+        .person_display {
+          // border: 1px solid red;
+          position: relative;
+          .zhezhao {
+            position: absolute;
+            width: 95%;
+            height: 100%;
+            z-index: 9999;
+          }
+          .drag_wrap {
+            width: 100%;
+            max-height: 100%;
+            display: flex;
+            justify-content: flex-start;
+            flex-wrap: wrap;
+            align-content: flex-start;
+            overflow-y: auto;
+          }
+          max-height: calc(100% - 40px - 77px);
+          overflow-y: auto;
+          width: calc(100% + 20px);
+          padding-left: 8px;
+          margin-top: 12px;
+          .person.active {
+            border: 1px solid #5474e8;
+          }
+          .person {
+            position: relative;
+            width: 240px;
+            height: 80px;
+            background: #ffffff;
+            border: 1px solid rgba(237, 241, 244, 0.65);
+            box-shadow: 0px 4px 20px 0px rgba(55, 83, 163, 0.08);
+            border-radius: 4px;
+            margin: 10px 8px;
+            padding: 18px 12px 18px 24px;
+            display: flex;
+            cursor: pointer;
+            .el-checkbox {
+              position: absolute;
+              top: 0px;
+              left: 6px;
+              /deep/.is-checked {
+                .el-checkbox__inner {
+                  background-color: #7690ed;
+                }
+              }
+            }
+            /deep/ .el-checkbox__inner {
+              // border: 1px solid rgba(190, 192, 197, 0.8);
+              width: 14px;
+              height: 14px;
+              // background-color: #7690ed;
+            }
+            /deep/ .el-checkbox__label {
+              display: none;
+            }
+
+            // .leave_tag {
+            //   position: absolute;
+            //   cursor: pointer;
+            //   color: white;
+            //   font-size: 12px;
+            //   text-align: center;
+            //   width: 48px;
+            //   height: 20px;
+            //   // background: rgba(94, 116, 235, 0.4);
+            //   // top: 0;
+            //   // right: 0;
+            // }
+            .leave_tag {
+              position: absolute;
+              top: -1px;
+              right: -1px;
+              cursor: pointer;
+              // color: white;
+              font-size: 12px;
+              text-align: center;
+              width: 48px;
+              height: 20px;
+              // background: rgba(94, 116, 235, 0.4);
+              top: 0;
+              right: 0;
+            }
+            .leave_tag {
+              position: absolute;
+              cursor: pointer;
+              // color: white;
+              font-size: 12px;
+              text-align: center;
+              width: 48px;
+              height: 20px;
+              // background: rgba(94, 116, 235, 0.4);
+              top: 0;
+              right: 6px;
+            }
+            .portrait_number {
+              width: 44px;
+              height: 44px;
+              background-color: #778ca2;
+              opacity: 0.24;
+              border-radius: 8px;
+              .sort_number {
+                width: 40px;
+                line-height: 44px;
+                text-align: center;
+                font-size: 24px;
+                font-family: 'SourceHanSansCN-Medium';
+                font-weight: 500;
+                color: #ffffff;
+              }
+            }
+            .portrait {
+              width: 44px;
+              height: 44px;
+              background-image: url('../../../../assets/img/portrait.png');
+              background-size: 100% 100%;
+              background-repeat: no-repeat;
+            }
+            .text_wrap {
+              width: 178px;
+              height: 44px;
+              display: inline;
+              padding-left: 14px;
+              .name {
+                font-size: 16px;
+                color: #3a3c4b;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+              .position,
+              .require {
+                font-size: 12px;
+                color: #778ca2;
+              }
+              .position {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.color_icon {
+  width: 100%;
+  // border-color: transparent transparent #222 transparent;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: 10;
+  // border: 1px solid red;
+  height: 8px;
+  border-radius: 0 0 2px 2px;
+}
+//.color_icon_1 {
+//  background: url("../../../../assets/img/colorList/color_i (1).png");
+//}
+//.color_icon_2 {
+//  background: url("../../../../assets/img/colorList/color_i (2).png");
+//}
+//.color_icon_3 {
+//  background: url("../../../../assets/img/colorList/color_i (3).png");
+//}
+//.color_icon_4 {
+//  background: url("../../../../assets/img/colorList/color_i (4).png");
+//}
+//.color_icon_5 {
+//  background: url("../../../../assets/img/colorList/color_i (5).png");
+//}
+//.color_icon_6 {
+//  background: url("../../../../assets/img/colorList/color_i (6).png");
+//}
+//.color_icon_7 {
+//  background: url("../../../../assets/img/colorList/color_i (7).png");
+//}
+//.color_icon_8 {
+//  background: url("../../../../assets/img/colorList/color_i (8).png");
+//}
+//.color_icon_9 {
+//  background: url("../../../../assets/img/colorList/color_i (9).png");
+//}
+//.color_icon_10 {
+//  background: url("../../../../assets/img/colorList/color_i (10).png");
+//}
+//.color_icon_11 {
+//  background: url("../../../../assets/img/colorList/color_i (11).png");
+//}
+//.color_icon_12 {
+//  background: url("../../../../assets/img/colorList/color_i (12).png");
+//}
+//.color_icon_13 {
+//  background: url("../../../../assets/img/colorList/color_i (13).png");
+//}
+//.color_icon_14 {
+//  background: url("../../../../assets/img/colorList/color_i (14).png");
+//}
+//.color_icon_15 {
+//  background: url("../../../../assets/img/colorList/color_i (15).png");
+//}
+//.color_icon_16 {
+//  background: url("../../../../assets/img/colorList/color_i (16).png");
+//}
+//.color_icon_17 {
+//  background: url("../../../../assets/img/colorList/color_i (17).png");
+//}
+//.color_icon_18 {
+//  background: url("../../../../assets/img/colorList/color_i (18).png");
+//}
+//.color_icon_19 {
+//  background: url("../../../../assets/img/colorList/color_i (19).png");
+//}
+//.color_icon_20 {
+//  background: url("../../../../assets/img/colorList/color_i (20).png");
+//}
+//.color_icon_21 {
+//  background: url("../../../../assets/img/colorList/color_i (21).png");
+//}
+//.color_icon_22 {
+//  background: url("../../../../assets/img/colorList/color_i (22).png");
+//}
+//.color_icon_23 {
+//  background: url("../../../../assets/img/colorList/color_i (23).png");
+//}
+//.color_icon_24 {
+//  background: url("../../../../assets/img/colorList/color_i (24).png");
+//}
+//.color_icon_25 {
+//  background: url("../../../../assets/img/colorList/color_i (25).png");
+//}
+.areaDraged {
+  border: 1px solid #5474e8;
+}
+.not_allowed_but {
+  background: rgba(194, 198, 202, 0.8) !important;
+  border: none !important;
+  box-shadow: 0px 1px 8px 0px rgba(84, 116, 232, 0.2) !important;
+  cursor: not-allowed;
+  color: #fff !important;
+}
+.cancles {
+}
+.area_dialog {
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .new_add_area {
+    align-self: flex-start;
+    margin-left: 20px;
+  }
+  .area_list {
+    width: 100%;
+    max-height: 500px;
+    overflow-y: auto;
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+    .item {
+      display: flex;
+      line-height: 40px;
+      margin: 20px 0;
+      .label {
+        min-width: 68px;
+      }
+      i {
+        cursor: pointer;
+      }
+      .el-input {
+        width: 300px;
+        margin: 0 10px;
+      }
+    }
+  }
+}
+.leaveTag {
+  margin-left: 10px;
+  color: #faa023;
+}
+.weifankuiTag {
+  margin-left: 10px;
+  color: #c20003;
+}
+.yifankuiTag {
+  margin-left: 10px;
+  color: #5474e8;
+}
+.el-icon-close {
+  line-height: 40px;
+}
+.dialog /deep/ .el-dialog__body {
+  flex-direction: column !important;
+}
+.el-dialog__wrapper {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  /deep/ .el-dialog {
+    margin-top: 0 !important;
+  }
+}
+</style>
+<style>
+.el-message-box__content {
+  padding: 0 60px !important;
+}
+.el-message-box__message {
+  /*width: 60%;*/
+}
+.el-message-box__status {
+  font-size: 30px !important;
+}
+</style>

src/views/meeting/operation/operation.vue

@@ -373,6 +373,10 @@ export default {
   data() {
     return {
       butList: [
+        {
+          name: '通知参会',
+          path: '/operation/noticeMeeting',
+        },
         {
           name: '人员管理',
           path: '/operation/divideArea',

src/views/meeting/state/beforeMeeting/index.vue

@@ -16,9 +16,7 @@
     <div class="header">
       <!-- <div>会议管理</div> -->
       <div>
-        <el-button type="primary" @click="toManageModule()"
-          >会议模板管理</el-button
-        >
+        <el-button type="primary" @click="toManageModule()">会议模板管理</el-button>
       </div>
     </div>
     <div class="content">
@@ -63,152 +61,149 @@
 </template>
 
 <script>
-import TimeCountDown from "../../componets/TimeCountDown";
-import TimeRecord from "../../componets/TimeRecord";
-import Styles from "../../../style/index";
-import MeetingItem from "../../componets/MeetingItem";
-import ConfDialog from "../../componets/ConfDialog";
-import { Loading } from "element-ui";
+import TimeCountDown from '../../componets/TimeCountDown'
+import TimeRecord from '../../componets/TimeRecord'
+import Styles from '../../../style/index'
+import MeetingItem from '../../componets/MeetingItem'
+import ConfDialog from '../../componets/ConfDialog'
+import { Loading } from 'element-ui'
 export default {
-  name: "before",
+  name: 'before',
   components: { Styles, TimeCountDown, TimeRecord, MeetingItem, ConfDialog },
   data() {
     return {
       dialogVisible: false,
       disableFlag: false,
-      userUnit: "",
-      userUnitId: "",
-      dialogTitle: "新增会议",
-      state: "before",
-      processId: "",
+      userUnit: '',
+      userUnitId: '',
+      dialogTitle: '新增会议',
+      state: 'before',
+      processId: '',
       published: false,
       loadingOptions: {
         lock: true,
-        text: "",
-        spinner: "el-icon-loading",
-        background: "rgba(0, 0, 0, 0.7)",
+        text: '',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)',
       },
       formData: {
         isCustomised: 0,
         isShowSeatNum: 0,
         isShowPodium: 1,
-        processName: "",
-        unitName: "",
-        startDate: "",
-        endDate: "",
-        processPerson: "",
-        processPhone: "",
-        des: "",
+        processName: '',
+        unitName: '',
+        startDate: '',
+        endDate: '',
+        processPerson: '',
+        processPhone: '',
+        des: '',
       },
-      nowDate: "",
-      user: "",
+      nowDate: '',
+      user: '',
       meetingLists: [
         {
-          processName:
-            "全市学习贯彻党的十九届六中全会精神“六讲六做” 大宣讲行动动员部署会",
+          processName: '全市学习贯彻党的十九届六中全会精神“六讲六做” 大宣讲行动动员部署会',
           publishTime: 1,
-          endTime: "2022/01/06 00:00:00",
+          endTime: '2022/01/06 00:00:00',
           data: [
-            { key: "时间", value: "2021-02-12" },
-            { key: "地址", value: "G楼七号厅" },
-            { key: "联系人", value: "张三三" },
-            { key: "联系电话", value: "13678569855" },
+            { key: '时间', value: '2021-02-12' },
+            { key: '地址', value: 'G楼七号厅' },
+            { key: '联系人', value: '张三三' },
+            { key: '联系电话', value: '13678569855' },
           ],
         },
         {
-          processName:
-            "全市学习贯彻党的十九届六中全会精神“六讲六做” 大宣讲行动动员部署会",
+          processName: '全市学习贯彻党的十九届六中全会精神“六讲六做” 大宣讲行动动员部署会',
           publishTime: 1,
-          endTime: "2022/01/06 00:00:00",
+          endTime: '2022/01/06 00:00:00',
           data: [
-            { key: "时间", value: "2021-02-12" },
-            { key: "地址", value: "G楼七号厅" },
-            { key: "联系人", value: "张三三" },
-            { key: "联系电话", value: "13678569855" },
+            { key: '时间', value: '2021-02-12' },
+            { key: '地址', value: 'G楼七号厅' },
+            { key: '联系人', value: '张三三' },
+            { key: '联系电话', value: '13678569855' },
           ],
         },
         {
-          processName:
-            "全市学习贯彻党的十九届六中全会精神“六讲六做” 大宣讲行动动员部署会meeting_item_text",
+          processName: '全市学习贯彻党的十九届六中全会精神“六讲六做” 大宣讲行动动员部署会meeting_item_text',
           publishTime: 1,
-          endTime: "2022/01/06 00:00:00",
+          endTime: '2022/01/06 00:00:00',
           data: [
-            { key: "时间", value: "2021-02-12" },
-            { key: "地址", value: "G楼七号厅" },
-            { key: "联系人", value: "张三三" },
-            { key: "联系电话", value: "13678569855" },
+            { key: '时间', value: '2021-02-12' },
+            { key: '地址', value: 'G楼七号厅' },
+            { key: '联系人', value: '张三三' },
+            { key: '联系电话', value: '13678569855' },
           ],
         },
       ],
-    };
+    }
   },
   created() {
-    this.user = sessionStorage.getItem("sysRoles");
-    this.userUnit = sessionStorage.getItem("unitName");
-    this.userUnitId = sessionStorage.getItem("unitId");
+    this.user = sessionStorage.getItem('sysRoles')
+    this.userUnit = sessionStorage.getItem('unitName')
+    this.userUnitId = sessionStorage.getItem('unitId')
     // this.find_danwei();
-    this.getData();
+    this.getData()
   },
   computed: {},
   methods: {
     toManageModule() {
-      this.$router.push("/moduleManage");
+      this.$router.push('/moduleManage')
     },
     handleClose() {
-      this.published = false;
+      this.published = false
     },
     clearPublish() {
-      this.published = false;
+      this.published = false
     },
     toSchedule() {
-      this.$router.push("/schedule");
+      this.$router.push('/schedule')
     },
     editM(id) {
-      this.disableFlag = false;
+      this.disableFlag = false
       this.$axios
         .getConferenceOverview(id)
         .then((res) => {
-          console.log(res);
-          this.formData = res.data.data;
+          console.log(res)
+          this.formData = res.data.data
         })
-        .catch((err) => {});
-      this.dialogVisible = true;
-      this.processId = id;
+        .catch((err) => {})
+      this.dialogVisible = true
+      this.processId = id
     },
     init() {
       this.meetingLists.forEach((item, index) => {
         // 字数限制30字,超出不显示
-        console.log(item);
-        let length = item.processName.length;
+        console.log(item)
+        let length = item.processName.length
         if (length > 34) {
-          item.showName = item.processName.substring(0, 30) + "...";
+          item.showName = item.processName.substring(0, 30) + '...'
         } else {
-          item.showName = item.processName;
+          item.showName = item.processName
         }
-        console.log(item);
-        this.$forceUpdate();
-      });
+        console.log(item)
+        this.$forceUpdate()
+      })
     },
     getData() {
       this.$axios
         .getMeetingLists()
         .then((res) => {
-          console.log(res);
-          this.meetingLists = res.data.data;
-          this.init();
+          console.log(res)
+          this.meetingLists = res.data.data
+          this.init()
         })
-        .catch((err) => {});
+        .catch((err) => {})
     },
     switchRouter(item) {
-      console.log(item);
-      let path = "";
+      console.log(item)
+      let path = ''
       if (item.processStatus == 3) {
         window.open(
           `http://hypz.hzswb.cn/confphone/pad/index.html#/list?token=${sessionStorage.getItem(
-            "ty_token"
-          )}&username=${sessionStorage.getItem("userName")}`,
-          "_blank"
-        );
+            'ty_token'
+          )}&username=${sessionStorage.getItem('userName')}`,
+          '_blank'
+        )
         // window.open(
         //   `http://120.27.238.48:8080/pad/#/list?token=${sessionStorage.getItem(
         //     "ty_token"
@@ -238,77 +233,77 @@ export default {
         //     break;
         // }
         if (item.processShowStatus == 1) {
-          path = "/operation/chooseModule";
+          path = '/operation/chooseModule'
         } else {
-          path = "/operation/divideArea";
+          path = '/operation/divideArea'
         }
 
         this.$router.push({
           path,
           query: { processId: item.id, isProcess: 1 },
-        });
+        })
       }
     }, //点击进入会议后，根据条件判断跳转路由
     newConference() {
       // this.formData.isCustomised = 0
-      if (this.user === "ROLE_HUIYIADMIN") {
-        this.formData.unitName = this.userUnit;
-        this.formData.unitId = this.userUnitId;
+      if (this.user === 'ROLE_HUIYIADMIN') {
+        this.formData.unitName = this.userUnit
+        this.formData.unitId = this.userUnitId
       }
-      console.log(this.formData);
-      this.disableFlag = false;
-      this.dialogVisible = true;
+      console.log(this.formData)
+      this.disableFlag = false
+      this.dialogVisible = true
     }, //打开新增会议弹窗
     confirm() {
       // this.$refs[formName].validate((valid) => {
       //   if (valid) {
-      if (this.dialogTitle === "新增会议") {
+      if (this.dialogTitle === '新增会议') {
         this.$axios
           .postAddProcess(this.formData)
           .then((res) => {
             if (res.data.code == 200) {
               this.$message({
-                type: "success",
-                message: "添加成功",
-              });
-              this.disableFlag = true;
-              this.addDialogClose();
-              this.getData();
+                type: 'success',
+                message: '添加成功',
+              })
+              this.disableFlag = true
+              this.addDialogClose()
+              this.getData()
               this.$router.push({
-                path: "/operation/chooseModule",
+                path: '/operation/chooseModule',
                 query: { processId: res.data.data, isProcess: 1 },
-              });
+              })
             } else {
               this.$message({
-                type: "error",
+                type: 'error',
                 message: res.data.data,
-              });
+              })
             }
           })
-          .catch((err) => {});
-      } else if (this.dialogTitle === "修改会议") {
+          .catch((err) => {})
+      } else if (this.dialogTitle === '修改会议') {
         this.$axios
           .postRemoteProcess(this.formData)
           .then((res) => {
             if (res.data.code == 200) {
               this.$message({
-                type: "success",
-                message: "修改成功",
-              });
+                type: 'success',
+                message: '修改成功',
+              })
               if (index == 1) {
-                this.published = true;
+                this.published = true
               }
-              this.disableFlag = true;
-              this.getMeetingLists();
-              this.addDialogClose();
+              this.disableFlag = true
+              this.getMeetingLists()
+              this.addDialogClose()
             } else {
               this.$message({
-                type: "error",
+                type: 'error',
                 message: res.data.data,
-              });
+              })
             }
           })
-          .catch((err) => {});
+          .catch((err) => {})
       }
       // } else {
       //   return false;
@@ -317,31 +312,31 @@ export default {
     }, //确认提交新增会议表单.
 
     fabu(val) {
-      this.published = false;
-      this.loadingOptions.text = "正在发布会议";
-      let loading = Loading.service(this.loadingOptions);
+      this.published = false
+      this.loadingOptions.text = '正在发布会议'
+      let loading = Loading.service(this.loadingOptions)
       //发布会议（2.发布，4.结束）
       let params = {
         processId: this.processId,
         processStatus: 2, //2发布  4结束
         isResetSignStatus: 1,
-      };
+      }
       this.$axios
         .getModifyStatus(params)
         .then((res) => {
           if (res.data.code == 200) {
-            loading.close();
+            loading.close()
             this.$message({
-              message: "会议发布成功！",
-              type: "success",
-            });
+              message: '会议发布成功！',
+              type: 'success',
+            })
           } else {
-            loading.close();
+            loading.close()
             this.$message({
               showClose: true,
               message: res.data.data,
-              type: "error",
-            });
+              type: 'error',
+            })
           }
         })
         .catch((err) => {
@@ -351,25 +346,25 @@ export default {
           //   message: "会议发布失败",
           //   type: "error",
           // });
-        });
+        })
     },
     addDialogClose() {
       this.formData = {
         isCustomised: 0,
         isShowSeatNum: 0,
         isShowPodium: 1,
-        processName: "",
-        unitName: "",
-        startDate: "",
-        endDate: "",
-        processPerson: "",
-        processPhone: "",
-        des: "",
-      };
-      this.dialogVisible = false;
+        processName: '',
+        unitName: '',
+        startDate: '',
+        endDate: '',
+        processPerson: '',
+        processPhone: '',
+        des: '',
+      }
+      this.dialogVisible = false
     },
   },
-};
+}
 </script>
 <style scoped lang="less">
 .meeting_wrap {

src/views/reserveRecord/allConfence.vue

+<template>
+  <div class="allConfence">
+    <div class="topData">
+      <div>src</div>
+      <div></div>
+      <div></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="less" scoped>
+.allConfence {
+  width: 100%;
+  height: 100%;
+}
+</style>
+

src/views/reserveRecord/confenceTable.vue

+<template>
+  <div class="confenceTable">单个</div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="less" scoped>
+.coonfencenTable {
+  width: 100%;
+  height: 100%;
+}
+</style>
\ No newline at end of file

src/views/reserveRecord/index.vue

+<template>
+  <div class="reserveRecord">
+    <div class="row">
+      <div class="box"></div>
+      <div class="text">会议室预定记录</div>
+    </div>
+    <div class="content">
+      <div class="content_nav">
+        <div class="all">全部会议室</div>
+        <div class="nav_list">
+          <div class="confence" v-for="(item,index) in confenceList" :key="index">
+            <div class="confence_name">{{item.name}}</div>
+            <div class="box"></div>
+          </div>
+        </div>
+      </div>
+      <div class="content_list">
+        <div class="list_data">
+          <div class="data_num_select">
+            <el-select class="year_select" v-model="yearValue" placeholder="请选择">
+              <el-option
+                v-for="item in yearList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+            <el-select class="month_select" v-model="monthValue" placeholder="请选择">
+              <el-option
+                v-for="item in monthList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </div>
+          <div class="data_num_tipes">
+            <img src="../../assets/img/explanation_i.png" alt />
+            <div>操作说明：初次点击“时间块”选择起点时间，再次点击选择结束时间；深灰色时间块：为已预定时间段。</div>
+          </div>
+        </div>
+        <div class="list_table">
+          <allConfence v-if="isOnce"></allConfence>
+          <confenceTable v-if="!isOnce"></confenceTable>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import allConfence from './allConfence.vue'
+import confenceTable from './confenceTable.vue'
+export default {
+  components: { allConfence, confenceTable },
+  watch: {
+    yearValue(newVal, oldVal) {
+      console.log(newVal, oldVal)
+    },
+  },
+  data() {
+    return {
+      confenceList: [
+        { name: '1号会议室', id: '123' },
+        {
+          name: '2号会议室',
+          id: '321',
+        },
+      ],
+      yearList: [
+        { name: '2020年', value: 2020 },
+        { name: '2021年', value: 2021 },
+        { name: '2022年', value: 2022 },
+      ],
+      monthList: [
+        { name: '1月', value: 1 },
+        { name: '2月', value: 2 },
+        { name: '3月', value: 3 },
+        { name: '4月', value: 4 },
+        { name: '5月', value: 5 },
+        { name: '6月', value: 6 },
+        { name: '7月', value: 7 },
+        { name: '8月', value: 8 },
+        { name: '9月', value: 9 },
+        { name: '10月', value: 10 },
+        { name: '11月', value: 11 },
+        { name: '12月', value: 12 },
+      ],
+      yearValue: '',
+      monthValue: '',
+      isOnce: true,
+    }
+  },
+}
+</script>
+<style lang="less" scoped>
+// 去除滚动条
+::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
+.reserveRecord {
+  width: 100%;
+  height: 100%;
+  padding-top: 22px;
+  .row {
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    padding-left: 32px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 25px;
+    .box {
+      width: 2px;
+      height: 18px;
+      background: #5474e8;
+      border-radius: 0px 0px 0px 0px;
+      opacity: 1;
+      margin-right: 6px;
+    }
+    .text {
+      font-size: 18px;
+      line-height: 40px;
+    }
+  }
+  .content {
+    width: 1872px;
+    height: calc(100% - 82px);
+    background-color: #ffffff;
+    margin: 0 auto;
+    display: flex;
+    padding: 20px;
+    .content_nav {
+      width: 210px;
+      height: 100%;
+      .all {
+        width: 100%;
+        height: 60px;
+        background: #5474e8;
+        border-radius: 2px 2px 2px 2px;
+        color: #ffffff;
+        font-size: 18px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .nav_list {
+        width: 100%;
+        height: calc(100% - 60px);
+        background-color: rgba(226, 226, 226, 0.24);
+        border-radius: 4px 0px 0px 4px;
+        // text-align: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-top: 20px;
+        overflow: auto;
+        .confence {
+          width: 172px;
+          height: 80px;
+          background: #ffffff;
+          border-radius: 2px 2px 2px 2px;
+          text-align: center;
+          margin-bottom: 20px;
+          cursor: pointer;
+          .confence_name {
+            width: 100%;
+            height: 72px;
+            line-height: 72px;
+            font-size: 18px;
+          }
+          .box {
+            width: 100%;
+            height: 8px;
+            border-radius: 0px 0px 2px 2px;
+            background: #5474e8;
+          }
+        }
+      }
+    }
+    .content_list {
+      width: calc(100% - 210px);
+      height: 100%;
+      // background-color: #100;
+      .list_data {
+        width: 100%;
+        width: 1622px;
+        height: 32px;
+        background: #edeff2;
+        border-radius: 0px 0px 0px 0px;
+        display: flex;
+        align-items: center;
+        margin-bottom: 24px;
+        .data_num_select {
+          width: 52%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          padding-left: 58px;
+          .year_select,
+          .month_select {
+            // height: 100%;
+            width: 100px;
+            /deep/.el-input {
+              // height: 100%;
+              height: 22px;
+              width: 100%;
+              .el-input__inner {
+                height: 22px;
+                width: 100%;
+                background-color: transparent;
+                border: none;
+              }
+              .el-input__inner:focus {
+                box-shadow: none !important;
+              }
+              .el-input__suffix {
+                display: flex;
+                align-items: center;
+              }
+            }
+          }
+        }
+        .data_num_tipes {
+          display: flex;
+          align-items: center;
+          color: #778ca2;
+          font-size: 14px;
+          img {
+            width: 17px;
+            height: 15px;
+            margin-right: 8px;
+          }
+        }
+      }
+      .list_table {
+        width: 100%;
+        height: calc(100% - 56px);
+        padding: 0 30px 0 20px;
+      }
+    }
+  }
+}
+</style>

src/views/system/customizeUser.vue

@@ -16,41 +16,33 @@
           <el-button size="small" type="primary" v-loading="exportFlag"
             ><i class="system_down"></i>导入</el-button
           >
-        </el-upload> -->
+    </el-upload>-->
 
-    <!-- <el-button
+    <!-- <el-button--
           size="small"
           type="primary"
           @click="exportUser"
           v-loading="importFlag"
-          ><i class="report_icon"></i>导出</el-button -->
+    ><i class="report_icon"></i>导出</el-button-->
     <!-- > -->
     <!-- </div> -->
     <div class="content_wrap">
       <div class="top_wrap" v-if="!switchFlag">
         <el-form ref="form" :inline="true" :model="form">
-          <el-form-item label="">
-            <el-button size="small" type="primary" @click="openAddDialog()"
-              >新增人员</el-button
-            >
+          <el-form-item label>
+            <el-button size="small" type="primary" @click="openAddDialog()">新增人员</el-button>
             <!-- <el-button size="small" type="primary" @click="batchRank()"
               >批量排序</el-button
-            > -->
+            >-->
           </el-form-item>
           <el-form-item label="姓名:">
-            <el-input
-              v-model.trim="form.customUserName"
-              placeholder=""
-            ></el-input>
+            <el-input v-model.trim="form.customUserName" placeholder></el-input>
           </el-form-item>
           <!-- <el-form-item label="手机号:">
             <el-input v-model.trim="form.phone" placeholder=""></el-input>
-          </el-form-item> -->
+          </el-form-item>-->
           <el-form-item label="单位:">
-            <el-input
-              v-model.trim="form.customUserUnit"
-              placeholder=""
-            ></el-input>
+            <el-input v-model.trim="form.customUserUnit" placeholder></el-input>
           </el-form-item>
           <el-form-item label="更新时间:">
             <el-date-picker
@@ -61,29 +53,22 @@
               range-separator="至"
               start-placeholder="开始日期"
               end-placeholder="结束日期"
-            >
-            </el-date-picker>
+            ></el-date-picker>
           </el-form-item>
           <el-form-item class="button_wrap">
-            <el-button size="small" type="primary" @click="getTaList(1)"
-              >查询</el-button
-            >
-            <el-button size="small" @click="resert" class="mg_l_20">
-              重置</el-button
-            >
+            <el-button size="small" type="primary" @click="getTaList(1)">查询</el-button>
+            <el-button size="small" @click="resert" class="mg_l_20">重置</el-button>
           </el-form-item>
         </el-form>
         <!-- <div class="from_button_item">
             <el-button size="small" type="primary" @click="addConf"
               ><i class="add_r_icon"></i>新增人员</el-button
             >
-          </div> -->
+        </div>-->
       </div>
       <div class="top_wrap top_wrap_2" v-else>
         <el-input v-model="cardSearch"></el-input>
-        <el-button size="small" type="primary" @click="cardQuery"
-          >查询</el-button
-        >
+        <el-button size="small" type="primary" @click="cardQuery">查询</el-button>
       </div>
       <div class="header">
         <div class="header_title_wrap">
@@ -111,7 +96,7 @@
               :class="!switchFlag ? 'list_active_icon' : 'list_normal_icon'"
             ></i>
           </div>
-        </div> -->
+        </div>-->
       </div>
       <!-- 表格 -->
       <div class="mianContent">
@@ -124,9 +109,7 @@
               :key="index"
               :class="{ actives: chooseIndex == index }"
               @click="chooseFenLei(index, item)"
-            >
-              {{ item.customOrgName }}
-            </div>
+            >{{ item.customOrgName }}</div>
           </div>
         </div>
         <div class="content">
@@ -138,10 +121,8 @@
             class="template_table"
             v-loading="loading"
           >
-            <el-table-column prop="customUserNum" label="序号" width="100">
-            </el-table-column>
-            <el-table-column prop="customUserName" label="姓名" width="150">
-            </el-table-column>
+            <el-table-column prop="customUserNum" label="序号" width="100"></el-table-column>
+            <el-table-column prop="customUserName" label="姓名" width="150"></el-table-column>
             <!-- <el-table-column label="手机号" width="200">
             <template slot-scope="scope">
               {{
@@ -150,38 +131,32 @@
                   : scope.row.phone
               }}
             </template>
-          </el-table-column> -->
+            </el-table-column>-->
             <!-- <el-table-column prop="dingId" label="浙政钉ID"> </el-table-column> -->
-            <el-table-column prop="customUserUnit" label="单位">
-            </el-table-column>
-            <el-table-column prop="customUserPosition" label="职务">
-            </el-table-column>
+            <el-table-column prop="customUserUnit" label="单位"></el-table-column>
+            <el-table-column prop="customUserPosition" label="职务"></el-table-column>
             <!-- <el-table-column prop="isLeader" width="100" label="是否领导">
               <template slot-scope="scope">
                 {{ scope.row.isLeader | showName }}
               </template>
-            </el-table-column> -->
+            </el-table-column>-->
             <!-- <el-table-column prop="dingChecked" width="140" label="钉库核对状态">
               <template slot-scope="scope">
                 {{ scope.row.dingChecked | check }}
               </template>
-            </el-table-column> -->
-            <el-table-column prop="updateTime" label="更新时间">
-            </el-table-column>
+            </el-table-column>-->
+            <el-table-column prop="updateTime" label="更新时间"></el-table-column>
             <el-table-column label="操作" width="180">
               <template slot-scope="scope">
-                <el-button type="text" @click="handleEdit(scope.row)"
-                  >编辑</el-button
-                >
+                <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                 <!-- <el-button type="text" @click="lookItem(scope.row)"
                 >查看</el-button
-              > -->
+                >-->
                 <el-button
                   type="text"
                   style="color: red !important"
                   @click="deletepeole(scope.row)"
-                  >删除</el-button
-                >
+                >删除</el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -194,8 +169,7 @@
               :page-size="form.pageSize"
               layout="total, sizes, prev, pager, next, jumper"
               :total="count"
-            >
-            </el-pagination>
+            ></el-pagination>
           </div>
         </div>
       </div>
@@ -209,18 +183,8 @@
       :before-close="handleClose"
       append-to-body
     >
-      <el-form
-        class="editForm"
-        ref="forms"
-        :rules="ruleForm"
-        :model="forms"
-        label-width="120px"
-      >
-        <el-form-item
-          label="所属分类:"
-          prop="customOrgId"
-          v-show="zhuangtai == 'add'"
-        >
+      <el-form class="editForm" ref="forms" :rules="ruleForm" :model="forms" label-width="120px">
+        <el-form-item label="所属分类:" prop="customOrgId" v-show="zhuangtai == 'add'">
           <!-- <el-input  placeholder=""></el-input> -->
           <el-select v-model="forms.customOrgId" placeholder="请选择">
             <el-option
@@ -228,25 +192,16 @@
               :key="item.id"
               :label="item.customOrgName"
               :value="item.id"
-            >
-            </el-option>
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="排序:" prop="customUserNum">
           <div class="input_number">
-            <el-input-number
-              v-model="forms.customUserNum"
-              :max="countMax"
-              :min="1"
-              :step="1"
-            ></el-input-number>
+            <el-input-number v-model="forms.customUserNum" :max="countMax" :min="1" :step="1"></el-input-number>
           </div>
         </el-form-item>
         <el-form-item label="姓名:" prop="customUserName">
-          <el-input
-            v-model.trim="forms.customUserName"
-            placeholder=""
-          ></el-input>
+          <el-input v-model.trim="forms.customUserName" placeholder></el-input>
         </el-form-item>
         <!-- <el-form-item class="asy_phone" label="手机号:" prop="phone">
           <el-input v-model.trim="forms.phone" placeholder=""> </el-input>
@@ -260,12 +215,9 @@
             placeholder=""
             :disabled="true"
           ></el-input>
-        </el-form-item> -->
+        </el-form-item>-->
         <el-form-item label="职务:" prop="position">
-          <el-input
-            v-model.trim="forms.customUserPosition"
-            placeholder=""
-          ></el-input>
+          <el-input v-model.trim="forms.customUserPosition" placeholder></el-input>
         </el-form-item>
         <!-- <el-form-item
           label="单位（OA）:"
@@ -277,12 +229,9 @@
             placeholder=""
             disabled
           ></el-input>
-        </el-form-item> -->
+        </el-form-item>-->
         <el-form-item label="单位:" prop="unitId">
-          <el-input
-            v-model.trim="forms.customUserUnit"
-            placeholder=""
-          ></el-input>
+          <el-input v-model.trim="forms.customUserUnit" placeholder></el-input>
           <!--          <el-input v-model.trim="forms.unit" placeholder="请输入"></el-input>-->
           <!-- <el-select
             v-model="forms.unit"
@@ -300,41 +249,27 @@
             >
               <span>{{ p.unitName }}</span>
             </el-option>
-          </el-select> -->
+          </el-select>-->
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="close">取 消</el-button>
-        <el-button type="primary" :loading="saveFlag" @click="save()"
-          >保 存</el-button
-        >
+        <el-button type="primary" :loading="saveFlag" @click="save()">保 存</el-button>
       </span>
     </el-dialog>
 
-    <el-dialog
-      title="管理分类"
-      :visible.sync="manageCategores"
-      width="30%"
-      :before-close="handleClose"
-    >
+    <el-dialog title="管理分类" :visible.sync="manageCategores" width="30%" :before-close="handleClose">
       <div class="manageMain">
         <div class="btns">
           <el-button type="primary" @click="insertFen">新增分类</el-button>
         </div>
         <div>
-          <div
-            class="manageItem"
-            v-for="(item, index) in manageLists"
-            :key="index"
-          >
+          <div class="manageItem" v-for="(item, index) in manageLists" :key="index">
             <div class="contents" v-show="item.updateStatus != 2">
               <div class="mian">
                 <div class="title">分类名称:</div>
                 <div>
-                  <el-input
-                    v-model="item.customOrgName"
-                    @change="changeCustomOrgName(index)"
-                  ></el-input>
+                  <el-input v-model="item.customOrgName" @change="changeCustomOrgName(index)"></el-input>
                 </div>
               </div>
 
@@ -356,31 +291,30 @@
       :fileType="fileType"
       :customOrgsId="customOrgsId"
       @init="init"
-    >
-    </batch-import-dialog>
+    ></batch-import-dialog>
   </div>
 </template>
   <script>
-import draggable from "vuedraggable";
-import BatchImportDialog from "../meeting/operation/Administration/components/BatchImportDialog";
-import { Loading } from "element-ui";
-import { json } from "body-parser";
+import draggable from 'vuedraggable'
+import BatchImportDialog from '../meeting/operation/Administration/components/BatchImportDialog'
+import { Loading } from 'element-ui'
+import { json } from 'body-parser'
 export default {
-  name: "jurisdiction",
+  name: 'jurisdiction',
   data() {
     return {
-      importDialogTitle: "批量导入人员信息",
+      importDialogTitle: '批量导入人员信息',
       chooseIndex: 0,
       manageCategores: false,
       updateDialogFlag: false,
       selectData: [],
       personOptions: [],
       unitOptions: [],
-      fileType: "lib",
+      fileType: 'lib',
       batchAImportFlag: false,
       dragFlag: true, //false表示已拖动，保存排序按钮可以被点击
       attribute: {},
-      cardSearch: "",
+      cardSearch: '',
       personCard: [], //名片模式下页面上展示的人员数据
       allPersonCard: [], //名片模式下所有人员的数据
       manageList: [],
@@ -388,15 +322,15 @@ export default {
       dragOptions: {
         animation: 120,
         scroll: true,
-        group: "person",
-        ghostClass: "ghost-style",
-        filter: ".notMove",
+        group: 'person',
+        ghostClass: 'ghost-style',
+        filter: '.notMove',
       },
-      rankData: { arr: [{ name: "", newSort: 1, oldSort: 0 }] }, //批量排序数据
+      rankData: { arr: [{ name: '', newSort: 1, oldSort: 0 }] }, //批量排序数据
       personTable: [],
       switchFlag: false, //列表与名片模式切换标志
       loading: false,
-      zhuangtai: "add",
+      zhuangtai: 'add',
       importFlag: false,
       exportFlag: false,
       //防止多次提交
@@ -405,58 +339,53 @@ export default {
       count: 0,
       //搜索表单
       dates: [],
-      customOrgsId: "",
+      customOrgsId: '',
       form: {
-        customOrgId: "",
-        customUserName: "",
-        time: "",
+        customOrgId: '',
+        customUserName: '',
+        time: '',
         pageSize: 10,
         pageNum: 1,
-        customUserUnit: "",
+        customUserUnit: '',
       },
 
       //表单验证
       rankFormRule: {
-        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
+        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
       },
       ruleForm: {
-        customOrgId: [
-          { required: true, message: "所属分类不能为空", trigger: "change" },
-        ],
+        customOrgId: [{ required: true, message: '所属分类不能为空', trigger: 'change' }],
         customUserNum: [
-          { required: true, message: "排序不能为空", trigger: "blur" },
+          { required: true, message: '排序不能为空', trigger: 'blur' },
           {
             required: true,
             pattern: /(^[1-9]\d*$)/,
-            message: "排序应为正整数",
-            trigger: "blur",
+            message: '排序应为正整数',
+            trigger: 'blur',
           },
         ],
-        customUserName: [
-          { required: true, message: "请输入姓名", trigger: "blur" },
-        ],
+        customUserName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
         phone: [
           // { required: true, message: "请输入联系方式", trigger: "blur" },
           {
-            pattern:
-              /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
+            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
             //pattern: /^1[3456789]\d{9}$/,
-            message: "请输入正确的手机号码",
+            message: '请输入正确的手机号码',
           },
         ],
         // dingId: [{ required: true, message: "请输入", trigger: "blur" }],
         dingId: [
-          { required: true, message: "请同步浙政钉" },
+          { required: true, message: '请同步浙政钉' },
           {
             pattern: /(^[1-9]\d*$)/,
-            message: "请输入数字值",
+            message: '请输入数字值',
           },
         ],
       },
       //新增会议室
       forms: {
         isLeader: false,
-        customOrgId: "",
+        customOrgId: '',
       },
       dialogVisible: false,
       dialogVisible1: false,
@@ -464,11 +393,11 @@ export default {
       currentPage: 1,
       loadingOptions: {
         lock: true,
-        text: "",
-        spinner: "el-icon-loading",
-        background: "rgba(0, 0, 0, 0.7)",
+        text: '',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)',
       },
-    };
+    }
   },
   components: {
     draggable,
@@ -477,214 +406,214 @@ export default {
   filters: {
     showName(val) {
       // console.log(val);
-      let obj = "";
+      let obj = ''
       switch (val) {
         case true:
-          obj = "是";
-          break;
+          obj = '是'
+          break
         case false:
-          obj = "否";
-          break;
+          obj = '否'
+          break
       }
-      return obj;
+      return obj
     },
     check(val) {
       // console.log(val);
-      let obj = "";
+      let obj = ''
       switch (val) {
         case true:
-          obj = "通过";
-          break;
+          obj = '通过'
+          break
         case false:
-          obj = "未通过";
+          obj = '未通过'
 
-          break;
+          break
       }
-      return obj;
+      return obj
     },
   },
   created() {
-    this.init();
+    this.init()
     // this.getTaList();
     // this.cardQuery();
   },
   computed: {
     countMax() {
-      if (this.zhuangtai == "add") {
-        return this.count + 1;
+      if (this.zhuangtai == 'add') {
+        return this.count + 1
       } else {
-        return this.count;
+        return this.count
       }
     },
   },
   methods: {
     deleteFenLei(index) {
       // console.log(index);
-      this.manageLists[index].updateStatus = 2;
-      this.$forceUpdate();
+      this.manageLists[index].updateStatus = 2
+      this.$forceUpdate()
     },
     changeCustomOrgName(index) {
-      this.manageLists[index].updateStatus = 1;
+      this.manageLists[index].updateStatus = 1
     },
     chooseFenLei(val, item) {
-      this.chooseIndex = val;
-      this.form.customOrgId = item.id;
-      this.getTaList();
+      this.chooseIndex = val
+      this.form.customOrgId = item.id
+      this.getTaList()
     },
     openAddDialog() {
-      this.forms.customOrgId = this.manageList[this.chooseIndex].id;
-      this.zhuangtai = "add";
-      this.dialogVisible = true;
+      this.forms.customOrgId = this.manageList[this.chooseIndex].id
+      this.zhuangtai = 'add'
+      this.dialogVisible = true
     },
     unitSelect(e) {
-      console.log(e);
-      let unit = this.unitOptions.filter((item, index) => e === item.id);
-      this.forms.unitId = e;
-      this.forms.unit = unit[0].unitName;
+      console.log(e)
+      let unit = this.unitOptions.filter((item, index) => e === item.id)
+      this.forms.unitId = e
+      this.forms.unit = unit[0].unitName
     },
     stepChange(currentValue, oldValue, item) {
-      console.log(item);
-      console.log(this.rankData);
+      console.log(item)
+      console.log(this.rankData)
     },
     synchroDingId() {
       this.$axios.asyDingId({ phone: this.forms.phone }).then((res) => {
         if (res.data.code == 200) {
-          this.forms.dingId = res.data.data;
-          this.$forceUpdate();
-          this.$message.success("同步成功！");
+          this.forms.dingId = res.data.data
+          this.$forceUpdate()
+          this.$message.success('同步成功！')
         } else {
-          this.$message.error(res.data.data);
+          this.$message.error(res.data.data)
         }
-      });
+      })
     },
     init() {
       this.$axios
         .findAllCustomOrgs()
         .then((res) => {
           if (res.data.code == 200) {
-            this.manageList = res.data.data;
-            this.form.customOrgId = this.manageList[0]?.id;
-            this.getTaList();
+            this.manageList = res.data.data
+            this.form.customOrgId = this.manageList[0]?.id
+            this.getTaList()
           }
         })
-        .catch((err) => {});
+        .catch((err) => {})
     },
     getTaList(val) {
-      this.loading = true;
+      this.loading = true
       if (val == 1) {
-        this.form.pageNum = 1;
-        this.form.customOrgId = this.manageList[this.chooseIndex].id;
+        this.form.pageNum = 1
+        this.form.customOrgId = this.manageList[this.chooseIndex].id
       }
       if (this.form.time) {
-        this.form.startDate = this.form.time[0];
-        this.form.endDate = this.form.time[1];
+        this.form.startDate = this.form.time[0]
+        this.form.endDate = this.form.time[1]
       }
       this.$axios.findAllCustomUserByCustomOrgId(this.form).then((res) => {
         if (res.data.code == 200) {
-          this.count = res.data.data.totalElements;
-          this.tableData = res.data.data.content;
-          this.currentSums = this.tableData.length;
-          this.loading = false;
+          this.count = res.data.data.totalElements
+          this.tableData = res.data.data.content
+          this.currentSums = this.tableData.length
+          this.loading = false
         }
-      });
+      })
     },
     cardQuery() {
       let data = {
         info: this.cardSearch,
-      };
+      }
       this.$axios
         .getCardFuzzyQuery(data)
         .then((res) => {
-          console.log(res);
-          this.personCard = res.data.data;
+          console.log(res)
+          this.personCard = res.data.data
         })
-        .catch((err) => {});
+        .catch((err) => {})
     }, //模糊查询人员库（名片模式）
     saveOrder() {
-      this.dragFlag = true;
-      this.loadingOptions.text = "正在保存排序";
-      let loading = Loading.service(this.loadingOptions);
+      this.dragFlag = true
+      this.loadingOptions.text = '正在保存排序'
+      let loading = Loading.service(this.loadingOptions)
       this.$axios.postSaveCardOrder(this.personCard).then((res) => {
-        console.log(res);
-        loading.close();
+        console.log(res)
+        loading.close()
         this.$message({
           message: res.data.data,
-          type: res.data.code === 200 ? "success" : "error",
-        });
+          type: res.data.code === 200 ? 'success' : 'error',
+        })
         if (res.data.code !== 200) {
-          this.dragFlag = false;
+          this.dragFlag = false
         }
-      });
+      })
     }, //保存排序（名片模式）
     dragEnd(e) {
-      console.log(e);
+      console.log(e)
       this.personCard.forEach((item, index) => {
         //调整排序
-        item.sortNum = index + 1;
-      });
+        item.sortNum = index + 1
+      })
     },
     dragMove(e, originalEvent) {
-      this.dragFlag = false;
+      this.dragFlag = false
     },
     handleChange(e, item) {
-      console.log(e, item);
+      console.log(e, item)
       this.personOptions.forEach((person, i) => {
         if (person.id === e) {
           // item.id = person.id;
-          item.oldSort = person.sortNum;
+          item.oldSort = person.sortNum
         }
-      });
+      })
     },
     visibleChange(val) {
       if (val === false) {
-        this.personOptions = [];
+        this.personOptions = []
       }
     },
     remoteMethodUnit(query) {
       let data = {
         info: query,
-      };
+      }
       setTimeout(() => {
         this.$axios.findOrg(data).then((res) => {
-          this.unitOptions = res.data.data;
-          console.log(this.unitOptions);
-        });
-      }, 0);
+          this.unitOptions = res.data.data
+          console.log(this.unitOptions)
+        })
+      }, 0)
     },
     remoteMethod(query) {
       let data = {
         info: query,
-      };
+      }
       setTimeout(() => {
         this.$axios.postListFuzzyQuery(data).then((res) => {
-          console.log(res.data.data);
-          console.log(this.rankData.arr);
-          this.personOptions = res.data.data;
+          console.log(res.data.data)
+          console.log(this.rankData.arr)
+          this.personOptions = res.data.data
           // this.rankData.arr.forEach((arr,i) => {
           //   results = res.data.data.filter((person,idx) => person.dingId !== arr.id)
           // });
-        });
-      }, 0);
+        })
+      }, 0)
     },
     querySearch(queryString, cb, item) {
-      let results;
+      let results
       let data = {
         info: item.name,
-      };
+      }
       this.$axios.postListFuzzyQuery(data).then((res) => {
-        console.log(res.data.data);
-        console.log(this.rankData.arr);
-        results = res.data.data;
+        console.log(res.data.data)
+        console.log(this.rankData.arr)
+        results = res.data.data
         // this.rankData.arr.forEach((arr,i) => {
         //   results = res.data.data.filter((person,idx) => person.dingId !== arr.id)
         // })
         setTimeout(() => {
-          cb(results);
-        }, 0);
-      });
+          cb(results)
+        }, 0)
+      })
     },
     resetForm(formName) {
-      this.$refs[formName].resetFields();
+      this.$refs[formName].resetFields()
     },
     saveRank(formName) {
       this.$refs[formName].validate((valid) => {
@@ -692,67 +621,65 @@ export default {
           this.$axios
             .postBatchSort(this.rankData.arr)
             .then((res) => {
-              console.log(res);
+              console.log(res)
               if (res.data.code == 200) {
-                this.loading = false;
+                this.loading = false
                 this.$message.success({
                   message: res.data.data,
                   duration: 800,
-                });
-                this.init();
-                this.rankDialogClose();
+                })
+                this.init()
+                this.rankDialogClose()
               } else {
-                this.loading = false;
+                this.loading = false
                 this.$message.error({
                   message: res.data.data,
                   duration: 800,
-                });
-                this.rankDialogClose();
+                })
+                this.rankDialogClose()
               }
             })
             .catch((err) => {
-              this.loading = false;
-              this.rankDialogClose();
-            });
+              this.loading = false
+              this.rankDialogClose()
+            })
         } else {
-          return false;
+          return false
         }
-      });
+      })
     },
     removeItem(row, i) {
       if (this.rankData.arr.length > 1) {
         //最后一行不能删除
-        this.rankData.arr = this.rankData.arr.filter(
-          (item, index) => i !== index
-        );
+        this.rankData.arr = this.rankData.arr.filter((item, index) => i !== index)
       } else {
       }
     }, //批量排序中删除一行
     addItem() {
       this.rankData.arr.push({
-        name: "",
+        name: '',
         newSort: 1,
         oldSort: 0,
-      });
+      })
     }, //批量排序中新增一行
     batchRank() {
-      this.rankDialogFlag = true;
+      this.rankDialogFlag = true
     },
     rankDialogClose() {
-      this.rankDialogFlag = false;
-      this.resetForm("sortForm");
-      this.rankData = { arr: [{ name: "", newSort: 1, oldSort: 0 }] };
+      this.rankDialogFlag = false
+      this.resetForm('sortForm')
+      this.rankData = { arr: [{ name: '', newSort: 1, oldSort: 0 }] }
     },
     updateDialogClose() {
-      this.updateDialogFlag = false;
+      this.updateDialogFlag = false
     },
     switchView(flag) {
       if (this.dragFlag === false) {
-        this.$alert("请先保存排序！", "提示", {
-          confirmButtonText: "确定",
-        });
+        this.$alert('请先保存排序！', '提示', {
+          confirmButtonText: '确定',
+        })
       } else {
-        this.switchFlag = flag;
+        this.switchFlag = flag
       }
 
       /*切换后清空查询条件与筛选*/
@@ -763,286 +690,287 @@ export default {
 
     //更新人员信息
     upUser() {
-      this.loading = true;
+      this.loading = true
       this.$axios
         .upPeo()
         .then((res) => {
-          console.log(res);
+          console.log(res)
           if (res.code == 200) {
-            this.loading = false;
+            this.loading = false
             this.$message.success({
-              message: "更新成功",
+              message: '更新成功',
               duration: 800,
-            });
+            })
           } else {
-            this.loading = false;
+            this.loading = false
             this.$message.error({
-              message: "更新失败",
+              message: '更新失败',
               duration: 800,
-            });
+            })
           }
         })
         .catch((err) => {
-          this.loading = false;
-        });
+          this.loading = false
+        })
     },
     importtUser(file) {
-      const param = new FormData();
-      param.append("file", file.file);
-      this.exportFlag = true;
+      const param = new FormData()
+      param.append('file', file.file)
+      this.exportFlag = true
       this.$axios
         .importPeo(param)
         .then((res) => {
-          this.exportFlag = false;
+          this.exportFlag = false
           if (res.data.code == 200) {
             this.$message.success({
-              message: "导入成功",
+              message: '导入成功',
               duration: 800,
-            });
-            this.getTaList();
+            })
+            this.getTaList()
           } else {
             this.$message.error({
-              message: "文件格式有误，请重新导入",
+              message: '文件格式有误，请重新导入',
               duration: 800,
-            });
+            })
           }
         })
         .catch((err) => {
-          this.exportFlag = false;
+          this.exportFlag = false
           this.$message.error({
-            message: "文件格式有误，请重新导入",
+            message: '文件格式有误，请重新导入',
             duration: 800,
-          });
-        });
+          })
+        })
     },
     exportUser() {
-      this.importFlag = true;
+      this.importFlag = true
       this.$axios.exportPeo().then((res) => {
-        this.importFlag = false;
-        let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
-        const objectUrl = URL.createObjectURL(blob);
-        const link = document.createElement("a");
-        const fname = "人员数据"; // 下载文件的名字
-        link.href = objectUrl;
-        link.setAttribute("download", fname);
-        document.body.appendChild(link);
-        link.click();
-      });
+        this.importFlag = false
+        let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
+        const objectUrl = URL.createObjectURL(blob)
+        const link = document.createElement('a')
+        const fname = '人员数据' // 下载文件的名字
+        link.href = objectUrl
+        link.setAttribute('download', fname)
+        document.body.appendChild(link)
+        link.click()
+      })
     },
     resert() {
       this.form = {
         customOrgId: this.form.customOrgId,
-        customUserName: "",
-        customUserUnit: "",
-        time: "",
+        customUserName: '',
+        customUserUnit: '',
+        time: '',
         pageSize: 10,
         pageNum: 1,
-      };
-      this.dates = [];
-      this.getTaList();
+      }
+      this.dates = []
+      this.getTaList()
     },
     managesLei() {
-      this.manageLists = [];
+      this.manageLists = []
       this.manageList.map((item) => {
-        this.manageLists.push(JSON.parse(JSON.stringify(item)));
-      });
+        this.manageLists.push(JSON.parse(JSON.stringify(item)))
+      })
       this.manageLists.map((item) => {
-        item.updateStatus = 1;
-      });
-      this.manageCategores = true;
+        item.updateStatus = 1
+      })
+      this.manageCategores = true
     },
     //查看人员
     lookItem(val) {
-      this.dialogVisible1 = true;
-      this.attribute = val;
+      this.dialogVisible1 = true
+      this.attribute = val
     },
     addConf() {
-      this.zhuangtai = "add";
-      this.dialogVisible = true;
+      this.zhuangtai = 'add'
+      this.dialogVisible = true
     },
     handleSizeChange(val) {
-      this.form.pageSize = val;
-      this.getTaList();
+      this.form.pageSize = val
+      this.getTaList()
     },
     //分页查询
     handleCurrentChange(val) {
-      console.log("change", this.form.page, val);
-      this.form.pageNum = val;
-      this.getTaList();
+      console.log('change', this.form.page, val)
+      this.form.pageNum = val
+      this.getTaList()
     },
     close() {
-      this.$refs.forms.resetFields();
-      this.dialogVisible = false;
+      this.$refs.forms.resetFields()
+      this.dialogVisible = false
       this.forms = {
         isLeader: false,
-        customOrgId: "",
-      };
+        customOrgId: '',
+      }
     },
     sureFen() {
-      let flag = true;
+      let flag = true
       for (let i = 0; i < this.manageLists.length; i++) {
-        if (this.manageLists[i].customOrgName == "") {
-          flag = false;
+        if (this.manageLists[i].customOrgName == '') {
+          flag = false
         }
       }
       if (flag) {
         this.$axios.updateCustomOrgs(this.manageLists).then((res) => {
           if (res.data.code == 200) {
-            this.manageCategores = false;
-            this.init();
+            this.manageCategores = false
+            this.init()
           } else {
-            this.$message.error(res.data.data);
+            this.$message.error(res.data.data)
           }
-        });
+        })
       } else {
-        this.$message.error("分类名称不能为空！");
+        this.$message.error('分类名称不能为空！')
       }
     },
     insertFen() {
       let data = {
-        customOrgName: "分类" + (this.manageLists.length + 1),
+        customOrgName: '分类' + (this.manageLists.length + 1),
         updateStatus: 1,
-      };
-      this.manageLists.push(data);
+      }
+      this.manageLists.push(data)
     },
     //重置表单
     handleClose(val) {
-      this.manageLists = [];
+      this.manageLists = []
       if (val == 1) {
-        this.$refs.forms.resetFields();
+        this.$refs.forms.resetFields()
       }
 
-      this.dialogVisible = false;
-      this.manageCategores = false;
+      this.dialogVisible = false
+      this.manageCategores = false
       this.forms = {
         isLeader: false,
-      };
+      }
       //   this.getTaList();
     },
     //修改
     handleEdit(val) {
-      this.zhuangtai = "update";
-      this.forms = JSON.parse(JSON.stringify(val));
-      this.dialogVisible = true;
+      this.zhuangtai = 'update'
+      this.forms = JSON.parse(JSON.stringify(val))
+      this.dialogVisible = true
     },
     outData() {
       let data = {
         customOrgId: this.manageList[this.chooseIndex].id,
-      };
+      }
 
       this.$axios.exportCustomUser(data).then((res) => {
         if (res.data.code == 200) {
-          let src = urlConfig.production_url + "/" + res.data.data;
+          let src = urlConfig.production_url + '/' + res.data.data
 
           // let src = "http://192.168.102.165:6888" + "/" + res.data.data;
-          let link = document.createElement("a");
-          link.style.display = "none";
-          link.href = src;
-          document.body.appendChild(link);
-          link.click();
-          document.body.removeChild(link);
+          let link = document.createElement('a')
+          link.style.display = 'none'
+          link.href = src
+          document.body.appendChild(link)
+          link.click()
+          document.body.removeChild(link)
         } else {
-          this.$message.error(res.data.data);
+          this.$message.error(res.data.data)
         }
-      });
+      })
     },
     save() {
-      this.saveFlag = true;
+      this.saveFlag = true
       this.$refs.forms.validate((val) => {
         if (val) {
-          this.forms.updateStatus = 1;
+          this.forms.updateStatus = 1
           this.manageList.map((item) => {
             if (item.id == this.forms.customOrgId) {
-              this.forms.customOrgName = item.customOrgName;
+              this.forms.customOrgName = item.customOrgName
             }
-          });
+          })
           this.$axios.addPerson(this.forms).then((res) => {
-            let data = JSON.parse(JSON.stringify(res.data.data));
+            let data = JSON.parse(JSON.stringify(res.data.data))
             if (res.data.code == 200) {
               this.$message.success({
-                message: this.zhuangtai == "add" ? "新增成功" : "修改成功",
+                message: this.zhuangtai == 'add' ? '新增成功' : '修改成功',
                 duration: 800,
-              });
-              this.saveFlag = false;
-              this.form.customOrgId = this.manageList[this.chooseIndex].id;
-              this.getTaList();
-              this.handleClose(1);
+              })
+              this.saveFlag = false
+              this.form.customOrgId = this.manageList[this.chooseIndex].id
+              this.getTaList()
+              this.handleClose(1)
             } else {
-              this.saveFlag = false;
+              this.saveFlag = false
               this.$message.error({
                 message: `${data}`,
                 duration: 800,
-              });
+              })
             }
-          });
-          this.dialogVisible = false;
+          })
+          this.dialogVisible = false
         } else {
-          this.saveFlag = false;
-          this.getTaList();
+          this.saveFlag = false
+          this.getTaList()
         }
-      });
+      })
     }, //新增、修改人员保存
     //删除人员
     deletepeole(value) {
       // console.log(value);
-      this.$confirm(`此操作将删除${value.customUserName}, 是否继续?`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
+      this.$confirm(`此操作将删除${value.customUserName}, 是否继续?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
       }).then((res) => {
         let data = {
           id: value.id,
           updateStatus: 2,
           customOrgId: value.customOrgId,
-        };
+        }
         this.$axios.addPerson(data).then((res) => {
-          console.log(res);
+          console.log(res)
           if (res.data.code == 200) {
             this.$message.success({
-              message: "删除成功！",
+              message: '删除成功！',
               duration: 800,
-            });
-            this.getTaList();
+            })
+            this.getTaList()
           }
-        });
-      });
+        })
+      })
     },
     handleSelectionChange(val) {
-      this.selectData = val;
+      this.selectData = val
     },
     saveUpdate() {
-      console.log(this.selectData);
+      console.log(this.selectData)
       this.$axios.upDateConfData(this.selectData).then((res) => {
-        console.log(res);
+        console.log(res)
         if (res.data.code == 200) {
           this.$message.success({
-            message: "数据更新成功！",
+            message: '数据更新成功！',
             duration: 200,
-          });
+          })
         } else {
           this.$message.error({
             message: res.data.data,
             duration: 200,
-          });
+          })
         }
-        this.updateDialogClose();
-        this.init();
-      });
+        this.updateDialogClose()
+        this.init()
+      })
     },
     openUpdateDialog() {
       this.$axios.getConfEnd().then((res) => {
-        console.log(res);
-        this.personTable = res.data.data;
-      });
-      this.updateDialogFlag = true;
+        console.log(res)
+        this.personTable = res.data.data
+      })
+      this.updateDialogFlag = true
     }, //更新人员数据
     importData() {
-      this.customOrgsId = this.manageList[this.chooseIndex].id;
-      this.batchAImportFlag = true;
+      console.log(this.manageList)
+      this.customOrgsId = this.manageList[this.chooseIndex].id
+      this.batchAImportFlag = true
     }, //导入人员数据
     exportData() {}, //导出人员数据
   },
-};
+}
 </script>
   <style scoped lang="less">
 .main_content {
@@ -1220,7 +1148,7 @@ export default {
           line-height: 44px;
           text-align: center;
           font-size: 24px;
-          font-family: "SourceHanSansCN-Medium";
+          font-family: 'SourceHanSansCN-Medium';
           font-weight: 500;
           color: #ffffff;
         }
@@ -1228,7 +1156,7 @@ export default {
       .portrait {
         width: 44px;
         height: 44px;
-        background-image: url("../../assets/img/portrait.png");
+        background-image: url('../../assets/img/portrait.png');
         background-size: 100% 100%;
         background-repeat: no-repeat;
       }