排班

src/views/base/workPersonScheduling-change.vue

@@ -4,7 +4,7 @@
     :visible.sync="showDialog"
     :title="title"
     :modal-append-to-body="false"
-    width="900px"
+    width="700px"
     style="text-align: left"
     @close="closeDialog"
     :close-on-click-modal="false"
@@ -75,7 +75,81 @@
           </el-col>
         </el-row>
       </el-form>
-      <div class="flex-row">
+      <div class="von-cho">
+        <div class="von-left">
+          <div class="von-tit">可选班次</div>
+          <ul>
+            <li v-for="shift in shiftData" :key="shift.id">
+              <a
+                href="#"
+                @click="selectShift(shift)"
+                v-if="selectId == shift.id"
+                class="active"
+                >{{ shift.number }} - {{ shift.name }}</a
+              >
+              <a href="#" @click="selectShift(shift)" v-else
+                >{{ shift.number }} - {{ shift.name }}</a
+              >
+            </li>
+          </ul>
+        </div>
+        <div class="von-center">
+          <el-button round size="mini" @click="moveUp">选择</el-button>
+          <div style="height: 10px"></div>
+          <el-button round size="mini" @click="moveDown">移除</el-button>
+        </div>
+        <div class="von-right">
+          <div class="von-right-top">
+            <div class="von-tit">排班规律表</div>
+            <ul>
+              <li>
+                <a href="#" v-if="showTagNum == 1" class="active" @click="changeTag('1')">一</a>
+                <a href="#" v-else @click="changeTag('1')">一</a>
+                <p>{{ number1 }}</p>
+              </li>
+              <li>
+                <a href="#" v-if="showTagNum == 2" class="active" @click="changeTag('2')">二</a>
+                <a href="#" v-else @click="changeTag('2')">二</a>
+                <p>{{ number2 }}</p>
+              </li>
+              <li>
+                <a href="#" v-if="showTagNum == 3" class="active" @click="changeTag('3')">三</a>
+                <a href="#" v-else @click="changeTag('3')">三</a>
+                <p>{{ number3 }}</p>
+              </li>
+              <li>
+                <a href="#" v-if="showTagNum == 4" class="active" @click="changeTag('4')">四</a>
+                <a href="#" v-else @click="changeTag('4')">四</a>
+                <p>{{ number4 }}</p>
+              </li>
+              <li>
+                <a href="#" v-if="showTagNum == 5" class="active" @click="changeTag('5')">五</a>
+                <a href="#" v-else @click="changeTag('5')">五</a>
+                <p>{{ number5 }}</p>
+              </li>
+              <li>
+                <a href="#" v-if="showTagNum == 6" class="active" @click="changeTag('6')">六</a>
+                <a href="#" v-else @click="changeTag('6')">六</a>
+                <p>{{ number6 }}</p>
+              </li>
+              <li>
+                <a href="#" v-if="showTagNum == 7" class="active" @click="changeTag('7')">七</a>
+                <a href="#" v-else @click="changeTag('7')">七</a>
+                <p>{{ number7 }}</p>
+              </li>
+            </ul>
+          </div>
+          <div class="von-right-bot">
+            <el-tag
+              v-if="leftClickType && rightClickType"
+              closable
+              @close="closeTag()"
+              >{{ showName }}</el-tag
+            >
+          </div>
+        </div>
+      </div>
+      <!-- <div class="flex-row">
         <el-row>
           <el-col :span="9">
             <el-table
@@ -216,7 +290,7 @@
             </div>
           </el-col>
         </el-row>
-      </div>
+      </div> -->
     </div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="closeDialog">取 消</el-button>
@@ -286,6 +360,7 @@ export default {
       number6: "0",
       number7: "0",
       personInfoData: [],
+      selectId: "",
     };
   },
   created() {
@@ -420,6 +495,7 @@ export default {
           this.schedulingIds[this.showTagNum] = this.showId;
           var numberName = "number" + this.showTagNum;
           this[numberName] = this.showNumber;
+          this.selectId = this.currentRow.id;
         }
       }
     },
@@ -430,6 +506,7 @@ export default {
         this.rightClickType = false;
         var numberName = "number" + this.showTagNum;
         this[numberName] = "0";
+        this.selectId = "";
       }
     },
     closeTag() {
@@ -439,8 +516,13 @@ export default {
         this.rightClickType = false;
         var numberName = "number" + this.showTagNum;
         this[numberName] = "0";
+        this.selectId = "";
       }
     },
+    selectShift(shift) {
+      this.currentRow = shift;
+      this.selectId = shift.id;
+    },
   },
   mounted() {
     //this.queryRelatedMenuList();
@@ -469,3 +551,139 @@ export default {
   align-items: center; /* 垂直居中 */
 }
 </style>
+<style>
+* {
+  margin: 0;
+  padding: 0;
+}
+li {
+  list-style: none;
+}
+a {
+  text-decoration: none;
+  color: #101010;
+}
+body {
+  font-size: 14px;
+  color: #101010;
+  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
+}
+.von-cho {
+  display: flex;
+  align-items: center;
+  height: 332px;
+  justify-content: space-between;
+}
+.von-left,
+.von-right {
+  height: 100%;
+  width: 40%;
+}
+.von-left,
+.von-right-top,
+.von-right-bot {
+  border: 1px solid #eaedf4;
+  border-radius: 5px;
+  overflow: hidden;
+}
+.von-right-bot {
+  padding: 11px 15px;
+}
+.von-tit {
+  background: #f3f6f9;
+  padding: 11px 15px;
+  font-size: 16px;
+}
+.von-left ul {
+  overflow-y: scroll;
+  height: 100%;
+  padding: 10px 0;
+}
+.von-left li,
+.von-center {
+  display: flex;
+  flex-flow: column;
+}
+.von-left li a {
+  padding: 5px 15px;
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.von-left li .active {
+  background: #f3f6f9;
+  color: #3894ff;
+}
+.von-center button {
+  padding: 5px 15px;
+  margin: 5px 10px;
+  border-radius: 5px;
+  box-shadow: initial;
+}
+.von-right {
+  display: flex;
+  flex-flow: column;
+  justify-content: space-between;
+}
+.von-right-top {
+  margin-bottom: 10px;
+}
+.von-right-top ul {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+}
+.von-right-top ul li {
+  color: #888;
+  font-size: 12px;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.von-right-top ul li a {
+  display: block;
+  margin-bottom: 5px;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+}
+.von-right-top ul li .active {
+  border-radius: 50%;
+  background: rgba(22, 119, 255, 0.25);
+}
+.von-right-top ul li p {
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  border-radius: 50%;
+  background: #1677ff;
+  color: white;
+  text-align: center;
+  font-size: 80%;
+}
+/* .von-right-top ul li:last-child p {
+  background: #33bb00;
+} */
+.von-right-bot {
+  flex: 1;
+}
+.von-right-bot ul {
+  padding: 5px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.von-right-bot ul li {
+  background: #d0deff;
+  border: 1px solid #7ca5df;
+  padding: 3px 5px;
+  margin: 5px;
+  border-radius: 3px;
+}
+.von-right-bot ul li a {
+  margin-left: 5px;
+  color: #5682bf;
+}
+</style>

src/views/base/workPersonScheduling-list.vue

@@ -43,13 +43,13 @@
           >是否包含下级单位</el-checkbox
         >
       </el-form-item>
-      <el-form-item label="人员id" prop="personId">
+      <!-- <el-form-item label="人员id" prop="personId">
         <el-input
           type="text"
           size="mini"
           v-model="queryModel.personId"
         ></el-input>
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item>
         <el-button
           type="primary"